时间戳

首页 > 技术文章 > css笔记

css笔记

catinsky 2018-06-13 13:59 原文

目录：

1、CSS介绍
2、CSS内联样式、外部样式表
3、CSS的语法
4、块元素和内联元素
5、常用选择器
6、子元素和后代元素选择器
7、伪类选择器
8、伪元素
9、属性选择器
10、子元素的伪类
11、兄弟元素选择器
12、否定伪类
13、样式的继承
14、选择器的优先级
15、a的伪类优先级顺序
16、文本标签
17、无序列表、有序列表和定义列表
18、长度单位
19、字体与字体分类
20、字体样式
21、行高与行间距
22、文本样式
23、盒子模型
24、垂直外边距的重叠
25、浏览器的默认样式
26、内联样式的盒模型
27、display和visibility
28、overflow溢出
29、文档流
30、浮动-1
31、浮动-2
32、页面布局
33、高度塌陷
34、导航条
35、解决高度塌陷问题的最终办法
36、相对定位
37、绝对定位
38、固定定位 
39、层级 
40、opacity透明度 
41、背景图片的属性

1、CSS介绍

　　css层叠样式表（Cascading Style Sheet）

　　css可以用来为网页创建样式表，通过样式表可以对网页进行修饰。

　　所谓层叠，可以将网页相像成是一层一层的结构，层次高的将会覆盖层次低的。

　　而css就可以分别为网页各个层次设置样式。

2、css内联样式、外部样式表

　　2.1 css样式表之内联样式

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>css样式介绍</title>
 6         <style type="text/css">
 7             p{
 8                 font-size: 20px;
 9                 color: green;
10             }
11         </style>
12         <!--
13             说明：
14             1、可以将css样式编写到head里的style标签中。
15             2、通过css选择器选中指定元素。
16         -->
17     </head>
18     <body>
19         <!--
20             说明：
21             1、可以将css样式编写到元素（标签）的style属性中。
22             2、将css样式直接编写到style属性中，这种样式我们称为内联样式。
23             3、内联样式只对当前元素中的内容起作用，内联样式不方便复用。
24             4、内联样式属于结构与表现耦合，不方便后期维护，不推荐使用。
25         -->
26         <!--
27         <p style="color: red;font-size: 20px;">春风又绿江南岸，明月何时照我还。</p>
28         -->
29         <p>乘风破浪会有时，直挂风帆济沧海。</p>
30     </body>
31 </html>

　　2.2 css样式表之外部样式表

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>css样式介绍</title>
 6         <!--
 7         <style type="text/css">
 8             p{
 9                 font-size: 20px;
10                 color: green;
11             }
12         </style>
13         -->
14         
15         <!--
16             内部样式表
17             说明：
18             1、可以将css样式编写到head里的style标签中。
19             2、通过css选择器选中指定元素。
20             
21         -->
22         <!--
23             外部样式表
24             说明：
25             1、将样式表编写到外部css文件中，通过link标签来将外部的css文件引入到当前页面当中。
26         -->
27         <link rel="stylesheet" type="text/css" href="css/style.css" />
28     </head>
29     <body>
30         <!--
31             说明：
32             1、可以将css样式编写到元素（标签）的style属性中。
33             2、将css样式直接编写到style属性中，这种样式我们称为内联样式。
34             3、内联样式只对当前元素中的内容起作用，内联样式不方便复用。
35             4、内联样式属于结构与表现耦合，不方便后期维护，不推荐使用。
36         -->
37         <!--
38         <p style="color: red;font-size: 20px;">春风又绿江南岸，明月何时照我还。</p>
39         -->
40         <p>乘风破浪会有时，直挂风帆济沧海。</p>
41     </body>
42 </html>

 3、CSS的语法

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>css语法介绍</title>
 6         <style sype="text/css">
 7             /*
 8                 1、CSS的注释：
 9                 
10                     css的注释，作用和html注释类似，但css注释必须编写在style标签中，或者是css文件中。
11                 
12                 2、CSS的语法：
13                 
14                     选择器 声明块
15                 
16                     a、选择器：
17                         通过选择器可以选中页面中的指定元素。
18                         并将声明块中的样式应用到选择器对应的元素上。
19                     
20                     b、声明块：
21                         声明块紧跟在选择器后边，使用一对{}括起来。
22                         声明块中实际上是一组一组的名值对结构。
23                         这一组一组的名值对，我们称为声明。
24                         在一个声明块中，可以写多个声明，多个声明之间用;号隔开。
25                         声明的样式和样式值使用:来连接。
26             */
27         
28             p{
29                 color:red;
30                 font-size:20px;
31             }
32         </style>
33     </head>
34     <body>
35         <p>css的语法</p>
36     </body>
37 
38 </html>

 4、块元素和内联元素

 1 <!DOCTPYE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>块和内联</title>
 6     </head>
 7     <body>
 8     <!--
 9         块元素和内联无素
10         
11         1、div就是一个块元素：
12             所谓块元素就是会独占一行的元素，无论它的内容多少，它都会独占一整行。
13             例如：div,p,h1,h2,h3...
14             
15             div标签没有任何意义，就是一个纯粹的块元素。并且不会为它里面的元素设置任何默认样式。
16             div元素主要用来对页面布局。
17             
18         2、span是一个内联元素（行内元素）
19             行内元素，指的是只占自身大小，不会独占一行。
20             例如：a,img,iframe,span等
21             
22             span没有任何语义，span标签专门用来选中文字，然后来为文字设置样式。
23         
24         说明：
25             块元素主要用来做页面布局，内联元素主要用来选中文本设置样式。
26             一般情况下，可以使用块元素去包含内联元素，而不会使用内联元素去包含块元素。
27             a元素可以包含任何元素，除了它本身。
28             p元素不可以包含任何其他的块元素。    
29     -->
30     <div><p><span>元素的包含</span></p></div>
31     </body>
32 </html>

 5、常用选择器

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>常用选择器</title>
 6         <style type="text/css">
 7             p{
 8                 color: green;
 9                 font-size: 14px;
10             }
11             #one{
12                 font-size: 20px;
13             }
14             .two{
15                 font-size: 25px;
16             }
17             #one , .two {
18                 background-color: yellow;
19             }
20         </style>
21     </head>
22     <body>
23     <!--
24         1、元素选择器
25             作用：通过元素选择器可以选择页面中所有指定元素。
26             语法：标签名{}
27             例如：
28                 p{
29                     color: red;
30                     font-size: 14px;
31                 }
32         
33         2、ID选择器
34             作用：通过元素的id属性值，选中唯一的一个选择器。
35             语法：#id属性性{}
36             例如：
37                 #one{
38                     font-size: 20px;
39                 }
40                 
41                 <p id="one">春风又绿江南岸，明月何时照我还。</p>
42                 
43         3、类选择器
44             作用：可以通过元素的class属性值选中一组元素
45             语法：.class属性值{}
46             例如：
47                 .two{
48                     font-size: 25px;
49                 }
50         
51         4、选择器分组（并集选择器）
52             作用：通过选择器分组，可以选中多个选择器对应的元素。
53             语法：选择器1,选择器2,选择器N,{}
54             例如：
55                 p , #one , .two {
56                     background-color: yellow;
57                 }
58         
59         5、通配选择器
60             作用：它可以选中页面中的所有元素。
61             语法：*{}
62             例如：
63                 *{
64                     color: red;
65                 }
66                 
67         6、复合选择器（交集选择器）
68             作用：可以选中同时满足多个选择器的元素
69             语法：选择器1选择器2选择器N{}
70             例如：
71                 p.two#one{
72                     background-color: yellow;
73                 }
74             id选择器不推荐使用交集选择器，因为id选择器本来就有唯一性。
75     -->
76         <p>春风又绿江南岸，明月何时照我还。</p>
77         <p id="one">春风又绿江南岸，明月何时照我还。</p>
78         <!--
79             我们可以为元素设置class属性，class属性和id类似，只不过class属性可以重复。
80             拥有相同class属性的元素，我们说它们是一组元素。
81             可以同时为一个元素设置多个class属性值，多个值之间用空格隔开。
82         -->
83         <p class="two">春风又绿江南岸，明月何时照我还。</p>
84         <p>春风又绿江南岸，明月何时照我还。</p>
85         <p>春风又绿江南岸，明月何时照我还。</p>
86     </body>
87 </html>

 6、子元素和后代元素选择器

 1 <!Doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>子元素和后代元素选择器</title>
 6         <style type="text/css"> 
 7             /*
 8                 1、后代选择器
 9                     后代选择器可以根据标签的关系，为处在元素内部的代元素设置样式。
10                     语法：
11                         祖先元素 后代元素 后代元素 { }
12                         
13                     例如：
14                     a、选中id为d1里的p元素里的span元素：
15                     #d1 p span{
16                         background-color: yellow;
17                     }
18                     b、选中id为d1里的span元素：
19                     #d1 span {
20                         color: red
21                     } 
22                 2、子元素选择器（IE6及以下浏览器不支持子元素选择器）
23                     子元素选择器可以给另一个元素的子元素设置样式。
24                     语法：
25                         父元素 > 子元素{}
26                     例如：比如body > h1将选择body子标签中的所有h1标签
27                     div > span {
28                         color: blue;
29                     }
30             */
31                 p > span {
32                         color: blue;
33                     }
34 
35             
36         </style>
37     </head>
38 <body>
39     <!--
40         祖先元素：直接或间接包含后代元素的元素。
41         后代元素：直接或间接被祖先元素包的元素。
42         父元素：直接包含子元素的元素。
43         子元素：直接被父元素包含的元素。
44         兄弟元素：拥有相同父元素的元素。
45     -->
46     <div id="d1">
47         <p><span>春风又绿江南岸</span></p>
48         <span>明月何时照我返</span>
49     </div>
50     <span>长风破浪会有时</span>
51     <div><span>直挂云帆济沧海</span></div>
52 </body>
53 </html>

 7、伪类选择器

 1 <!Doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>伪类选择器</title>
 6     <style type="text/css">
 7         /*
 8             1、常用伪类
 9                 伪类专门用来表示元素的一种特殊状态。
10                 比如：访问过的链接，普通链接，获取焦点的文本框。
11                 
12                 有四个伪类可以让你根据访问者与该链接的交互方式，
13                 将链接设置成4种不同的状态。
14                 
15                 a、正常链接：    a:link
16                 b、访问过的链接：    a:visited（只能定义字体颜色）
17                 c、鼠标划过的链接：a:hover
18                 d、正在点击的链接：a:active
19                 
20                 注意：
21                     :hovoer和:active也可以为其他元素设置。
22                     但IE6中不支持对超链接以外的元素设置hover和active伪类。
23             2、其他伪类
24                 a、获取聚焦        ::focus        
25                     例如：给input设置一个焦点
26                     input:focus{
27                         background-color: greenyellow;
28                     }
29                     
30                 b、选中的元素    ::selection（火狐中::-moz-selection）
31                     例如：选中文字时，背景为橘色
32                         //兼容大部分浏览器
33                         p::selection{
34                             background-color: orange;
35                         }
36                         //兼容火狐浏览器
37                         p::-moz-selection{
38                             background-color: orange;
39                         }                                    
40         */
41         a:link{
42             color: none;
43         }
44         
45         a:visited{
46         }
47         
48         a:hover{
49             color: red;
50             background-color: yellow;
51         }
52         
53         a:active{
54             color: black;
55         }
56         
57         p span:hover {
58             color: red;
59         }
60         
61         p span:active{
62             color: green;
63         }
64         
65         input:focus{
66             background-color: greenyellow;
67         }
68         
69         p::selection{
70             background-color: orange;
71         }
72         
73         p::-moz-selection{
74             background-color: orange;
75         }    
76     </style>
77 </head>
78 <body>
79     <div><a href="http://www.baidu.com">第一个超链接</a></div><br /><br />
80     <div><a href="http://fdsfasf.com">第二个超链接</a></div>
81     <p><span>不是超链接</span></p><br />
82     <input type="text">
83     <p>文字选中的伪类设置</p>
84 </body>
85 </html>

8、伪元素

 1 <!Doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>伪元素</title>
 6     <style type="test/css">
 7         /*
 8             伪元素
 9             1、在指定元素之前：:before
10                 :before表示在元素最前边部分。
11                 一般before结合content这个样式一起使用，
12                 通过content可以向before或after的位置添加一些内容。
13                 例如：
14                         p:before{
15                             content: "我会出现在整个段落的最前边";
16                             color: red;
17                             background-color: yellow;
18                         }
19             2、在指定元素之后：:after
20             3、给段落定义样式
21                 a、首字母 – :first-letter
22                 b、首行 – :first-line
23         */
24         
25         p:before{
26             content: "我会出现在整个段落的最前边";
27             color: red;
28         }
29         p:after{
30             content: "我会出现在整个段落的最后边";
31             color: orange;
32             background-color: greenyellow;
33         }
34     </style>
35 </head>
36 <body>
37     <h3>《行路难·其一》</h3>
38     <p>金樽清酒斗十千，玉盘珍羞直万钱。<br />
39     停杯投箸不能食，拔剑四顾心茫然。<br />
40     欲渡黄河冰塞川，将登太行雪满山。<br />
41     闲来垂钓碧溪上，忽复乘舟梦日边。<br />
42     行路难！行路难！多歧路，今安在？<br />
43     长风破浪会有时，直挂云帆济沧海。</p>
44 
45 </body>
46 </html>

 9、属性选择器

 1 <!Doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>属性选择器</title>
 6     <style type="text/css">
 7         span[class]{
 8             background-color: yellow;
 9         }
10         
11         p[title="hello"]{
12             color: red;
13             font-size: 18px;
14         }
15     </style>
16 </head>
17 <body>
18     <!-- 
19         1、title属性（可以给任何标签指定）
20             作用：当鼠标移入到元素上时，title属性的值将会作为提示文字显示。
21             例如：
22                 <p title="李白诗句，《行路难-其一》">长风破浪会有时，直挂云帆济沧海！</p>
23         2、属性选择器
24             作用：可以根据元素中的属性或属性值来选取指定元素。
25             语法：
26                 [属性名]    选取含有指定属性的元素。
27                 [属性名="属性值"]    选取指定属性值的元素。
28                 [属性名^="属性值"]    选取属性值以指定内容开头的元素。
29                     例如：title^="ab"    选取以ab开头的属性值的元素。
30                 [属性名$="属性值"]    选取属性值以指定内容结尾的元素。
31                 [属性名*="属性值"]    选取属性值以包含指定内容的元素。    
32                     
33             例如1，为含有title属性的p元素设置一个背景颜色：
34                 p[title]{
35                     background-color: orange;
36                 }
37             例如2，为title属性值为"hello"的p元素指定一个字体颜色和大小：
38                 p[title="hello"]{
39                     color: red;
40                     font-size: 14px;
41                 }
42     -->
43     <div title="李白诗句，《行路难-其一》"><span class="t1">金樽清酒斗十千，玉盘珍羞值万钱。</span><br />
44     <p>停杯投箸不能食，拨剑四顾心茫然。</p></div>
45     <p title="hello">欲渡黄河冰塞川，将登太行雪满山。</p>
46 </body>
47 </html>

10、子元素的伪类

 1 <!Doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>子元素的伪类</title>
 6     <style type="text/css">
 7         /*
 8         1、:first-child        – 选择第一个子标签      
 9             为第一个字元素是p的元素设置一个字体颜色，如果第一个元素不是p元素，则不会设置
10                 例如：    
11                     p:first-child{
12                         color: orange;
13                     }
14                     
15                     body > p:firstchild{
16                         color: red;
17                     }
18         2、:last-child         – 选择最后一个子标签         
19         3、:nth-child         – 选择指定位置的子元素（任意位置的子元素） 
20             :nth-child(3) 选中第三个元素
21             :nth-child(enev) 表示偶数位置的子元素
22             :nth-child(odd)     表示奇数位置的子元素
23                 例如：
24                     span:nth-child(2){
25                         background-color: orange;
26                     }
27                         
28         4、 :first-of-type 
29             :last-of-type 
30             :nth-of-type 
31             – 选择指定类型的子元素
32                 和first-child等类似，
33                 只不过child，是在所有的子元素中排列。
34                 而type，是在当前类型的子元素中排列。
35         */
36         
37         body > p:first-child{
38             color: red;
39         }
40         
41         /*为第五个元素为span的设置一个背景颜色:
42             条件1，必须得是第五个元素，不管元素类型。
43             条件2，第5个标签必须得是span
44         */
45         span:nth-child(5){
46             background-color: orange;
47         }
48     </style>
49 </head>
50 <body>
51     <p>我是第一个p标签</p>
52     <p>我是第二个p标签</p>
53     <p>我是第三个p标签</p>
54     <p>我是第四个p标签</p>
55     <span>我是span元素</span>
56     <p>我是第五个p标签</p>
57     <div>
58         <p>我是div的第一个子元素</p>
59     </div>
60 </body>
61 </html>

 11、兄弟元素选择器

 1 <!Doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>兄弟元素选择器</title>
 6     <style type="text/css">
 7         /*
 8             1、后一个兄弟元素选择器
 9                 作用：可以选中一个元素后紧挨着的指定兄弟元素。
10                 语法：前一个 + 后一个
11                 例如：
12                     p + span{
13                         color: orange;
14                     }
15             2、选择后边的所有兄弟元素
16                 语法：前一个 ~ 后一个
17                 例如：
18                     p ~ span{
19                         color:red;
20                     }
21         */
22         p + span{
23             color: orange;
24         }
25         
26         span ~ p{
27             color:red;
28         }
29     </style>
30 </head>
31 <body>
32     <p>我是第一个p标签</p>
33     <p>我是第二个p标签</p>
34     <p>我是第三个p标签</p>
35     <p>我是第四个p标签</p>
36     <span>我是span元素</span>
37     <p>我是第五个p标签</p>
38     <p>我是第五个p标签</
39 </body>
40 </html>

 12、否定伪类

 1 <!Doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>否定伪类</title>
 6     <style type="text/css">
 7         /*
 8             为所有p元素设置字体颜色为orange，除了class值为hello的。
 9             否定伪类：
10                 作用：从已选中的元素中剔除某些元素。
11                 语法：
12                     :not(选择器)
13         */
14         .hello{
15             color: red;
16         }
17         p:not(.hello){
18             color: orange;
19         }
20     </style>
21 </head>
22 <body>
23     <p>我是第一个p标签</p>
24     <p>我是第二个p标签</p>
25     <p>我是第三个p标签</p>
26     <p class="hello">我是第四个p标签</p>
27     <p>我是第五个p标签</p>
28     <p>我是第五个p标签</p>
29 </body>
30 </html>

 13、样式的继承

 1 <!Doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>样式的继承</title>
 6     <style type="text/css">
 7         /*
 8         .one{
 9             font-size: 16px;
10             color: red;
11             background-color: yellow;
12         }
13         */
14     </style>
15 </head>
16 <body>
17     <!-- 
18         样式的继承
19             在css中，祖先元素的样式，也会被它的后代元素所继承。
20             但并不是所有样式都会被子元素继承，比如：背景、边框、定位相关的样式。
21             但是在测试时，背景颜色被继承了。暂不去理解。
22     -->
23     <!-- <div class="one"> -->
24     <div style="font-size: 20px; color: red; background-color: yellow" >
25         <p>
26             我是p标签中的文字<br />
27             <span>我是span中的文字</span>
28         </p>
29         我是p外面的文字
30     </div>
31 </body>
32 </html>

 14、选择器的优先级

 1 <!Doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>选择器优先级</title>
 6     <style type="text/css">
 7         /*
 8         *    当使用不同选择器，选中同一个元素，并设置相同的样式时，
 9         *    此时，样式之间产生冲突，由选择器的优先级(权重)决定，
10         *    优先级高的优先显示。
11         *    优先级规则：
12         *        内联样式优先级：   1000
13         *        ID选择器优先级：   100
14         *        类和伪类优先级：   10
15         *        元素选择器优先级： 1
16         *        通配*选择器优先级：0
17         *        继承的样式，没有优先级
18         *    当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较。
19         *    选择器优先级计算不会超过他最大的数量级，如果选择器的优先级一样，
20         *    则选择靠后的样式。
21         *    
22         *    并集选择器的优先级是单独计算
23         *    div , p , #p1 , .hello{}
24         *
25         *    可以在样式的最后，添加一个!important，此时该样式将会获得最高优先级，
26         *    但在开发中，尽量避免使用!important。
27         */
28     
29         .d1{
30             background-color: yellow;
31         }
32         
33         p{
34             background-color: red;
35         }
36         
37         #d2{
38             background-color: greenyellow;
39         }
40         
41     </style>
42 </head>
43 <body>
44     <p class="d1" id="d2">春风又绿江南岸，明月何时照我还。</p>
45 </body>
46 </html>

15、a的伪类优先级顺序

 1 <!Doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>伪类的优先级</title>
 6     <style type="text/css">
 7         /*
 8         *    涉及到a的伪类一共有以下四下：
 9         *        :link
10         *        :visited
11         *        :hover
12         *        :active
13         *    而这四个选择器的优先级是一样的。
14         *    鼠标滑入:hover要放在:active前面。因为鼠标滑入和正在点击可能会同时进行。
15         *    写a的伪类时，要注意顺序，不可打乱顺序。
16         */
17     </style>
18 </head>
19 <body>
20 </body>
21 </html>

16、文本标签

 1 <em>和<strong> 
 2 • em标签用于表示一段内容中的着重点。 
 3 • strong标签用于表示一个内容的重要性。 
 4 • 这两个标签可以单独使用，也可以一起使 用。
 5 • 通常em显示为斜体，而strong显示为粗体。
 6 <p> <strong>警告：任何情况下不要接近僵尸。</strong> 他们只是 <em>看起来</em> 很友好，实际上他们是为了吃你的胳膊！ </p>
 7 
 8 <i>和<b> 
 9 • i标签会使文字变成斜体。 
10 • b标签会使文字变成粗体。 
11 • 这两个标签和em和strong类似，但是这两 个标签没有语义。 
12 • 所以根据html5标准，当我们只想设置文本 特殊显示，而不需要强调内容时就可以使 用i和b标签。
13 
14 <small> 
15 • small标签表示细则一类的旁注，通常包括 免责声明、注意事项、法律限制、版权信 息等。 
16 • 浏览器在显示small标签时会显示一个比父 元素小的字号。
17 <p><small>&copy;2016 尚硅谷. 保留所有权利.</small></p>
18 
19 <cite> 
20 • 使用cite标签可以指明对某内容的引用或参 考。例如，戏剧、文章或图书的标题，歌 曲、电影、照片或雕塑的名称等。 
21 <p> <cite>《七龙珠》</cite>讲的是召唤神龙的故事。 </p>
22 
23 <blockquote>和<q> 
24 • blockquote和q表示标记引用的文本。 
25 • blockquote用于长引用，q用于短引用。 
26 • 在两个标签中还可以使用cite属性来表示引 用的地址。 
27 孟子曾经说过： <blockquote>天将降大任于是人也...</blockquote> 他说的真对啊！
28 <p>孔子曾经说过：<q>学而时习之不亦说乎</q></p>
29 
30 <sup>和<sub> 
31 • sup和sub用于定义上标和下标。 • 上标主要用于表示类似于103中的3。 
32 • 下标则用于表示类似余H2O中的2。
33 
34 <ins>和<del> 
35 • ins表示插入的内容，显示时通常会加上下 划线。 
36 • del表示删除的内容，显示时通常会加上删 除线。
37 
38 <code>和<pre> 
39 • 如果你的内容包含代码示例或文件名，就 可以使用code元素。 
40 • pre元素表示的是预格式化文本，可以使用 pre包住code来表示一段代码。 
41 <pre> <code> function fun(){ alert("hello"); } </code> </pre>

 17、无序列表、有序列表和定义列表

 1 <!Doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>无序列表和有序列表</title>
 6     <style type="text/css">
 7         /*清除无序列表默认项目符号*/
 8         ul{
 9             list-style: none;
10         }
11     </style>
12 </head>
13 <body>
14     <!--
15         列表的三种类型：
16             1、无序列表
17             2、有序列表
18             3、自定义列表
19         
20                     无序列表
21                         -使用ul标签来创建一个无序列表
22                         -使用li来创建一个列表项
23                     
24                     通过type属性可以修改无序列表的项目符号
25                         可选值：
26                             disc，默认值，实心圆点
27                             square，实心方块
28                             circle，空心圆点
29                     例如：
30                         <ul type="circle">
31                             <li>春风又绿江南岸</li>
32                         </ul>
33                     注意：默认项目符号一般不使用，因为不同浏览器，项目符号解析出来的效果大小不同。
34                         如果需要设置项目符号，则可以采用为li设置背景图片方式来设置。
35                     
36                     ul和li都是块元素。
37     -->    
38     <ul type="circle">
39         <li>春风又绿江南岸</li>
40         <li>明月何时照我还</li>
41     </ul>
42     
43     <!--
44             有序列表
45                 -有序列表和无序列表类似，只不过有序列表使用ol来代替ul。
46                 -有序列表使用有序的序号来代替项目符号。
47             
48             通过type属性可以修改有序列表的序号类型：
49                 可选值：
50                     1，默认值，使用阿拉伯数字
51                     a/A，采用小写或者大写字母
52                     i/I，采用小写或者大写阿拉伯数字
53     -->
54     <ol>
55         <li>春风又绿江南岸</li>
56         <li>明月何时照我还</li>
57     </ol>
58     <!--
59         列表之间可以互相嵌套，可以在无序列表中放个有序列表。
60             也可以在有序列表中放无序列表。
61     -->
62     
63     <!--
64             自定义列表
65                 -定义列表用来对一些词汇或内容进行定义
66                 -使用dl来创建定义列表
67                     dl中有两个子标签
68                         dt：被定义的内容
69                         dd：对定义的内容描述
70             dl,ul,ol之间都可以互相嵌套。
71     -->
72 </body>
73 </html>

 18、长度单位

 1 单位 
 2 
 3 • px – 如果我们将一个图片放大的话，我们会发现一个图片 
 4 是有一个一个的小色块构成的，这一个小色块就是一 个像素，
 5 也就是1px，对于不同的显示器来说一个像素 的大小是不同的。 
 6 
 7 • 百分比 – 也可以使用一个百分数来表示一个大小，百分比是
 8 相对于父元素来说的，如果父元素使用的大小是16px， 则
 9 100%就是16px，200%就是32px。
10 
11 • em – em和百分比类似，也是相对于父元素说的，
12 1em就相 当于100%，2em相当于200%，1.5em相当于150%。

 19、字体与字体分类

 1 <!Doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5      <title>字体</title>
 6     <style type="text/css">
 7     /*
 8         设置字体颜色，使用color设置
 9         
10         设置文字的大小，浏览器中，一般默认的字体大小为16px;
11         font-size设置的并不是文字本身的大小，
12             在页面中，每个文字都处在看不见的框内，我们
13         设置的font-size实际上是设置格的高度，并不是字体的大小，
14         一般情况下字体都要比格子小些，也有时会比格子大，根据字体
15         的不同，显示效果也不同。
16 
17         设置文字的字体使用font-family.
18         当采用某种字体时，如果浏览器支持，则使用该字体。
19         如果字体不支持，则使用默认字体。
20         该样式可以指定多个字体，多个字体之间使用,号分开。
21         当采用多个字体时，浏览器会优先使用前面的字体，如
22         果没有，再采用下一个字体。
23         例如：
24         font-family: 微软雅黑，arial;
25         
26         浏览器中使用的字体，默认是计算机中的字体，
27         如果计算机中有，则使用，如果没有就不使用。        
28     */
29         .ziti{
30             font-family: arial, 微软雅黑, 华文彩云, serif;
31             color: red;
32             font-size: 20px;
33         }    
34     </style>
35 </head>    
36 <body>
37     <!--
38         在网页中将字体分为五大类：            
39         字体分类：
40         serif（衬线字体）
41         sans-serif（非衬线字体）
42         monospace（等宽字体）
43         cursive（草书字体）
44         fantasy（虚幻字体）
45         
46         以上的分类都是一些大的分类，并没有涉及具体的类型，如果将字体
47         指定为这些格式，浏览器会自己选择指定类型的字体。
48     -->
49 
50     <p class="ziti">春风又绿江南岸，明月何时照我还！</p>
51 </body>
52 </html>

 20、字体样式

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>字体样式</title>
 6         <style type="text/css">
 7             /*
 8             1、font-style可以用来设置文字的斜体
 9                 -可选值:
10                     normal,默认值,文字正常显示
11                     italic,文字会以斜体显示
12                     oblique,文字会以倾斜效果显示
13                 -大部分浏览器都不会斜体和倾斜做区分.
14                     也就是italic和oblique的效果往往是一样的.
15                 -一般只会使用italic.
16             例如：    
17                 p{
18                     font-style:italic;
19                 }
20         
21              2、font-weight可以用来设置文本的加粗效果
22                  -可选值：
23                      normal，默认值，文字正常显示
24                      bold，文字加粗显示
25              例如：
26                  p{
27                      font-weitht: bold;
28                  }
29                  该样式还可以指定100-900之间9个值，但是用户计算机往往
30                  没有这么字体，所以想要达到效果也会不同。
31              例如：
32                  p{
33                      font-weight: 900;
34                  }
35              
36              3、font-variant可以用来设置小型大写字母
37                  -可选值：
38                      normal，默认值，文字正常显示
39                      samll-caps，文字以小型大写字母显示
40              
41              4、font设置字体相关的所有样式
42              
43              .d1{
44                  设置一个文字大小
45                  font-size: 50px;
46                  设置一个字体
47                  font-family: "微软雅黑";
48                  设置文字倾斜
49                  font-style: italic;
50                  设置文字加粗效果
51                  font-weight: bold;
52                  设置小型大写字母
53                  font-variant: small-caps;
54              }
55              
56              一次性设置全部样式:
57              .d2{
58                  font: italic small-caps bold 50px "微软雅黑";
59              }
60              
61              注意:
62                  在使用font设置字体样式时,统一写在font样式中,不同的值之间使用空格隔开.
63                  斜体/加粗/大小字母,没有顺序要求,甚至可以不写,如果不写,则使用默认值.
64                  但是文字大小和字体必须写,而且顺序不能错,字体必须是最后一个样式,文字大小
65                  必须是倒数第二个.    
66                  
67                  简写属性会有个比较好的性能，浏览器只用解析一次。         
68              */
69             p{
70                 font: italic small-caps bold 50px "华文彩云";
71             }
72             
73         </style>
74     </head>
75     <body>
76         <p>春风又绿江南岸，明月何时照我还！</p>
77     </body>
78 </html>

 21、行高与行间距

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>行高</title>
 6         <style type="text/css">
 7             p{
 8                 font: 50px "华文彩云";
 9             }
10             
11             .box{
12                 width: 200px;
13                 height: 200px;
14                 background-color: greenyellow;
15                 line-height: 200px;
16             }
17         </style>
18     </head>
19     <body>
20         <!--
21             在CSS中没有直接提供设置行间距的方式。
22             只能通过设置行高，来间接设置行间距，行高越大，行间距越大。
23             使用line-height来设置行高。
24             行高类似于上小学时的单线本，单线本是一行一行的，线与线之间的距离就是行高。
25             网页的文字实际上是写在一个看不见的线中，而文字默认会在行高中垂直显示。
26             
27             行间距 = 行高 - 字体大小
28             
29             通过line-height设置行高：
30                 可以接收的值：
31                     1、直接接收一个大小。例如line-height: 50px;
32                     2、可以指定一个百分数，则会相对于字体去计算百分比。
33                         例如line-height: 100%，则相对字体大小计算，
34                             行高跟字体大小相等，行间距则为0。
35                     3、可以直接填一个数值，则行高设置字体大小相应的倍数。
36                         例如line-height: 1;则高为字体大小，行间距为0;
37         
38             对于单行文本来说，可以将行高设置为和父元素的高度一致，
39             这样单行文本会在父元素的中间显示。
40             例如：
41             .box{
42                 width: 200px;
43                 height: 200px;
44                 background-color: green;
45                 line-height: 200px;
46             }
47             
48             在font中也可以指定行高。
49             例如：
50                 font: 30px/50px "微软雅黑";
51             指的是字体大小30px，行高50，行间距则为20px。
52             
53         -->    
54         
55         <div class="box"><a href="http://www.baidu.com">我是一个超链接</a></div>
56         <p>春风又绿江南岸，明月何时照我还！</p>
57     </body>
58 </html>

 22、文本样式

 

23、盒子模型

 1 <!DOCTPYE html>
 2 <html>
 3     <head>
 4         <meta="utf-8" />
 5         <title>盒子模型</title>
 6     </head>
 7 <body>
 8     <!--
 9         盒子：
10             1、CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。
11             2、如果把所有元素相像成盒子，那么我们对页面的布局就相当于排放盒子。
12             3、我们只用把相应的盒子排放到网页中相应的位置，即可完成页面布局。
13         盒子模型：
14             一个盒子我们会分成以下几个部分：
15                 -内容区（content）
16                 -内边距（padding）
17                 -边框（border）
18                 -外边距（margin）
19         a、内容区（content）
20             1、内容区指的是盒子放置内容的区域，也就是元素中的文本内容。
21             2、如果没有为元素设置内边距和边框，则内容区的大小默认和盒子的大小是一致的。
22             3、通过width和height两个属性设置内容区的大小。
23             4、width和height只适用于块元素。
24         b、内边距（padding）
25             1、内边框指内容区与边框以内的空间。
26             2、默认情况下width和height不包含padding的大小。
27             3、使用padding属性来设置元素的内边距。
28             例如：
29                 1) padding: 10px 20px 30px 40px; – 这样会设置元素的上、右、下、左四个方向的内边距。
30                 2) padding: 10px 20px 30px; – 分别指定上、左右、下四个方向的内边距。
31                 3) padding:10px 20px; – 分别指定上下、左右四个方向的内边距。
32                 4) padding:10px; – 同时指定上左右下四个方向的内边距。
33             4、同时在css中还提供了padding-top、padding-right、paddingright、padding-bottom
34                 分别用来指定四个方向的内边距。
35         c、边框（border）
36             1、可以在元素周围创建边框，边框是元素可见框的最外部。 
37             2、可以使用border属性来设置盒子的边框： 
38                 – border:1px red solid; 
39                 – 上边的样式分别指定了边框的宽度、颜色和样式。 
40             3、也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。 
41             4、和padding一样，默认width和height并包括边框的宽度。
42         d、边框的样式 
43             1、边框可以设置多种样式： 
44                 – none（没有边框） 
45                 – dotted（点线） 
46                 – dashed（虚线） 
47                 – solid（实线） 
48                 – double（双线） 
49                 – groove（槽线） 
50                 – ridge（脊线） 
51                 – inset（凹边） 
52                 – outset（凸边）
53         e、外边距（margin）
54             1、外边距是元素边框与周围元素相距的空间。 
55             2、使用margin属性可以设置外边距。 
56             3、用法和padding类似，同样也提供了四个方向的 margin-top/right/bottom/left。 
57             4、当将左右外边距设置为auto时，浏览器会将左右外 边距设置为相等，
58                 所以这行代码margin:0 auto可 以使元素居中。
59     -->
60 </body>
61 </html>

24、垂直外边距的重叠

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>垂直外边距的重叠</title>
 6         <style>
 7             /*
 8                  -在网页中，相邻的,垂直方向的，外边距会发生外边距的重叠。
 9                      外边距的重叠，指的是兄弟元素之间，相邻外边距会取最大值，而不是取和。
10                      如果是父子元素的垂直外边距相邻，则子元素的外边距会设置给父元素。
11                  
12                      当不需要外边距重叠时，可以给元素设置内边距，外边距，边框等，让元素之
13                      间不相邻，则可以解决外边距重叠问题。
14              * */
15             .box1{
16                 width: 100px;
17                 height: 100px;
18                 margin-bottom: 100px;
19                 background-color: yellowgreen;
20             }
21             
22             .box2{
23                 width: 100px;
24                 height: 100px;
25                 margin-top: 100px;
26                 background-color: darkred;
27             }
28         </style>
29     </head>
30     <body>
31         <div class="box1"></div>
32         <div class="box2"></div>
33     </body>
34 </html>

25、浏览器的默认样式

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>浏览器的默认样式</title>
 6     <style type="text/css">
 7         /*
 8              浏览器为了在页面中没有样式时，也有个比较好的显示效果，
 9              所以为很多元素设置了默认的padding和margin。
10              而这些样式，很多情况下我们是不需要的。
11              
12              所以我们往往在编写样式中，需要将浏览器的默认样式清除，即清除margin和padding。
13              
14              清除浏览器的默认样式：
15              *{
16              *     padding: 0px;
17              *     margin: 0px;
18              * }
19          * */
20         *{
21             padding: 0px;
22             margin: 0px;
23         }
24         
25         .box{
26             width: 100px;
27             height: 100px;
28             background-color: greenyellow;
29         }
30     </style>
31 </head>
32 <body>
33     <div class="box"></div>
34     <p>春风又绿江南岸，明月何时照我还！</p>
35 </body>
36 </html>

 26、内联样式的盒模型

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>内联元素的盒模型</title>
 6         <style type="text/css">
 7             /*
 8                  1、内联元素不能设置宽高，即width和height。
 9                  例如：width: 100px; height: 100px;
10                  
11                  2、内联元素可以设置水平方向的内边距。
12                  例如：padding-left: 100px;padding-right: 100px;
13                  
14                  3、内联元素可以设置垂直方向内边距，但是不会影响页面布局。
15                  即，如果设置太大，会把其他元素掩盖。
16                  例如: padding-top: 100px; padding-bootom: 100px;
17                  
18                  4、内联元素可以设置边框。
19                      但是垂直方向的边框不会影响到页面布局，而左右方向的会影响。
20                      比如：给span设置100px边框，上下会覆盖其他元素，左右元素会自动过去。
21                      
22                  5、内联元素可以设置水平外边距
23                      例如：margin-left: 100px;margin-right: 100px;
24                      
25                  6、内联元素不支持垂直方向外边距
26                      设置后，没有效果。
27                      
28                  
29              */
30         </style>
31     </head>
32     <body>
33     </body>
34 </html>

27、display和visibility

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>display和visibility</title>
 6     <style>
 7         /*
 8              将一个内联元素变成块元素，
 9                  -通过display样式可以修改元素的类型，
10                  -可选值：
11                      inline:可以将一个元素作为内联元素显示
12                      block:可以将一个元素作为块元素显示
13                      inline-block:将一个元素转换为块元素
14                          可以使一个元素即有行内元素的特点又有块元素的特点
15                          既可以设置宽高，又不会独占一行。
16                      none:不显示元素，并且元素不会在页面中继续占有位置
17                          例如：display: none;将会隐藏元素。
18              
19              visibility
20                  -可以用来设置元素的隐藏和显示状态
21                  -可选值：
22                      visible:默认值，元素默认会在页面显示
23                      hidden:元素会隐藏不显示
24                  例如：visibility: hidden;将会隐藏元素。但它的位置会依然保持，继续占有位置。
25              
26              visibility: hidden和display: none的不同之处就是：
27                  display隐藏元素，但是不会继续占有位置。而visibility会继续占有位置。            
28          * */
29     </style>
30 </head>
31 <body>
32     
33 </body>
34 </html>

 28、overflow溢出

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>overflow</title>
 6 </head>
 7 <body>
 8     <!--
 9         子元素默认存在于父元素的内容区中，
10             理论上子元素的最大值可以等于父元素的内容区的大小。
11             如果子元素超过了父元素的内容区，则超过部分会在父元素以外显示。
12             超出父元素的内容，我们称为内容的溢出。
13         
14         父元素默认是将溢出内容，在父元素外边显示，
15             通过overflow可以设置父元素如何处理溢出内容。
16             -可选值：
17                 -visible，默认值，不会对溢出内容做处理。溢出部分会在父元素外边显示。
18                 -hidden，溢出的内容会被修剪，不会显示。
19                 -scroll，会为父元素添加滚动条，通过拖动滚动条来查看完整内容。
20                     -该属性不管内容是否溢出，都会添加水平和垂直方向的滚动条。
21                 -auto，会根据需求，自动添加滚动条。
22                     需要水平就自动添加水平，需要垂直就自动添加垂直，不需要就不会加。
23                 例如：overflow: auto;
24     -->
25 </body>
26 </html>

 29、文档流

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>文档流</title>
 6     </head>
 7     <body>
 8         <!--
 9             文档流
10                 文档流处在网页的最低层，它表示的是一个页面中的位置。
11                 我们所创建的元素，默认都处在文档流中。
12                 
13             元素在文档流中的特点
14                 块元素
15                     1、块元素在文档流中会独占一行，块元素会自上向下排列。
16                     2、块元素在文档流中默认宽度是父元素的100%。
17                     
18                     当元素的高度或宽度的值为auto时，此时指定内边距不会影响可见框大小。
19                     而是会自动修改宽度或高度，以适应内边距。
20                     3、块元素在文档流中的高度默认被内容撑开。
21                         即如果不设置块元素的width和height，默认高度会根据其子元素的内容大小自动调整。
22                 内联元素
23                     1、内联元素在文档流中只占自身大小，默认从左向右排列。
24                         如果一行中容纳不下所有内联元素，则换到下一行，继续自左向右排列。
25                     2、在文档流中，内联元素的宽度和高度默认都被内容撑开。 
26         -->
27     </body>
28 </html>

 30、浮动-1

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>浮动-1</title>
 6         <style type="text/css">
 7             .box1{
 8                 width: 100px;
 9                 height: 100px;
10                 background-color: yellowgreen;
11             }
12             
13             .box2{
14                 width: 100px;
15                 height: 100px;
16                 background-color: red;
17             }
18             
19             .box3{
20                 width: 100px;
21                 height: 100px;
22                 background-color: green;
23             }
24             
25             /*
26                  块元素在文档流中默认垂直排列，所以三个div从上往下依次排列，
27                  如果希望元素水平排列，则需要将元素脱离文档流。
28                  使用float来使元素浮动，脱离文档流。
29                      -可选值：
30                          none，默认值，元素默认在文档流中排列。
31                          left，元素会立即脱离文档流，向页面的左侧浮动。
32                          right，元素会立即脱离文档流，向页面的右侧浮动。
33                      
34                      当元素设置float后（float属性值非none），
35                      元素会脱离文档流，它下边的元素会立即向上移动 。
36                      元素浮动以后，元素会向页面的左上或者右上漂浮，
37                      直到遇到父元素的边框，或者其他的浮动元素。
38                      
39                      如果浮动元素上边上一个没有浮动的块元素，则浮动元素不会超过块元素。
40                      浮动元素不会超过他上边的兄弟元素，最多最多一边齐。
41              * */
42         </style>
43     </head>
44         <div class="box1"></div>
45         <div class="box2"></div>
46         <div class="box3"></div>
47     <body>
48     </body>
49 </html>

 31、浮动-2

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>浮动-2</title>
 6     </head>
 7     <body>
 8         <!--
 9             在文档流中，子元素的宽度默认占父元素的全部
10             当元素设置浮动后，会完全脱离文档流，
11             块元素脱离文档流后，高度和宽度默认被内容撑开。
12             （前提是块元素不设置宽高，默认）
13             
14             内联元素脱离文档流后，会变成块元素，此时可以设置宽度和高度。
15             例如，给span设置宽高，在文档流中，span只会占用自身大小，当
16             设置浮动后，span设置的宽高就会生效，变生块元素。
17             
18             浮动的元素，不会盖住文字，文字会自动环绕在元素的周围。
19             所以我们可以通过浮动来设置文字环绕图片的效果。
20         -->
21     </body>
22 </html>

 32、页面布局

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>页面布局</title>
 6         <style type="text/css">
 7             .box1{
 8                 width: 800px;
 9                 height: 50px;
10                 background-color: royalblue;
11                 margin: auto;
12             }
13             
14             .box2{
15                 width: 800px;
16                 height: 480px;
17                 background-color: orange;
18                 margin: 10px auto;
19             }
20             
21             .box3{
22                 width: 800px;
23                 height: 50px;
24                 background-color: darkgoldenrod;
25                 margin: auto;
26             }
27             
28             .box2a{
29                 width: 145px;
30                 height: 95%;
31                 float: left;
32                 margin: 10px 0px 10px 5px;
33                 background-color: palegreen;
34             }
35             
36             .box2b{
37                 width: 480px;
38                 height: 460px;
39                 float: left;
40                 background-color: yellowgreen;
41                 margin: 10px;
42             }
43             
44             .box2c{
45                 width: 145px;
46                 height: 460px;
47                 margin: 10px 5px 10px 0px;
48                 float: left;
49                 background-color: pink;
50             }
51             
52         </style>
53     </head>
54     <body>
55         <div class="box1"></div>
56         <div class="box2">
57             <div class="box2a"></div>
58             <div class="box2b"></div>
59             <div class="box2c"></div>
60         </div>
61         <div class="box3"></div>
62     </body>
63 </html>

33、高度塌陷

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>高度塌陷</title>
 6     </head>
 7     <body>
 8         <!--
 9             在文档流中，父元素不设置高度时，父元素的高度默认是被子元素撑开的。
10                 当子元素设置浮动后，父元素内没有子元素，此时，父元素将会没有高度，
11                 因为父元素内没有子元素，无法撑开父元素的高度，导致父元素高度塌陷。
12                 
13             解决高度塌陷问题：
14                  1、给父元素设置高度。
15                      将父元素高度写死，可以解决高度塌陷问题，但父元素的高度将不能
16                  自适应子元素的高度。不推荐使用此方法。
17                  
18                  2、开启元素BFC
19                      根据W3C标准，在页面中的元素都有一个隐含属性，叫做Block Formatting Context，
20                  简称BFC。该属性默认关闭。
21                      当开启BFC后，元素具有以下特点：
22                          a.父元素的外边距不会和子元素重叠。
23                          b.开启BFC的元素不会被浮动元素所覆盖。
24                          c.开启BFC的元素可以包含浮动的子元素。
25                      
26                      如何开启元素BFC:
27                       1、设置元素浮动
28                           -虽然可以撑开父元素，但是会导致父元素的宽度丢失。
29                               且会导致下边的元素上移，不能解决问题。
30                       2、设置元素绝对定位
31                       3、设置元素为Inline-block
32                           例如：display: inline-block;
33                           可以解决问题，但是会导致父元素宽度丢失，不推荐。
34                       4、将元素的overflow设置为一个非visible的值。
35                           推荐方式：将overflow设置为hidden是副作用最小的开启BFC方式。
36                           例如：overflow: hidden;
37                           
38                  3、IE6及以下浏览器不支持BFC
39                          当给元素设置overflow: hidden开启BFC后，解决了高度塌陷问题，但是
40                      在IE6及以下浏览器不支持此种方式。
41                          但IE6中有个类似BFC属性，叫做hasLayout，可以通过开启hasLayout来解决高
42                      度塌陷问题。开启方式副作用最小的方式是：
43                          直接将元素的zoom值设置为1即可：
44                      例如：zoom: 1;
45                          zoom表示放大的意思，后边跟数值，写几就表示放大几倍。
46                          zoom: 1;表示不放大元素，通过该样式即可开启hasLayout。
47                          zoom只在IE中支持，其他浏览器都不支持。
48                      
49                      overflow: hidden;
50                      zoom: 1;  即可解决全部浏览器兼容问题。
51                      
52      
53         -->
54     </body>
55 </html>

34、导航条

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>导航条</title>
 6         <style type="text/css">
 7             /*去除项目符号*/
 8             *{
 9                 margin: 0;
10                 padding: 0;
11             }
12             .nav{
13                 list-style: none;
14                 width: 800px;
15                 background-color: blue;
16                 overflow: hidden;
17                 margin: 50px auto;
18             }
19             
20             .nav li{
21                 width: 25%;
22                 float: left;
23             }
24             
25             .nav a{
26                 display: block;
27                 width: 100%;
28                 color: white;
29                 padding: 10px;
30                 text-align: center;
31                 text-decoration: none;
32                 font-weight: bold;
33             }
34             
35             a:hover{
36                 background-color: brown;
37             }
38         </style>
39     </head>
40     <body>
41         <ul class="nav">
42             <li><a href="#">首页</a></li>
43             <li><a href="#">新闻</a></li>
44             <li><a href="#">联系</a></li>
45             <li><a href="#">关于</a></li>
46         </ul>
47     </body>
48 </html>

35、解决高度塌陷问题的最终办法

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>解决高度塌陷问题</title>
  6         <style type="text/css">
  7             .box1{
  8                 width: 100px;
  9                 height: 100px;
 10                 background-color: yellow;
 11             }
 12             
 13             .box2{
 14                 width: 200px;
 15                 height: 200px;
 16                 background-color: green;
 17             }
 18             
 19             .box3{
 20                 width: 300px;
 21                 height: 300px;
 22                 background-color: goldenrod;
 23             }
 24             
 25             /*
 26                  由于受到Box1的浮动影响，box2和box3会整体向上移动。
 27                  如果希望其他元素设置浮动时，不影响当前元素，此时需要
 28                  清除其他元素设置浮动时，对元素产生的影响，可以使用clear来清除影响。
 29                      可选值：
 30                          clear: none; 默认值，不清除浮动。
 31                          clear: left; 清除左侧元素对当前元素的影响
 32                          clear: right; 清除右侧元素对当前元素的影响
 33                          clear: both; 清除两侧元素对当前元素的影响
 34                              其实是，清除两侧元素，对其影响最大的那个。
 35                              
 36                  解决高度塌陷方法二：
 37                      可以直接在高度塌陷父元素最后，添加一个空白div.
 38                      由于这个div没有浮动，是可以撑开父元素的。
 39                      此时，对这个div设置清除浮动影响，即可解决高度塌陷问题。
 40                  例如：
 41                      .clear{
 42                          clear: both;
 43                      }
 44                      .box5{
 45                          background-color: yellow;
 46                      }
 47                      
 48                      .box6{
 49                          width: 200px;
 50                          height: 200px;
 51                          background-color: red;
 52                          float: left;
 53                      }
 54                      
 55                      .box7{
 56                          clear: both;
 57                      }
 58                      <div class="box5">
 59                          <div class="box6"></div>
 60                          <div class="box7"></div>
 61                      </div>    
 62                      
 63                  解决高度塌陷问题三：
 64                      通过after伪类，选中box1的后边。
 65                      
 66                      可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
 67                      这样做和添加一个div的原理一样，可以达到相同的效果。
 68                      
 69                      在IE6中不支持after伪类，
 70                          所以在IE6中还需要使用hasLayout来处理。
 71                      .clearfix{
 72                          zoom: 1;
 73                      }
 74                      .clearfix:after{
 75                          添加一个空内容
 76                          content: "";
 77                          转换为块元素
 78                          display: block;
 79                          清除两侧浮动
 80                          clear: both;
 81                      }    
 82              
 83              * */
 84             .clear{
 85                          clear: both;
 86                      }
 87                      .box5{
 88                          background-color: yellow;
 89                      }
 90                      
 91                      .box6{
 92                          width: 200px;
 93                          height: 200px;
 94                          background-color: red;
 95                          float: left;
 96                      }
 97                      
 98                      .box7{
 99                          clear: both;
100                      }
101         </style>
102     </head>
103     <body>
104         <div class="box1"></div>
105         <div class="box2"></div>
106         <div class="box3"></div>
107         <hr />
108         <div class="box5">
109         <div class="box6"></div>
110         <div class="box7"></div>
111         </div>    
112     </body>
113 </html>

 36、相对定位

 1 <!Doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>相对定位</title>
 6         <style type="text/css">
 7             /*
 8             *    定位：
 9             *        -定位指的是将指定元素，摆放到页面的任意位置。
10             *    -通过position属性来设置元素的定位。
11             *        可选值：
12             *            static：默认值，元素没有开启定位。    
13             *            relative：开启元素的相对定位。
14             *            absolute：开启元素的绝对定位。
15             *            fixed：开启元素的固定定位（也是绝对定位的一种）。
16             *        当元素的position属性值设置为relative，则开启了元素的相对定位。
17             *        例如：position: relative;
18             *    
19             *    元素开启相对定位后的特点：
20             *        1、开启元素定位，不设置任何值时，元素不变。
21             *        2、相对定位，是相对于元素在文档流中原来位置的定位。
22             *        3、相对定位，元素不会脱离文档流。
23             *        4、相对定位，会使元素提升一个层级。
24             *        5、相对定位，不会改变元素的属性，块元素还是块元素，内联元素还是内联元素。
25             *
26             *
27             *    当开启元素定位时（position属性值是一个非static值时），
28             *    可以通过left,right,top,bottom来设置元素的偏移量。
29             *        left: 元素相对于其定位位置的左侧偏移量。（元素向右偏移）    
30             *        right: 元素相对于其定位位置的右侧偏移量。（元素向左偏移）
31             *        top: 元素相对于其定位位置的上方偏移量。（元素向下偏移）
32             *        bottom:    元素相对于其定位位置的下方偏移量。（元素向上偏移）
33             */
34             
35             .box1{
36                 width: 100px;
37                 height: 100px;
38                 background-color: yellow;
39                 position: relative;
40                 left: 200px;
41                 top: 200px;
42             }
43             
44             .box2{
45                 width: 100px;
46                 height: 100px;
47                 background-color: greenyellow;
48                 position: relative;
49                 left: 100px;
50                 top: 100px;
51             }
52             
53             .box3{
54                 width: 100px;
55                 height: 100px;
56                 background-color: red;
57             }
58         </style>
59     </head>
60     <body>
61         <div class="box1"></div>
62         <div class="box2"></div>
63         <div class="box3"></div>
64     </body>
65 </html>

 37、绝对定位

 1 <!Doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>绝对定位</title>
 6         <style type="text/css">
 7             /*
 8             *    绝对定位：
 9             *        1、开启绝对定位，会使元素脱离文档流。
10             *        2、开启绝对定位后，如果不设置偏移量，则元素不会变化。
11             *        3、绝对定位是相对于离它最近的祖先元素定位的。
12             *            一般情况，如果开启了子元素的绝对定位，同时也会开启父元素的相对定位。
13             *            如果所有的祖先元素没有开启定位，则会相对于浏览器窗口定位。
14             *        4、绝对定位，会使元素提升一个层级。
15             *        5、绝对定位，会改变元素属性。
16             *                内联元素变成块元素。
17             *                块元素的宽度和高度默认被内容撑开。
18             *
19             *        例如：.box2{
20             *                    width: 150px;
21             *                    height: 150px;
22             *                    background-color: greenyellow;
23             *                    position: absolute;
24             *                    left: 200px;
25             *                    top: 0px;
26             *                }
27             *
28             */
29             
30             .box1{
31                 width: 100px;
32                 height: 100px;
33                 background-color: yellow;
34             }
35             
36             .box2{
37                 width: 150px;
38                 height: 150px;
39                 background-color: greenyellow;
40                 position: absolute;
41                 left: 200px;
42                 top: 0px;
43             }
44             
45             .box3{
46                 width: 200px;
47                 height: 200px;
48                 background-color: orange;
49             }
50             
51             .box4{
52                 width: 200px;
53                 height: 200px;
54                 background-color: orange;
55                 position: relative;
56             }
57             
58             .box5{
59                 width: 100px;
60                 height: 100px;
61                 background-color: blue;
62                 position: absolute;
63                 left: 50px;
64                 top: 50px;
65             }
66             
67         </style>
68     </head>
69     <body>
70         <div class="box1"></div>
71         <div class="box2"></div>
72         <div class="box3"></div>
73         <hr>
74         <div class="box4">
75             <div class="box5"></div>
76         </div>
77     </body>
78 </html>

 38、固定定位

 1 <!Doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>固定定位</title>
 6     </head>
 7     <body>
 8         <!--
 9             固定定位：
10                 position: fixed;设置固定定位。
11                 固定定位也是绝对定位的一种，它的大部分特点跟绝对定位一样。
12                 不同点是：
13                     1、固定定位永远都会相对于浏览器窗口定位。
14                     2、固定空位会固定在浏览器窗口的某个位置不变，
15                         不会随着滚动条滚动。常见于页面广告。
16                     3、IE6不支持固定定位。    
17         -->
18     </body>
19 </html>

 39、层级

 1 <!Doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>层级</title>
 6     </head>
 7     <body>
 8         <!--
 9             层级：
10                 当元素设置绝对或固定定位后，元素脱离文档流，层次提升。
11                 
12                 如果两个元素都开启了定位，此时层级相同，此时，结构下边的元素会盖住上边的元素。
13                 
14                 通过z-index属性可以设置层级，层级越高，越优先显示。
15                 对于没有开启定位的元素，不能使用z-index.
16                 例如：z-index: 10;
17         -->
18     </body>
19 </html>

 40、opacity透明度

 1 <!Doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>opacity</title>
 6         <style>
 7             .box1{
 8                 width: 200px;
 9                 height: 200px;
10                 background-color: yellow;
11                 opacity: 0.5;
12                 filter: alpha(opacity=50);
13             }
14         </style>
15     </head>
16     <body>
17         <!--
18             设置元素透明背景
19             
20             opacity用来设置元素背景透明
21             opacity值在0-1之间：
22                 0表示完全透明
23                 0.5表示50%透明
24                 1表示完全不透明
25             例如：
26                 opacity: 0.6;
27                 
28             IE8及以下的浏览器不支持opacity属性。
29             IE8及以下的浏览器使用以下属性代替：
30                 alpha(opacity=透明度);
31                 透明度取值0-100.
32                 0表示完全透明
33                 50表示50%透明
34                 100表示完全不透明
35             例如：filter: alpha(opacity=60);
36             
37             兼容IE8及以下：
38                 .box1{
39                     width: 100px;
40                     height: 100px;
41                     background-color: yellow;
42                     opacity: 0.7;
43                     filter: alpha(opacity=70);
44                 }
45         -->
46         <div class="box1"></div>
47     </body>
48 </html>

 41、背景图片的属性

 1 <!Doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>背景图片的定位与滚动</title>
 6         <style type="text/css">
 7             /*
 8             *    背景的几个常属性：
 9             *        1、background-color：设置背景颜色
10             *        2、background-image：设置背景图片
11             *        3、background-repeat：设置背景图片重复方式
12             *        4、background-position：设置背景图片的定位
13             *        5、background-attachment：设置背景图片是否随页面一起滚动
14             *
15             *    1、background-color：设置背景颜色
16             *
17             *    2、设置背景图片：
18             *            -语法：background-image: url(相对路径);
19             *            
20             *                -如果背景图片大于元素，默认会显示图片左上角。
21             *                -如果背景图片和元素一样大，则会显示全部背景图片。
22             *                -如果背景图片小于元素大小，则会将背景图片平铺，以充满元素。
23             *                    即复制多个背景图片，占满元素大小。
24             *                
25             *            可以同时为一个元素指定背景颜色和背景图片：
26             *                这样背景颜色将会作为背景图片底色，
27             *                一般情况下，设置背景图片的同时，也会设置背景颜色。
28             *
29             *    3、设置背景图片重复方式
30             *            -语法：background-repeat: no-repeat;
31             *                -可选值：
32             *                    repeat，默认值，背景图片会双方向重复（平铺）。
33             *                    no-repeat，背景图片不会重复，有多大显示多大。
34             *                    repeat-x，背景图片沿水平方向重复。
35             *                    repeat-y，背景图片沿垂直方向重复。
36             *            例如：background-repeat: repeat-y;
37             *
38             *    4、设置背景图片的定位
39             *        背景图片默认是贴着元素的左上角显示
40             *         通过background-position可以调整背景图片在元素中的位置
41             *         可选值：
42             *             该属性可以使用 top right left bottom center中的两个值
43             *                 来指定一个背景图片的位置
44             *                 top left 左上
45             *                 bottom right 右下
46             *                 如果只给出一个值，则第二个值默认是center
47             *             例如：background-position: left center;
48             *             
49             *            也可以直接指定两个偏移量，
50             *             第一个值是水平偏移量
51             *                 - 如果指定的是一个正值，则图片会向右移动指定的像素
52             *                 - 如果指定的是一个负值，则图片会向左移动指定的像素
53             *             第二个是垂直偏移量    
54             *                 - 如果指定的是一个正值，则图片会向下移动指定的像素
55             *                 - 如果指定的是一个负值，则图片会向上移动指定的像素
56             *             例如：/*background-position: -80px -40px;*/
57             *
58             *    5、background-attachment：设置背景图片是否随页面一起滚动
59             *        background-attachment用来设置背景图片是否随页面一起滚动
60             *             可选值：
61             *                 scroll，默认值，背景图片随着窗口滚动
62             *                 fixed，背景图片会固定在某一位置，不随页面滚动
63             * 
64             *         不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素。
65             *            例如：background-attachment:fixed ;
66             *
67             *        当背景图片的background-attachment设置为fixed时，
68             *         背景图片的定位永远相对于浏览器的窗口。
69             */
70         </style>
71     </head>
72     <body>
73     </body>
74 </html>

 

推荐阅读