文本主要内容
- 标準文檔流
- 标準文檔流的特性
- 行内元素和塊級元素
- 行内元素和塊級元素的互相轉換
- 浮動的性質
- 浮動的清除
- 浏覽器的相容性問題
- 浮動中margin相關
- 關于margin的IE6相容問題
标準文檔流
标準文檔流的特性
（1）空白折疊現象：
無論多少個空格、換行、tab，都會折疊為一個空格。
（2）高矮不齊，底邊對齊：
（3）自動換行，一行寫不滿，換行寫。
行内元素和塊級元素
學習的初期，我們就要知道，标準文檔流等級森嚴。标簽分為兩種等級：
- 行内元素
- 塊級元素
我們可以舉一個例子，看看塊級元素和行内元素的差別：
上圖中可以看到，
h1
标簽是塊級元素，占據了整行，
span
标簽是行内元素，隻占據内容這一部分。
現在我們嘗試給兩個标簽設定寬高。效果如下：
上圖中，我們嘗試給兩個标簽設定寬高，但發現，寬高屬性隻對塊級元素
h1
生效。于是我們可以做出如下總結。
行内元素和塊級元素的差別：（非常重要）
行内元素：
- 與其他行内元素并排；
- 不能設定寬、高。預設的寬度，就是文字的寬度。
塊級元素：
- 霸占一行，不能與其他任何元素并列；
- 能接受寬、高。如果不設定寬度，那麼寬度将預設變為父親的100%。
行内元素和塊級元素的分類：
在以前的HTML知識中，我們已經将标簽分過類，當時分為了：文本級、容器級。
從HTML的角度來講，标簽分為：
- 文本級标簽：p、span、a、b、i、u、em。
- 容器級标簽：div、h系列、li、dt、dd。
PS：為甚麼說p是文本級标簽呢？因為p裡面隻能放文字&圖檔&表單元素，p裡面不能放h和ul，p裡面也不能放p。
現在，從CSS的角度講，CSS的分類和上面的很像，就p不一樣：
- 行内元素：除了p之外，所有的文本級标簽，都是行内元素。p是個文本級，但是是個塊級元素。
- 塊級元素：所有的容器級标簽都是塊級元素，還有p标簽。
我們把上面的分類畫一個圖，即可一目了然：
行内元素和塊級元素的互相轉換
我們可以通過
display
屬性将塊級元素和行内元素進行互相轉換。display即“顯示模式”。
塊級元素可以轉換為行内元素：
一旦，給一個塊級元素（比如div）設定：
display: inline; 複制
那麼，這個标簽将立即變為行内元素，此時它和一個span無異。inline就是“行内”。也就是說：
- 此時這個div不能設定寬度、高度；
- 此時這個div可以和别人并排了。
舉例如下：
行内元素轉換為塊級元素：
同樣的道理，一旦給一個行内元素（比如span）設定：
display: block; 複制
那麼，這個标簽将立即變為塊級元素，此時它和一個div無異。block”是“塊”的意思。也就是說：
- 此時這個span能夠設定寬度、高度
- 此時這個span必須霸占一行了，别人無法和他并排
- 如果不設定寬度，将撐滿父親
舉例如下：
标準流裡面的限制非常多，導緻很多頁面效果無法實作。如果我們現在就要并排、并且就要設定寬高，那該怎麼辦呢？辦法是：移民！脫離标準流！
css中一共有三種手段，使一個元素脫離标準文檔流：
- （1）浮動
- （2）絕對定位
- （3）固定定位
浮動的性質
浮動是css裡面布局用的最多的屬性。
現在有兩個div，分别設定寬高。我們知道，它們的效果如下：
此時，如果給這兩個div增加一個浮動屬性，比如
float: left;
，效果如下：
這就達到了浮動的效果。此時，兩個元素并排了，并且兩個元素都能夠設定寬度、高度了（這在上一段的标準流中，不能實作）。
浮動想學好，一定要知道三個性質。接下來講一講。
性質1：浮動的元素脫标
脫标即脫離标準流。我們來看幾個例子。
證明1：
證明2：
上圖中，span标簽在标準流中，是不能設定寬高的（因為是行内元素）。但是，一旦設定為浮動之後，即使不轉成塊級元素，也能夠設定寬高了。
是以能夠證明一件事：一旦一個元素浮動了，那麼，将能夠并排了，并且能夠設定寬高了。無論它原來是個div還是個span。所有标簽，浮動之後，已經不區分行内、塊級了。
性質2：浮動的元素互相貼靠
我們給三個div均設定了
float: left;
屬性之後，然後設定寬高。當改變浏覽器視窗大小時，可以看到div的貼靠效果：
同樣，float還有一個屬性值是
right
，這個和屬性值
left
是對稱的。
性質3：浮動的元素有“字圍”效果
來看一張圖就明白了。我們讓div浮動，p不浮動。
上圖中，我們發現：div擋住了p，但不會擋住p中的文字，形成“字圍”效果。
總結：标準流中的文字不會被浮動的盒子遮擋住。（文字就像水一樣）
關于浮動我們要強調一點，浮動這個東西，為避免混亂，我們在初期一定要遵循一個原則：永遠不是一個東西單獨浮動，浮動都是一起浮動，要浮動，大家都浮動。
性質4：收縮
收縮：一個浮動的元素，如果沒有設定width，那麼将自動收縮為内容的寬度（這點非常像行内元素）。
iv本身是塊級元素，如果不設定width，它會單獨霸占整行；但是，設定div浮動後，它會收縮
浮動的補充（做網站時注意）
上圖所示，将para1和para2設定為浮動，它們是div的兒子。此時para1+para2的寬度小于div的寬度。效果如上圖所示。可如果設定para1+para2的寬度大于div的寬度，我們會發現，para2掉下來了：
布置一個作業
布置一個作業，要求實作下面的效果：
為實作上方效果，代碼如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .header{
12 width: 970px;
13 height: 103px;
14 /*居中。這個語句的意思是：居中：*/
15 margin: 0 auto;
16 }
17 .header .logo{
18 float: left;
19 width: 277px;
20 height: 103px;
21 background-color: red;
22 }
23 .header .language{
24 float: right;
25 width: 137px;
26 height: 49px;
27 background-color: green;
28 margin-bottom: 8px;
29 }
30 .header .nav{
31 float: right;
32 width: 679px;
33 height: 46px;
34 background-color: green;
35 }
36
37 .content{
38 width: 970px;
39 height: 435px;
40 /*居中，這個語句今天沒講，你照抄，就是居中：*/
41 margin: 0 auto;
42 margin-top: 10px;
43 }
44 .content .banner{
45 float: left;
46 width: 310px;
47 height: 435px;
48 background-color: gold;
49 margin-right: 10px;
50 }
51 .content .rightPart{
52 float: left;
53 width: 650px;
54 height: 435px;
55 }
56 .content .rightPart .main{
57 width: 650px;
58 height: 400px;
59 margin-bottom: 10px;
60 }
61 .content .rightPart .links{
62 width: 650px;
63 height: 25px;
64 background-color: blue;
65 }
66 .content .rightPart .main .news{
67 float: left;
68 width: 450px;
69 height: 400px;
70 }
71 .content .rightPart .main .hotpic{
72 float: left;
73 width: 190px;
74 height: 400px;
75 background-color: purple;
76 margin-left: 10px;
77 }
78 .content .rightPart .main .news .news1{
79 width: 450px;
80 height: 240px;
81 background-color: skyblue;
82 margin-bottom: 10px;
83 }
84 .content .rightPart .main .news .news2{
85 width: 450px;
86 height: 110px;
87 background-color: skyblue;
88 margin-bottom: 10px;
89 }
90 .content .rightPart .main .news .news3{
91 width: 450px;
92 height: 30px;
93 background-color: skyblue;
94 }
95 .footer{
96 width: 970px;
97 height: 35px;
98 background-color: pink;
99 /*沒學，就是居中：*/
100 margin: 0 auto;
101 margin-top: 10px;
102 }
103 </style>
104 </head>
105 <body>
106 <!-- 頭部 -->
107 <div class="header">
108 <div class="logo">logo</div>
109 <div class="language">語言選擇</div>
110 <div class="nav">導覽列</div>
111 </div>
112
113 <!-- 主要内容 -->
114 <div class="content">
115 <div class="banner">大廣告</div>
116 <div class="rightPart">
117 <div class="main">
118 <div class="news">
119 <div class="news1"></div>
120 <div class="news2"></div>
121 <div class="news3"></div>
122 </div>
123 <div class="hotpic"></div>
124 </div>
125 <div class="links"></div>
126 </div>
127 </div>
128
129 <!-- 頁尾 -->
130 <div class="footer"></div>
131 </body>
132 </html> 複制
浮動的清除
這裡所說的清除浮動，指的是清除浮動與浮動之間的影響。
我們要明白，浮動有開始，就要有清除。
我們先來做個實驗。
下面這個例子，有兩個塊級元素div，div沒有任何屬性，每個div裡有li，效果如下：
上面這個例子很簡單。可如果我們給裡面的
<li>
标簽加浮動。效果卻成了下面這個樣子：
上圖中，我們發現：第二組中的第1個li，去貼靠第一組中的最後一個li了（我們本以為這些li會分成兩排）。
這便引出我們要講的：清除浮動的第一種方式。 那該怎麼解決呢？
方法1：給浮動元素的祖先元素加高度
造成前言中這個現象的根本原因是：li的父親div沒有設定高度，導緻這兩個div的高度均為0px（我們可以通過網頁的審查元素進行檢視）。div的高度為零，導緻不能給自己浮動的孩子，撐起一個容器。
撐不起一個容器，導緻自己的孩子沒辦法在自己的内部進行正确的浮動。
好，現在就算給這個div設定高度，可如果div自己的高度小于孩子的高度，也會出現不正常的現象。
給div設定一個正确的合适的高度（至少保證高度大于兒子的高度），就可以看到正确的現象：
總結：
如果一個元素要浮動，那麼它的祖先元素一定要有高度。
有高度的盒子，才能關住浮動。（記住這句過來人的經驗之語）
隻要浮動在一個有高度的盒子中，那麼這個浮動就不會影響後面的浮動元素。是以就是清除浮動帶來的影響了。
方法2：clear:both;
方法1，工作中用得很少。
那麼，能不能不寫height，也把浮動清除了呢？也讓浮動之間，互不影響呢？
這個時候，我們可以使用
clear:both;
這個屬性。如下：
clear:both; 複制
clear就是清除，both指的是左浮動、右浮動都要清除。
clear:both
的意思就是：不允許左側和右側有浮動對象。
這種方法有一個非常大的、緻命的問題，它所在的标簽，margin屬性失效了。讀者可以試試看。
margin失效的本質原因是：上圖中的box1和box2，高度為零。
方法3：隔牆法
上面這個例子中，為了防止第二個div貼靠到第二個div，我們可以在這兩個div中間用一個新的div隔開，然後給這個新的div設定
clear: both;
屬性；同時，既然這個新的div無法設定margin屬性，我們可以給它設定height，以達到margin的效果（曲線救國）。這便是隔牆法。
我們看看例子效果就知道了：
上圖這個例子就是隔牆法。
内牆法：
近些年，有演化出了“内牆法”：
上面這個圖非常重要，當作内牆法的公式，先記下來。
為了講内牆法，我們先記住一句重要的話：一個父親是不能被浮動的兒子撐出高度的。舉例如下：
（1）我們在一個div裡放一個有寬高的p，效果如下：（很簡單）
（2）可如果在此基礎之上，給p設定浮動，卻發現父親div沒有高度了：
（3）此時，我麼可以在div的裡面放一個div（作為内牆），就可以讓父親div恢複高度：
于是，我們采用内牆法解決前言中的問題：
與外牆法相比，内牆法的優勢（本質差別）在于：内牆法可以給它所在的家撐出寬度（讓box1有高）。即：box1的高度可以自适應内容。
而外牆法，雖然一道牆可以把兩個div隔開，但是這兩個div沒有高，也就是說，無法wrap_content。
清除浮動方法4：overflow:hidden;
我們可以使用如下屬性：
overflow:hidden; 複制
overflow即“溢出”， hidden即“隐藏”。這個屬性的意思是“溢出隐藏”。顧名思義：所有溢出邊框的内容，都要隐藏掉。如下：
上圖顯示，
overflow:hidden;
的本意是清除溢出到盒子外面的文字。但是，前端開發工程師發現了，它能做偏方。如下：
一個父親不能被自己浮動的兒子，撐出高度。但是，隻要給父親加上
overflow:hidden
; 那麼，父親就能被兒子撐出高了。這是一個偏方。
那麼對于前言中的例子，我們同樣可以使用這一屬性：
浏覽器的相容性問題
相容性1（微型盒子）
相容性的第一條：IE6不支援小于12px的盒子，任何小于12px的盒子，在IE6中看都大。即：IE 6不支援微型盒子。
舉個例子。我們設定一個height為 5px 、寬度為 200px的盒子，看下在IE 8和 IE 6中的顯示效果：
解決辦法很簡單，就是将盒子的字号大小，設定為小于盒子的高，比如，如果盒子的高為5px，那就把font-size設定為0px(0px < 5px)。如下：
height: 5px;
_font-size: 0px; 複制
我們現在介紹一下浏覽器hack。hack就是“黑客”，就是使用浏覽器提供的後門，針對某一種浏覽器做相容。
IE6留了一個後門：隻要給css屬性之前，加上下劃線，這個屬性就是IE6的專有屬性。
比如說，我們給背景顔色這個屬性加上下劃線，就變成了
_background-color: green;
。效果如下：
于是乎，為了解決微型盒子（即height小于12px）的問題，正确寫法：（注意不要忘記下劃線：即隻在低級浏覽器生效）
height: 10px;
_font-size:0; 複制
相容性2
**相容性的第二條：**IE6不支援用
overflow:hidden;
來清除浮動。
解決辦法，以毒攻毒。追加一條：
overflow: hidden;
_zoom:1; 複制
需要強調的是，
overflow:hidden;
的本意，就是讓溢出盒子的border的内容隐藏，這個功能是IE6相容的。不相容的是
overflow:hidden;
清除浮動的時候。
總結：
我們剛才學習的兩個IE6的相容問題，都是通過多寫一條hack來解決的，這個我們稱為伴生屬性，即兩個屬性，要寫一起寫。
margin相關
margin塌陷/margin重疊
标準文檔流中，豎直方向的margin不疊加，取較大的值作為margin(水準方向的margin是可以疊加的，即水準方向沒有塌陷現象)。如下圖所示：
如果不在标準流，比如盒子都浮動了，那麼兩個盒子之間是沒有塌陷現象的。
盒子居中 margin:0 auto;
margin:0 auto;
margin的值可以為auto，表示自動。當left、right兩個方向都是auto的時候，盒子居中了：
margin-left: auto;
margin-right: auto; 複制
盒子居中的簡寫為：
margin:0 auto; 複制
對上方代碼的了解：上下的margin為0，左右的margin都盡可能的大，于是就居中了。
注意：
- （1）隻有标準流的盒子，才能使用
margin:0 auto;
- （2）使用
margin:0 auto;
- （3）
margin:0 auto;
text-align:center;
對上面的第三條總結一下：（非常重要）
margin:0 auto; //讓這個div自己在大容器中的水準方向上居中。
text-align: center; //讓這個div内部的文本居中。 複制
順便普及一下知識，text-align還有：
text-align:left; //沒啥用，因為預設居左
text-align:right; //文本居右 複制
善于使用父親的padding，而不是兒子的margin
我們嘗試通過給兒子
p
一個
margin-top:50px;
的屬性，讓其與父親保持50px的上邊距。結果卻看到了下面的奇怪的現象：
此時我們給父親div加一個border屬性，就正常了：
如果父親沒有border，那麼兒子的margin實際上踹的是“流”，踹的是這“行”。是以，父親整體也掉下來了。
margin這個屬性，本質上描述的是兄弟和兄弟之間的距離； 最好不要用這個marign表達父子之間的距離。
是以，如果要表達父子之間的距離，我們一定要善于使用父親的padding，而不是兒子的margin。