css笔记

时间 2019-11-11

标签 css 笔记栏目 CSS 繁體版

原文原文链接

一、CSS介绍
二、CSS内联样式、外部样式表
三、CSS的语法
四、块元素和内联元素
五、经常使用选择器
六、子元素和后代元素选择器
七、伪类选择器
八、伪元素
九、属性选择器
十、子元素的伪类
十一、兄弟元素选择器
十二、否认伪类
1三、样式的继承
1四、选择器的优先级
1五、a的伪类优先级顺序
1六、文本标签
1七、无序列表、有序列表和定义列表
1八、长度单位
1九、字体与字体分类
20、字体样式
2一、行高与行间距
2二、文本样式
2三、盒子模型
2四、垂直外边距的重叠
2五、浏览器的默认样式
2六、内联样式的盒模型
2七、display和visibility
2八、overflow溢出
2九、文档流
30、浮动-1
3一、浮动-2
3二、页面布局
3三、高度塌陷
3四、导航条
3五、解决高度塌陷问题的最终办法
3六、相对定位
3七、绝对定位
3八、固定定位
3九、层级
40、opacity透明度
4一、背景图片的属性css

一、CSS介绍

　　css层叠样式表（Cascading Style Sheet）html

　　css能够用来为网页建立样式表，经过样式表能够对网页进行修饰。html5

　　所谓层叠，能够将网页相像成是一层一层的结构，层次高的将会覆盖层次低的。浏览器

　　而css就能够分别为网页各个层次设置样式。布局

二、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             一、能够将css样式编写到head里的style标签中。
15             二、经过css选择器选中指定元素。
16         -->
17     </head>
18     <body>
19         <!--
20             说明：
21             一、能够将css样式编写到元素（标签）的style属性中。
22             二、将css样式直接编写到style属性中，这种样式咱们称为内联样式。
23             三、内联样式只对当前元素中的内容起做用，内联样式不方便复用。
24             四、内联样式属于结构与表现耦合，不方便后期维护，不推荐使用。
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             一、能够将css样式编写到head里的style标签中。
19             二、经过css选择器选中指定元素。
20             
21         -->
22         <!--
23             外部样式表
24             说明：
25             一、将样式表编写到外部css文件中，经过link标签来将外部的css文件引入到当前页面当中。
26         -->
27         <link rel="stylesheet" type="text/css" href="css/style.css" />
28     </head>
29     <body>
30         <!--
31             说明：
32             一、能够将css样式编写到元素（标签）的style属性中。
33             二、将css样式直接编写到style属性中，这种样式咱们称为内联样式。
34             三、内联样式只对当前元素中的内容起做用，内联样式不方便复用。
35             四、内联样式属于结构与表现耦合，不方便后期维护，不推荐使用。
36         -->
37         <!--
38         <p style="color: red;font-size: 20px;">春风又绿江南岸，明月什么时候照我还。</p>
39         -->
40         <p>乘风破浪会有时，直挂风帆济沧海。</p>
41     </body>
42 </html>

三、CSS的语法

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>css语法介绍</title>
 6         <style sype="text/css">
 7             /*
 8                 一、CSS的注释：
 9                 
10                     css的注释，做用和html注释相似，但css注释必须编写在style标签中，或者是css文件中。
11                 
12                 二、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>

四、块元素和内联元素

 1 <!DOCTPYE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>块和内联</title>
 6     </head>
 7     <body>
 8     <!--
 9         块元素和内联无素
10         
11         一、div就是一个块元素：
12             所谓块元素就是会独占一行的元素，不管它的内容多少，它都会独占一整行。
13             例如：div,p,h1,h2,h3...
14             
15             div标签没有任何意义，就是一个纯粹的块元素。而且不会为它里面的元素设置任何默认样式。
16             div元素主要用来对页面布局。
17             
18         二、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>

五、经常使用选择器

 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         一、元素选择器
25             做用：经过元素选择器能够选择页面中全部指定元素。
26             语法：标签名{}
27             例如：
28                 p{
29                     color: red;
30                     font-size: 14px;
31                 }
32         
33         二、ID选择器
34             做用：经过元素的id属性值，选中惟一的一个选择器。
35             语法：#id属性性{}
36             例如：
37                 #one{
38                     font-size: 20px;
39                 }
40                 
41                 <p id="one">春风又绿江南岸，明月什么时候照我还。</p>
42                 
43         三、类选择器
44             做用：能够经过元素的class属性值选中一组元素
45             语法：.class属性值{}
46             例如：
47                 .two{
48                     font-size: 25px;
49                 }
50         
51         四、选择器分组（并集选择器）
52             做用：经过选择器分组，能够选中多个选择器对应的元素。
53             语法：选择器1,选择器2,选择器N,{}
54             例如：
55                 p , #one , .two {
56                     background-color: yellow;
57                 }
58         
59         五、通配选择器
60             做用：它能够选中页面中的全部元素。
61             语法：*{}
62             例如：
63                 *{
64                     color: red;
65                 }
66                 
67         六、复合选择器（交集选择器）
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>

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

 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                         
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                 二、子元素选择器（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>

七、伪类选择器

 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                 有四个伪类可让你根据访问者与该连接的交互方式，
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             二、其余伪类
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>

八、伪元素

 1 <!Doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>伪元素</title>
 6     <style type="test/css">
 7         /*
 8             伪元素
 9             一、在指定元素以前：: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             二、在指定元素以后：:after
20             三、给段落定义样式
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>

九、属性选择器

 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         一、title属性（能够给任何标签指定）
20             做用：当鼠标移入到元素上时，title属性的值将会做为提示文字显示。
21             例如：
22                 <p title="李白诗句，《行路难-其一》">长风破浪会有时，直挂云帆济沧海！</p>
23         二、属性选择器
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>

十、子元素的伪类

 1 <!Doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>子元素的伪类</title>
 6     <style type="text/css">
 7         /*
 8         一、:first-child        – 选择第一个子标签      
 9             为第一个字元素是p的元素设置一个字体颜色，若是第一个元素不是p元素，则不会设置
10                 例如：    
11                     p:first-child{
12                         color: orange;
13                     }
14                     
15                     body > p:firstchild{
16                         color: red;
17                     }
18         二、:last-child         – 选择最后一个子标签         
19         三、: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         四、 :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>

十一、兄弟元素选择器

 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                     p + span{
13                         color: orange;
14                     }
15             二、选择后边的全部兄弟元素
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>

十二、否认伪类

 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>

1三、样式的继承

 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>

1四、选择器的优先级

 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>

1五、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>

1六、文本标签

 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>

1七、无序列表、有序列表和定义列表

 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             一、无序列表
17             二、有序列表
18             三、自定义列表
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>

1八、长度单位

 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%。

1九、字体与字体分类

 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             一、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              二、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              三、font-variant能够用来设置小型大写字母
37                  -可选值：
38                      normal，默认值，文字正常显示
39                      samll-caps，文字以小型大写字母显示
40              
41              四、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>

2一、行高与行间距

 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                     一、直接接收一个大小。例如line-height: 50px;
32                     二、能够指定一个百分数，则会相对于字体去计算百分比。
33                         例如line-height: 100%，则相对字体大小计算，
34                             行高跟字体大小相等，行间距则为0。
35                     三、能够直接填一个数值，则行高设置字体大小相应的倍数。
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>

2二、文本样式

2三、盒子模型

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

2四、垂直外边距的重叠

 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>

2五、浏览器的默认样式

 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>

2六、内联样式的盒模型

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

2七、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>

2八、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>

2九、文档流

 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                     一、块元素在文档流中会独占一行，块元素会自上向下排列。
16                     二、块元素在文档流中默认宽度是父元素的100%。
17                     
18                     当元素的高度或宽度的值为auto时，此时指定内边距不会影响可见框大小。
19                     而是会自动修改宽度或高度，以适应内边距。
20                     三、块元素在文档流中的高度默认被内容撑开。
21                         即若是不设置块元素的width和height，默认高度会根据其子元素的内容大小自动调整。
22                 内联元素
23                     一、内联元素在文档流中只占自身大小，默认从左向右排列。
24                         若是一行中容纳不下全部内联元素，则换到下一行，继续自左向右排列。
25                     二、在文档流中，内联元素的宽度和高度默认都被内容撑开。 
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>

3一、浮动-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>

3二、页面布局

 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>

3三、高度塌陷

 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                      将父元素高度写死，能够解决高度塌陷问题，但父元素的高度将不能
16                  自适应子元素的高度。不推荐使用此方法。
17                  
18                  二、开启元素BFC
19                      根据W3C标准，在页面中的元素都有一个隐含属性，叫作Block Formatting Context，
20                  简称BFC。该属性默认关闭。
21                      当开启BFC后，元素具备如下特色：
22                          a.父元素的外边距不会和子元素重叠。
23                          b.开启BFC的元素不会被浮动元素所覆盖。
24                          c.开启BFC的元素能够包含浮动的子元素。
25                      
26                      如何开启元素BFC:
27                       一、设置元素浮动
28                           -虽然能够撑开父元素，可是会致使父元素的宽度丢失。
29                               且会致使下边的元素上移，不能解决问题。
30                       二、设置元素绝对定位
31                       三、设置元素为Inline-block
32                           例如：display: inline-block;
33                           能够解决问题，可是会致使父元素宽度丢失，不推荐。
34                       四、将元素的overflow设置为一个非visible的值。
35                           推荐方式：将overflow设置为hidden是反作用最小的开启BFC方式。
36                           例如：overflow: hidden;
37                           
38                  三、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>

3四、导航条

 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>

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

  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>

3六、相对定位

 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             *        一、开启元素定位，不设置任何值时，元素不变。
21             *        二、相对定位，是相对于元素在文档流中原来位置的定位。
22             *        三、相对定位，元素不会脱离文档流。
23             *        四、相对定位，会使元素提高一个层级。
24             *        五、相对定位，不会改变元素的属性，块元素仍是块元素，内联元素仍是内联元素。
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>

3七、绝对定位

 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             *            通常状况，若是开启了子元素的绝对定位，同时也会开启父元素的相对定位。
13             *            若是全部的祖先元素没有开启定位，则会相对于浏览器窗口定位。
14             *        四、绝对定位，会使元素提高一个层级。
15             *        五、绝对定位，会改变元素属性。
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>

3八、固定定位

 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                     一、固定定位永远都会相对于浏览器窗口定位。
14                     二、固定空位会固定在浏览器窗口的某个位置不变，
15                         不会随着滚动条滚动。常见于页面广告。
16                     三、IE6不支持固定定位。    
17         -->
18     </body>
19 </html>

3九、层级

 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>

4一、背景图片的属性

 1 <!Doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>背景图片的定位与滚动</title>
 6         <style type="text/css">
 7             /*
 8             *    背景的几个常属性：
 9             *        一、background-color：设置背景颜色
10             *        二、background-image：设置背景图片
11             *        三、background-repeat：设置背景图片重复方式
12             *        四、background-position：设置背景图片的定位
13             *        五、background-attachment：设置背景图片是否随页面一块儿滚动
14             *
15             *    一、background-color：设置背景颜色
16             *
17             *    二、设置背景图片：
18             *            -语法：background-image: url(相对路径);
19             *            
20             *                -若是背景图片大于元素，默认会显示图片左上角。
21             *                -若是背景图片和元素同样大，则会显示所有背景图片。
22             *                -若是背景图片小于元素大小，则会将背景图片平铺，以充满元素。
23             *                    即复制多个背景图片，占满元素大小。
24             *                
25             *            能够同时为一个元素指定背景颜色和背景图片：
26             *                这样背景颜色将会做为背景图片底色，
27             *                通常状况下，设置背景图片的同时，也会设置背景颜色。
28             *
29             *    三、设置背景图片重复方式
30             *            -语法：background-repeat: no-repeat;
31             *                -可选值：
32             *                    repeat，默认值，背景图片会双方向重复（平铺）。
33             *                    no-repeat，背景图片不会重复，有多大显示多大。
34             *                    repeat-x，背景图片沿水平方向重复。
35             *                    repeat-y，背景图片沿垂直方向重复。
36             *            例如：background-repeat: repeat-y;
37             *
38             *    四、设置背景图片的定位
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             *    五、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>

1. CSS+JS笔记
2. html/css笔记
3. css笔记
4. CSS笔记
5. HTML5+CSS笔记
6. css 笔记
7. HTML/CSS 笔记
8. HTML、CSS笔记
9. CSS笔记1
10. html5+css笔记
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 使用阿里云OSS+CDN部署前端页面与加速静态资源

css笔记

目录：

一、CSS介绍

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

2.1 css样式表以内联样式

2.2 css样式表以外部样式表

三、CSS的语法

四、块元素和内联元素

五、经常使用选择器

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

七、伪类选择器

八、伪元素

九、属性选择器

十、子元素的伪类

十一、兄弟元素选择器

十二、否认伪类

1三、样式的继承

1四、选择器的优先级

1五、a的伪类优先级顺序

1六、文本标签

1七、无序列表、有序列表和定义列表

1八、长度单位

1九、字体与字体分类

20、字体样式

2一、行高与行间距

2二、文本样式

2三、盒子模型

2四、垂直外边距的重叠

2五、浏览器的默认样式

2六、内联样式的盒模型

2七、display和visibility

2八、overflow溢出

2九、文档流

30、浮动-1

3一、浮动-2

3二、页面布局

3三、高度塌陷

3四、导航条

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

3六、相对定位

3七、绝对定位

3八、固定定位

3九、层级

40、opacity透明度

4一、背景图片的属性

　　2.1 css样式表以内联样式

　　2.2 css样式表以外部样式表