ToB企服应用市场:ToB评测及商务社交产业平台

标题: day28-CSS [打印本页]
作者: 悠扬随风    时间: 2024-5-18 21:00
标题: day28-CSS
CSS就是Cascading Style Sheet的缩写，中文译作“层叠样式表”或者是“级联样式表”，是用于控制网页外观处置惩罚并允许将网页的表现与内容分离的一种标记性语言，CSS不需要编译,可以直接由浏览器实验(属于浏览器表明型语言)，是Web网页开辟技术的重要组成部分。
那么接下来，继续看下，使用CSS有什么利益吧。
CSS基本语法:

CSS的基本语法由选择器、属性、属性的值组成，如果选择符有多个属性，由分号隔开。
注意，这里的代码都是英文格式，例如花括号、冒号和分号。
1、CSS的引入方式

CSS样式有三种不同的使用方式，分别是行内样式，嵌入样式以及链接式。我们需要根据不同的场合不同的需求来使用不同的样式。
行内样式，就是写在元素的style属性中的样式，这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以使用内联样式。但不保举大量使用内联样式，因为那样倒霉于后期维护。
  1. 行内设置
复制代码
嵌入式，是把CSS样式写在HTML文档内部head标签中的style标签里。浏览器加载HTML的同时就已经加载了CSS样式了。当单个文档需要特殊，单独的样式时，可以使用内部样式表。
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.      <title>title</title>
  5.       <meta charset="utf8">
  7.       
  8.   </head>
  9.   <body>
  10.   
  11.    嵌入式
  13.   </body>
  14. </html>
复制代码
链接式，就是把CSS样式写在HTML文档的外部，一个后缀为 .css 的外部样式表中，然后使用时在head标签中，使用link标签的href属性引入文件即可。当CSS样式需要应用在许多页面时，外部样式表是最理想的选择。在使用外部样式表的环境下，我们可以通过改变一个文件来改变这所有页面的外观。
common.css
  1. div{
  2.       color: white;
  3.       background-color: #369;
  4.       text-align: center
  5. }
复制代码
html文件
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.      <title>title</title>
  5.       <meta charset="utf8">
  7.       <link rel="stylesheet" href="common.css">
  8.   </head>
  9.   <body>
  11.   链接式
  12.   
  13.   </body>
  14. </html>
复制代码
2、CSS的选择器

2.2.1、基本选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.    
  10. </head>
  11. <body>
  13. item1
  14. item2
  15. item3
  17. item4
  18. item5
  19. item6
  21. </body>
  22. </html>
复制代码
2.2.2、组合选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  8.    
  11. </head>
  12. <body>
  16.     item1
  18. item2
  22.    
  23.         item3
  24.    
  25.      item4
  28. </body>
  29. </html>
复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.    
  10. </head>
  11. <body>
  14. item1
  15. <p >item2</p>
  16. item3
  17. <p id="i1">item4</p>
  20. </body>
  21. </html>
复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.    
  10. </head>
  11. <body>
  12.    
  13. <p id="i1">item0</p>
  14. item1
  15. item2
  16. item3
  17. item4
  20. </body>
  21. </html>
复制代码
2.2.3、属性选择器
  1. E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
  2.                 比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
  3.                
  4. E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }
  6. E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
  7.                 td[class~=”name”] { color:#f00; }
  9. E[attr^=val]    匹配属性值以指定值开头的每个元素                    
  10.                 div[class^="test"]{background:#ffff00;}
  12. E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}
  14. E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}
复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.    
  10. </head>
  11. <body>
  14. <input type="text">
  15. <input type="password">
  17. 1
  18. 2
  19. 3
  21. <ul>
  22.     <li><a target="_blank" href="https://www.cnblogs.com/1.png">item1</a></li>
  23.     <li><a target="_blank" href="https://www.cnblogs.com/2.jpg">item2</a></li>
  24.     <li><a target="_blank" href="https://www.cnblogs.com/3.jpg">item3</a></li>
  25.     <li><a target="_blank" href="https://www.cnblogs.com/4.png">item4</a></li>
  26.     <li><a target="_blank" href="https://www.cnblogs.com/5.gif">item5</a></li>
  27. </ul>
  29. </body>
  30. </html>
复制代码
2.2.4、伪类选择器

:linka:link选择所有未被访问的链接。:visiteda:visited选择所有已被访问的链接。:activea:active选择活动链接。:hovera:hover选择鼠标指针位于其上的链接。
  1.    
复制代码
before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最保举的应用就是图形天生。在一些精致的UI实现上，可以简化HTML代码，进步可读性和可维护性。
:first-childp:first-child选择属于父元素的第一个子元素的每个
元素。:last-childp:last-child选择属于其父元素最后一个子元素每个
元素。:beforep:before在每个
元素的内容之前插入内容。:afterp:after在每个
元素的内容之后插入内容。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.    
  10. </head>
  11. <body>
  14.     <p>item1</p>
  15.     <p>item1</p>
  16.     item1
  17.     <p>item1</p>
  20. <p id="i1">p标签</p>
  22. </body>
  23. </html>
复制代码
2.2.5、样式继续

CSS的样式表继续指的是，特定的CSS属性向下传递到子孙元素。总的来说，一个HTML文档就是一个家族，然后html元素有两个子元素，相当于它的儿子，分别是head和body，然后body和head各自还会有自己的儿子，最终形成了一张以下的家族谱。

在上图中，可以看到，body的子元素有三个，h1、p和ul，ul也有几个子元素，p也有1个子元素，那么li和a就都是body的后代元素。有时可能我们在body内里设置了一些属性，效果，body下面所有的后代元素都可能享受到，这就是样式继续。就像一句俗语一样，“龙生龙，凤生凤，老鼠的儿子会打洞”。样式继续，可以给我们的网页结构带来许多的便利，让我们的代码变得更加简便，但是，如果不了解，或者使用不当，也有可能会给我们带来许多不必要的麻烦。
因此，如果了解了哪些样式是会继续到后代元素的，那么就可以避免这些问题的发生了。
文本相关属性font-familyfont-sizeletter-spacingline-heightfont-stylefont-varianttext-aligntext-indentfont-weightfonttext-transformword-spacingcolordirection列表相关属性list-style-imagelist-style-positionlist-style-typelist-style表格和其他相关属性border-collapseborder-spacingcaption-sideempty-cellscursor2.2.6、选择器优先级

继续是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继续是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
  1. body{color:red;}    <p>helloyuan</p>
复制代码
这段文字都继续了由body {color:red;}样式定义的颜色。然而CSS继续性的权重黑白常低的，是比普通元素的权重还要低的0。
  1. p{color:green}
复制代码
发现只需要给加个颜色值就能覆盖掉它继续的样式颜色。由此可见：任何表现说明的规则都可以覆盖其继续样式。 此外，继续是CSS重要的一部分，我们甚至不消去思量它为什么可以或许这样，但CSS继续也是有限制的。有一些属性不能被继续，如：border, margin, padding, background等。
  1. /*
  2. !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
  4. 1 内联样式表的权值最高                          1000；
  6. 2 统计选择符中的ID属性个数。         #id                100
  8. 3 统计选择符中的CLASS属性个数。      .class             10
  10. 4 统计选择符中的HTML标签名个数。     标签名              1
  12. 按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
  13. */
复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.    
  9. </head>
  10. <body>
  13. item1
  17.    
  18.         
  19.             item2
  20.         
  21.    
  25. </body>
  26. </html>
复制代码
1、有!important声明的规则高于一切。
2、如果!important声明冲突，则比较优先权。
3、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
4、由继续而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
5、用数字表现只是说明头脑，一万个class也不如一个id权值高
3、CSS的属性操作

3.3.1、文本属性

  1. /*
  2. 属性值：
  3. normal：设置字体样式为正体。默认值。
  4. italic：设置字体样式为斜体。这是选择字体库中的斜体字。
  5. oblique：设置字体样式为斜体。人为的使文字倾斜，而不是去使用字体库的斜体字。
  6. */
复制代码
  1. /*
  2. 属性值：
  3. normal：设置字体为正常字体。相当于数字值400
  4. bold：设置字体为粗体。相当于数字值700。
  5. bolder：设置字体为比父级元素字体更粗的字体。
  6. lighter：设置字体为比父级元素字体更细的字体。
  7. number：用数字表示字体粗细。从小到大，越来约粗，取值范围：100、200、300、400、500、600、700、800、900。
  8. 注意：
  9. font-weight的常用值有两个normal和bold，其他的值在浏览器中的支持并不好。
  10. */
复制代码
  1. /*
  2. font-size的值有很多，有xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger，也可以设置值为具体的数值加上对应的计算单位来表示字体的大小。字体单位有像素（ px ）、字符（ em，默认1em等于16px，2em等于32px，根据不同浏览器的默认字体大小而决定 ）、百分比（ % ），磅[点]（ pt ）。
  3. 字体不指定大小时，主流浏览器默认是15像素到16像素。旧版本的谷歌浏览器，字体最小只能设置成12像素，新版已经修复。*/
复制代码
  1. /*
  2. font-family可以指定元素使用的字体系列或字体族。当我们使用font-family指定字体族的时候，可以指定多种字体,作为候补。指定多个字体的时候，需要使用逗号隔开。
  3. 如果css中没有声明当前内容使用的字体族的时候，默认：
  4.         中文：  宋体 [ win7以后默认是 微软雅黑 ]
  5.         英文：  Arial
  6. */
复制代码
  1. // 可以使用color来表示字体的颜色，颜色值最常用的有三种形式，英文单词，十六进制，RGB十进制。更高级的有 RGBA、HSL、HSLA，不过低版本的浏览器并不支持。
复制代码
复制代码
另外要注意，使用十六进制表现颜色值的时候，如果字符的格式类似于“AAAAAA”的这种，六个字符一样的；又或者是“AABBCC”，这种，一二，三四，五六 位置上的数字一样的，我们可以使用简写来表达。

  1. /*
  2. text-align属性可以设置文本内容的水平对齐方式。属性值常用的有
  3. 左对齐left、居中对齐center、右对齐right。justify 实现两端对齐文本效果。
  4. */
复制代码
  1. // 字体行高即字体最底端与字体内部顶端之间的距离。值可以是normal、px、number、%。
复制代码

行高 = 字体大小 + 上半行距 + 下半行距

vertical-align 属性设置元素的垂直对齐方式。
  1. [/code][code]<img src="" alt="">yuan
复制代码
  1. // 使用text-decoration可以设置文本内容的装饰线条，正常的文本是没有线条的，常用的值有none，underline，overline，line-through四种。
复制代码
3.3.2、配景属性

页面的配景颜色有四种属性值表现，分别是transparent（透明），RGB十进制颜色表现，十六进制颜色表现和颜色单词表现。
属性使用：
  1. /*
  2. background-color: transparent;   // 透明
  3. background-color: rgb(255,0,0); //  红色背景
  4. background-color: #ff0000;  //  红色背景
  5. background-color: red;    // 红色背景
  6. */
复制代码
background-image可以引入一张图片作为元素的配景图像。默认环境下，background-image放置在元素的左上角，并在垂直和水平方向重复平铺。
语法：
  1. // background-image: url('图片地址')
复制代码
当同时定义了配景颜色和配景图像时，配景图像覆盖在配景颜色之上。 以是当配景图片没有被加载到，或者不能完全铺满元素时，就会表现配景颜色。

CSS中，当使用图像作为配景了以后，都是默认把整个页面平铺满的，但是有时候在许多场合下面，页面并不需要这种默认的效果，而可能需要配景图像只表现一次，或者只按照指定方式进行平铺的时候，可以使用background-repeat来进行设置。
background-repeat专门用于设置配景图像的平铺方式，一般有四个值，默认是repeat（平铺），no-repeat（不平铺），repeat-x（X轴平铺），repeat-y（Y轴平铺）。
CSS中支持元素对配景图像的定位摆放功能，就是使用background-position属性来实现，以页面中元素的左上角为原点（0，0），把元素的内部区域当成一个坐标轴（上边框为X轴，越往左X的值越大，左边框为Y轴，越往下Y轴的值就越大，反之亦然），然后计算出配景图片的左上角与圆点的间隔（x轴和y轴的间隔），然后把配景图片放入到指定的位置上，对配景图片的位置进行精确的控制和摆放。
​        background-position的值分成两个，使用空格隔开，前面一个是配景图片左上角的x轴坐标，后面一个是配景图片左上角的y轴坐标。两个值都可以是正、负值。
语法：
  1. // background-position: x轴坐标 y轴坐标
复制代码
配景定位的值除了是具体的数值以外，还可以是左（left）、中（center）、右（right）

和字体属性一样，多个不同配景样式属性也是可以同时缩写的，不过不需要像字体那样按照肯定的顺序，配景样式的缩写属性的顺序是不固定的，可以恣意编排。
语法：
  1. // background: 背景颜色  背景图片  背景平铺方式  背景定位;
复制代码
3.3.3、边框属性

定义边框的风格，值可以有
  1. /*
  2. none：没有边框，当border的值为none的时候，系统将会忽略[border-color]
  3. hidden：隐藏边框，低版本浏览器不支持。
  4. dotted：点状边框。
  5. dashed：虚线边框。
  6. solid：实线边框。
  7. double：双实线边框，两条单线与其间隔的和等于border-width值。
  8. */
复制代码
border-style的值可以缩写的：
  1. /*
  2. 只有一个值的时候表示同时控制上下左右的边框风格。
  3. 只有两个值的时候表示分别控制上下、左右的边框风格。
  4. 有三个值的时候表示分别控制上、左右、下的边框风格。
  5. 有四个只的时候表示分别控制上、右、下、左的边框风格。
  6. */
复制代码
border-style还可以单独指定不同方向：
  1. /*
  2. border-top-style                设置上边的边框风格
  3. border-bottom-style             设置下边的边框风格
  4. border-left-style                设置左边的边框风格
  5. border-right-style                设置右边的边框风格
  6. */
复制代码
使用border-width可以定义边框的厚度，值可以是medium，thin，thick和指定数值的宽度。 同时，border-width也可以进行缩写：
  1. /*
  2. 只有一个值的时候表示同时控制上下左右的边框宽度。
  3. 只有两个值的时候表示分别控制上下、左右的边框宽度。
  4. 有三个值的时候表示分别控制上、左右、下的边框宽度。
  5. 有四个只的时候表示分别控制上、右、下、左的边框宽度。
  6. */
复制代码
border-width也可以单独指定不同方向：
  1. /*
  2. border-top-width                设置上边的边框宽度
  3. border-bottom-width            设置下边的边框宽度
  4. border-left-width                设置左边的边框宽度
  5. border-right-width                设置右边的边框宽度
  6. */
复制代码
定义边框的颜色，值表现的方式可以是十六进制，RGB十进制和单词表现法。
同上，border-color的缩写：
  1. /*
  2. 只有一个值的时候表示同时控制上下左右的边框颜色。
  3. 只有两个值的时候表示分别控制上下、左右的边框颜色。
  4. 有三个值的时候表示分别控制上、左右、下的边框颜色。
  5. 有四个只的时候表示分别控制上、右、下、左的边框颜色。
  6. */
复制代码
border-color也可以单独指定不同方向：
  1. /*
  2. border-top-color                设置上边的边框颜色
  3. border-bottom-color        设置下边的边框颜色
  4. border-left-color                设置左边的边框颜色
  5. border-right-color                设置右边的边框颜色
  6. */
复制代码
还可以把边框风格，边框宽度，边框颜色进行组合在一起，进行缩写：语法：
  1. // border: 边框宽度 边框样式 边框颜色;
复制代码
注意，border的缩写值可以不按照顺序来进行书写。这样的缩写可以同时控制4个方向的边框样式。
3.3.4、列表属性

CSS中提供了一些列表属性可以用来：
​        (1)、设置不同的列表项标记为有序列表
​        (2)、设置不同的列表项标记为无序列表
​        (3)、设置列表项标记为图像
  1. li { list-style-image:url('qq.gif'); }
复制代码
3.3.5、dispaly属性

display可以指定元素的表现模式，它可以把行内元素修改成块状元素，也可以把别的模式的元素改成行内元素。diisplay常用的值有四个。
语法：
  1. /*
  2. display: block;                         // 声明当前元素的显示模式为块状元素
  3. display: inline;                // 声明当前元素的显示模式为行内元素
  4. display: inline-block;          // 声明当前元素的显示模式为行内块状元素
  5. display: none;                        // 声明当前元素的显示模式为隐藏
  6. */
复制代码
3.3.6、盒子模子（重点）

盒模子是CSS的核心知识点之一，它指定元素怎样表现以及怎样相互交互。HTML页面上的每个元素都可以当作一个个方盒子，这些盒子由元素的content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

内边距，也叫“内补白”，表现页面中元素的边框与内容的间隔。内边距的值不能是负值，相当于table标签的cellpadding属性。
内边距可以设置多个值：
  1. /*
  2. 当padding只有一个值的时候表示同时控制上下左右的内边距。
  3. 当padding只有两个值的时候表示分别控制上下、左右的内边距。
  4. 当padding有三个值的时候表示分别控制上、左右、下的内边距。
  5. 当padding有四个只的时候表示分别控制上、右、下、左的内边距。
  6. */
复制代码
内边距也可以进行单独设置：
  1. /*
  2. padding-top                         设置上边的外边距
  3. padding -bottom                 设置下边的外边距
  4. padding -left                        设置左边的外边距
  5. padding -right                        设置右边的外边距
  6. */
复制代码
外边距，也叫“外补白”，表现页面中元素与元素之间的间隔。外边距越大，两者的间隔就越远，反之，如果外边距越小，则元素之间的间隔就越近，外边距的值可以是正数，也可以是负值。
margin也可以像padding一样设置多个值和单独方向设置，用法一样。
1、在网页的开辟过程中，需要让一个元素相对于父级元素作水平居中时，可以借助margin的特性来实现。
​      使用margin让元素自身居中：  margin: 0 auto;
2、浏览器的默认边距清零
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    
  7. </head>
  8. <body>
  11.    
  12.    
  14. </body>
  15. </html>
复制代码
边距案例：
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.         <meta charset="utf8">
  5.         
  6.   </head>
  7.   <body>
  9.       <ul >
  10.           <li><a target="_blank" href="https://www.cnblogs.com/">红米</a></li>
  11.           <li><a target="_blank" href="https://www.cnblogs.com/">电视</a></li>
  12.           <li><a target="_blank" href="https://www.cnblogs.com/">笔记本</a></li>
  13.           <li><a target="_blank" href="https://www.cnblogs.com/">家电</a></li>
  14.           <li><a target="_blank" href="https://www.cnblogs.com/">小米手机</a></li>
  15.       </ul>
  17.   </body>
  18. </html>
复制代码
3.3.7、float属性（重点）

活动模子（Flow），即文档流，浏览器打开HTML网页时，从上往下，从左往右，逐一加载。
在正常环境下，HTML元素都会根据文档流来分布网页内容的。
文档流有2大特征：
① 块状元素会随着浏览器读取文档的顺序，自上而下垂直分布，一行一个的情势占据页面位置。
② 行内元素会随着浏览器区队文档的顺序，从左往右水平分布，一行多个的情势占据页面位置。行内元素摆放满一行以后才会到下一行继续分列。
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.     <title></title>
  5.    
  6.   </head>
  7.   <body>
  8.     d1
  9.     d2
  10.    
  11.       span1
  12.       <a>a1</a>
  13.       <a>a2</a>
  14.       span2
  15.    
  16.   </body>
  17. </html>
复制代码
要学习浮动模子的结构模式，就要了解CSS提供的浮动属性（float）。浮动属性是网页结构中最常用的属性之一，通过浮动属性不但可以很好的实现页面结构，而且还可以依靠它来制作导航栏等页面功能。
简单浮动：
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.     <title>简单浮动</title>
  5.    
  6.   </head>
  7.   <body>
  9.    
  10.    
  11.    
  13.   </body>
  14. </html>
复制代码
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.     <title>字围效果</title>
  5.    
  6.   </head>
  7.   <body>
  9.    111
  10.    222
  11.    333>
  13.   </body>
  14. </html>
复制代码
案例：
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.     <title>字围案例</title>
  5.     <meta charset="utf8">
  6.    
  7.   </head>
  8.   <body>
  9.    
  10.            <img src="" alt="">
  11.            
  12.            
  13.    
  15.   </body>
  16. </html>
复制代码
当一个元素被设置浮动后，将具有以下特性：

网页结构中，最常用的结构便是浮动模子。但是浮动了以后就会破坏原有的文档流，使页面产生不必要的改动，以是我们一般在浮动了以后，到达目的了，就紧接着清除浮动。
在主流浏览器（如Firefox）下，如果没有设置height，元素的高度默认为auto，且其内容中有浮动元素时，在这种环境下元素的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）结构的环境，叫“浮动溢出”，为了防止这个现象的出现而进行的CSS处置惩罚操作，CSS内里叫“清除浮动”。
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.     <title></title>
  5.     <meta charset="utf8">
  6.    
  7.   </head>
  8.   <body>
  9.    
  10.         
  11.         
  12.    
  13.    
  15.   </body>
  16. </html>
复制代码

clear是css中专用于清除浮动的，常用的属性值有以下几个：
值描述left在左侧不允许浮动元素。right在右侧不允许浮动元素。both在左右两侧均不允许浮动元素。none默认值。允许浮动元素出现在两侧。
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.     <title>简单浮动</title>
  5.    
  6.   </head>
  7.   <body>
  9.    
  10.    
  11.    
  13.   </body>
  14. </html>
复制代码
清除浮动解决父级塌陷问题：
  1.   .clearfix:after {                         /*在类名为“clearfix”的元素内最后面加入内容*/
  2.             content: ".";                    /*内容为“.”就是一个英文的句号而已。也可以不写。*/
  3.             display: block;                  /*加入的这个元素转换为块级元素。*/
  4.             clear: both;                     /*清除左右两边浮动。*/
  5.             visibility: hidden;              /*可见度设为隐藏。注意它和display:none;是有区别的。*/
  6.                                               /* visibility:hidden;仍然占据空间，只是看不到而已；*/
  7.             line-height: 0;                  /*行高为0；*/
  8.             height: 0;                       /*高度为0；*/
  9.             font-size:0;                     /*字体大小为0；*/
  10.         }
  13. 整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
  14. 之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
复制代码
此外，还给父元素加上溢出隐蔽属性（overflow: hidden;）来进行清除浮动。
3.3.8、position属性

就像photoshop中的图层功能会把一整张图片分层一个个图层一样，网页结构中的每一个元素也可以当作是一个个类似图层的层模子。层结构模子就是把网页中的每一个元素当作是一层一层的，然后通过定位属性position对元素进行定位摆放，最终实现网页的结构。
定位属性position有4个值，分别是静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。默认就是static。以是我们略过。
元素设置了定位以后，还要依靠4个方位属性来进行定位摆放。
方位属性：
  1. /*
  2. top：让元素相对于指定目标的顶部偏移指定的距离。
  3.   例如： top：10px; 表示距离顶部10像素
  5. right：让元素相对于指定目标的右边偏移指定的距离。
  6.   例如： right：10px; 表示距离顶部10像素
  8. bottom：让元素相对于指定目标的底部偏移指定的距离。
  9.   例如： bottom：10px; 表示距离顶部10像素
  11. left：让元素相对于指定目标的左边偏移指定的距离。
  12.   例如： left：10px; 表示距离顶部10像素
  13. */
复制代码
相对定位就是在正常文档流中，元素相对于自身位置使用left、right、top、bottom属性进行定位偏移。
  1.       .c1{
  2.             width: 200px;
  3.             height: 200px;
  4.             background-color: indianred;
  6.         }
  8.         .c2{
  9.             width: 200px;
  10.             height: 200px;
  11.             background-color: orange;
  12.             position: relative;
  13.             left: 200px;
  14.             top: 200px;
  17.         }
  19.         .c3{
  20.             width: 200px;
  21.             height: 200px;
  22.             background-color: lightblue;
  25.         }
复制代码
绝对定位就是将元素脱离文档流，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位，如果不存在这样的父级元素，则默认是相对于body元素进行绝对定位。
轮播图案例：
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.         <meta charset="utf8">
  5.         
  6.   </head>
  7.   <body>
  10.   
  11.       <ul >
  12.           <li><a target="_blank" href="https://www.cnblogs.com/"><img src="https://www.cnblogs.com/imgs/1.jpg" alt=""></a></li>
  13.           <li><a target="_blank" href="https://www.cnblogs.com/"><img src="https://www.cnblogs.com/imgs/2.jpg" alt=""></a></li>
  14.           <li><a target="_blank" href="https://www.cnblogs.com/"><img src="https://www.cnblogs.com/imgs/3.jpg" alt=""></a></li>
  15.           <li><a target="_blank" href="https://www.cnblogs.com/"><img src="https://www.cnblogs.com/imgs/4.jpg" alt=""></a></li>
  16.           <li><a target="_blank" href="https://www.cnblogs.com/"><img src="https://www.cnblogs.com/imgs/5.jpg" alt=""></a></li>
  17.       </ul>
  18.       <ul >
  19.           <li > < </li>
  20.           <li > > </li>
  21.       </ul>
  22.   
  23.   </body>
  24. </html>
复制代码
固定定位与绝对定位有点相似，但是固定定位是使用left、right、top、bottom属性相对于整个浏览器的窗口进行定位，而不再相对于某个HTML页面元素了，以是当元素使用了固定定位以后，就算页面的滚动条滚动了，固定定位的元素也不会变化位置。也就是说固定定位是相对于窗口的定位，不受文档流的影响了。
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.       <meta charset="utf8">
  5.    
  6.   </head>
  7.   <body>
  9.    
  10.    返回顶部
  12.   </body>
  13. </html>
复制代码
4、总结

学习css选择器以及属性设置，尤其是盒子模子，浮动，定位等属性的掌握。

5、作业

小米官网页面设计
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.    
  7. </head>
  8. <body>
  11.    
  12.    
  14. </body>
  15. </html>                                   [url=https://www.cnblogs.com/]小米商城[/url]                 |                 [url=https://www.cnblogs.com/]MIUI[/url]                 |                 [url=https://www.cnblogs.com/]云服务[/url]                 |                 [url=https://www.cnblogs.com/]电视[/url]                 |                                           [url=https://www.cnblogs.com/]购物车(0)[/url]                                           [url=https://www.cnblogs.com/]登录[/url]                 |                 [url=https://www.cnblogs.com/]注册[/url]                 |                 [url=https://www.cnblogs.com/]消息通知[/url]<!DOCTYPE HTML>
  16. <html lang="en-US">
  17.   <head>
  18.     <title></title>
  19.     <meta charset="utf8">
  20.    
  21.   </head>
  22.   <body>
  23.    
  24.         
  25.         
  26.    
  27.    
  29.   </body>
  30. </html><!DOCTYPE HTML>
  31. <html lang="en-US">
  32.   <head>
  33.     <title></title>
  34.     <meta charset="utf8">
  35.    
  36.   </head>
  37.   <body>
  38.    
  39.         
  40.         
  41.    
  42.    
  44.   </body>
  45. </html>            
  46. [list]                    
  47. [*][url=https://www.cnblogs.com/]小米[/url]                    
  48. [*][url=https://www.cnblogs.com/]红米[/url]                    
  49. [*][url=https://www.cnblogs.com/]电视[/url]                    
  50. [*][url=https://www.cnblogs.com/]条记本[/url]                    
  51. [*][url=https://www.cnblogs.com/]服务[/url]               
  52. [/list]<!DOCTYPE HTML>
  53. <html lang="en-US">
  54.   <head>
  55.     <title></title>
  56.     <meta charset="utf8">
  57.    
  58.   </head>
  59.   <body>
  60.    
  61.         
  62.         
  63.    
  64.    
  66.   </body>
  67. </html><!DOCTYPE HTML>
  68. <html lang="en-US">
  69.   <head>
  70.     <title></title>
  71.     <meta charset="utf8">
  72.    
  73.   </head>
  74.   <body>
  75.    
  76.         
  77.         
  78.    
  79.    
  81.   </body>
  82. </html><!DOCTYPE HTML>
  83. <html lang="en-US">
  84.   <head>
  85.     <title></title>
  86.     <meta charset="utf8">
  87.    
  88.   </head>
  89.   <body>
  90.    
  91.         
  92.         
  93.    
  94.    
  96.   </body>
  97. </html><!DOCTYPE HTML>
  98. <html lang="en-US">
  99.   <head>
  100.     <title></title>
  101.     <meta charset="utf8">
  102.    
  103.   </head>
  104.   <body>
  105.    
  106.         
  107.         
  108.    
  109.    
  111.   </body>
  112. </html>                                 
  113. [list]                 
  114. [*]                 
  115. [*]                 
  116. [*]            
  117. [/list]            
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4