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>