css学习笔记一
<p>css学习笔记： 1.css样式须放在 <style> *****样式 </style></p><p>2.背景用图片: background-image:url(/study/background.jpg); 背景水平重复：background-repeat: repeat-x;</p>
<p>3.背景平铺，通过拉伸实现，会有失真 background-size: contain;</p>
<p>4.属性:text-align 值：left,right,center div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提。 但是，span却看不出右对齐效果，为什么呢？ 因为span是内联元素其默认宽度就是其文本内容的宽度 简单说就是文本已经粑在其边框上了，对齐是看不出效果来的</p>
<p>5.<style type="text/css"> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration:blink} .a {text-decoration: none} </style> <h1>上划线</h1> <h2>删除效果</h2> <h3>下划线</h3> <h4>闪烁效果，大部分浏览器已经取消该效果</h4> <a href="https://how2j.cn/">默认的超链</a> <a class="a" href="https://how2j.cn/">去掉了下划线的超链</a></p>
<p>6.行间距： 属性: line-height 值：数字或百分比 属性：letter-spacing(字符间距) 值：数字 属性：word-spacing(单词间距) 属性：text-indent 值：数字 //首行缩进</p>
<p>7.属性：text-transform 值： uppercase 全部大写 capitalize 首字母大写 lowercase 全部小写</p>
<p>8.属性:table-layout //作用在<table> automatic; 单元格的大小由td的内容宽度决定 fixed; 单元格的大小由td上设置的宽度决定 注：只对连续的英文字母起作用，如果使用中文就看不到效果</p>
<p>9.属性：border-collapse //作用在<table> 值： separate:边框分隔 collapse:边框合并</p>
<p>10.边框风格：属性： border-style // 作用在<div>上 solid: 实线 dotted:点状 dashed:虚线 double:双线</p>
<p>11.边框颜色属性：border-color 值：red,#ff0000,rgb(255,0,0) // 作用在<div>上</p>
<p>12.边框宽度： 属性：border-width 值：数字</p>
<p>13.块级元素和内联元素的边框区别： 可以看到，块级元素div默认是占用100%的宽度 常见的块级元素有div h1 p 等 而内联元素span的宽度由其内容的宽度决定 常见的内联元素有 span a b strong i input 等</p>
<p>14.style标签上的与style属性冲突：style标签上的与style属性冲突<br>优先使用style属性 即标签上的style属性，而不是head下的<style></style>中的内容</p>
<p>14.只有<table>的border-collapse: collapse; 为collapse的时候（不能为separate）在<tr>标签中的 border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: lightgray; 这些属性才能显现处理啊</p>
<p>15 元素内边距，指的是元素里的内容与边框之间的距离 padding-left:左内边距； padding-right:右内边距；padding-top：上内边距；padding-bottom：下内边距 padding: 上 右 下 左</p>
<p>16.</p>
<p><img src="https://img2020.cnblogs.com/blog/587411/202006/587411-20200622220042165-1462403901.png"></p>
<p> </p>
<p> </p>
<p>17.元素外边距：指的是元素边框和元素边框之间的距离 属性： margin-left:做外边距 margin-right：右外边距 margin-top：上外边距 margin-bottom：下外边距 像span这样的内联元素，默认情况下，只有左右外边距，没有上下外边距。 为了观察上下外边距的效果，可以采用块级元素，比如div.</p>
<p>18.<a>标签去除超链接的下划线 text-decoration:none</p>
<p>19. position属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移</p>
<p>20. 使用display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了 使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见</p>
<p> 21.<span style="color: rgba(255, 0, 0, 1)">html文件中引用css文件： <link rel="stylesheet" type="text/css" href="/study/style.css"> 引用js文件 <code class="xml plain"><</code><code class="xml keyword">script</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"https://how2j.cn/study/hello.js"</code><code class="xml plain">></</code><code class="xml keyword">script</code><code class="xml plain">></code></span></p>
<p>在测试的时候，大家写的css文件都是放在本地的，比如d:/style.css<br>这时就应该写成<br>href="file://d:/style.css" </p>
<p>如果样式上增加了!important，则优先级最高，甚至高于style属性</p>
<p>21.设置了绝对定位的元素，相当于该元素被从原文档中删除了，与绝对定位不同的是，相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离</p>
<p>22.默认的div排列是会换行的<br>如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方<br>如果超出了父容器，还会有自动换行的效果</p>
<p> 23. <span class="strong">display:block; 表示块级元素<br>块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效<br>div默认是块级元素<br><span style="color: rgba(255, 0, 0, 1)">span默认是内联元素(不会有换行,width和height也不会生效)</span></span></p>
<p><span class="strong"><span style="color: rgba(255, 0, 0, 1)">24.display:inline内联，内联元素前后没有换行，并且在其上的width和height也无效。 其大小由其中的内容决定<br><br>div默认是块级元素<br>span默认是内联元素</span></span></p>
<p><span class="strong"><span style="color: rgba(255, 0, 0, 1)">25.内联是不换行，但是不能指定大小<br>块级时能指定大小，但是会换行</span></span></p>
<p><span class="strong"><span style="color: rgba(255, 0, 0, 1)">有时候，需要元素处于同一行，同时还能指定大小，这个时候，就需要用到<span class="strong">内联-块级 inline-block</span></span></span></p>
<p> </p>
<div class="line number1 index0 alt2"><code class="xml plain"><</code><code class="xml keyword">style</code><code class="xml plain">></code></div>
<p> </p>
<div class="line number2 index1 alt1"><code class="xml plain">span{</code></div>
<p> </p>
<div class="line number3 index2 alt2"><code class="xml spaces"> </code><code class="xml plain">display:inline-block;</code></div>
<p> </p>
<div class="line number4 index3 alt1"><code class="xml spaces"> </code><code class="xml plain">border: 1px solid lightgray;</code></div>
<p> </p>
<div class="line number5 index4 alt2"><code class="xml spaces"> </code><code class="xml plain">margin:10px;</code></div>
<p> </p>
<div class="line number6 index5 alt1"><code class="xml spaces"> </code><code class="xml plain">width:100px;</code></div>
<p> </p>
<div class="line number7 index6 alt2"><code class="xml plain">}</code></div>
<p> </p>
<div class="line number8 index7 alt1"><code class="xml plain"></</code><code class="xml keyword">style</code><code class="xml plain">></code></div>
<p> </p>
<div class="line number9 index8 alt2"><code class="xml plain">像这样 ，每个都能设置宽度 ，同时还能在同一行。</code></div>
<p> </p>
<div class="line number10 index9 alt1"><code class="xml plain"><</code><code class="xml keyword">br</code><code class="xml plain">></code></div>
<p> </p>
<div class="line number11 index10 alt2"> </div>
<p> </p>
<div class="line number12 index11 alt1"><code class="xml plain"><</code><code class="xml keyword">span</code><code class="xml plain">>盖伦</</code><code class="xml keyword">span</code><code class="xml plain">></code></div>
<p> </p>
<div class="line number13 index12 alt2"><code class="xml plain"><</code><code class="xml keyword">span</code><code class="xml plain">>蒙多医生</</code><code class="xml keyword">span</code><code class="xml plain">></code></div>
<p> </p>
<div class="line number14 index13 alt1"><code class="xml plain"><</code><code class="xml keyword">span</code><code class="xml plain">>奈德丽</</code><code class="xml keyword">span</code><code class="xml plain">></code></div>
<p> </p>
<div class="line number15 index14 alt2"><code class="xml plain"><</code><code class="xml keyword">span</code><code class="xml plain">>蒸汽机器人</</code><code class="xml keyword">span</code><code class="xml plain">></code></div>
<div class="line number15 index14 alt2">26.<img src="https://img2020.cnblogs.com/blog/587411/202006/587411-20200623171651112-649307717.png"></div>
<p> 27.块级元素和内联元素的居中解决办法：<img src="https://img2020.cnblogs.com/blog/587411/202006/587411-20200623172200994-1830353301.png"></p>
<p> 垂直居中的方法：</p>
<p><img src="https://img2020.cnblogs.com/blog/587411/202006/587411-20200623173932983-27505487.png"></p>
<p> </p>
<p> </p>
<p>内边距方式：</p>
<p><img src="https://img2020.cnblogs.com/blog/587411/202006/587411-20200623174346557-1161556804.png"></p>
<p> </p>
<p> <img src="https://img2020.cnblogs.com/blog/587411/202006/587411-20200623174918773-2140650018.png"></p>
<p> </p>
<p> </p>
<p> </p>
<p>28. overflow属性规定当内容溢出元素框时发生的事情<img src="https://img2020.cnblogs.com/blog/587411/202006/587411-20200623173336790-2105006613.png"></p>
<p><span style="color: rgba(255, 0, 0, 1)">29.心得</span></p>
<p><span style="color: rgba(255, 0, 0, 1)">1.img、span、a标签都是行级元素，就是如果一行内容没铺满，这三类标签会在后面接着依次排开，要想让他们换行，那就加标签br</span></p>
<p><span style="color: rgba(255, 0, 0, 1)"> 2.float：left需要考虑宽度，场景，如果float left 那一行，让出位置，走向上一行的末尾，发现上一行的宽度不够了，那这个使用float left就不会上移了，要想还能够上移，就需要设置width ，使之能够符合上一行剩余的宽度</span></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/zhangshitong/p/13179399.html
頁:
[1]