資訊專欄INFORMATION COLUMN
摘要：前端技術之詳解第四天一第三天的小總結盒模型，什么是盒子所有的標簽都是盒子。如果不在標準流，比如盒子都浮動了，那么兩個盒子之間是沒有塌陷現象的盒子居中的值可以為，表示自動。
盒模型box model，什么是盒子？
所有的標簽都是盒子。無論是div、span、a都是盒子。圖片、表單元素一律看做文本。
盒模型有哪些組成：
width、height、padding、border、margin。
width、height是內容的寬度、高度，想起來丈量包子的比喻、丈量稿紙的比喻。
padding，內邊距，邊框和文字內容之間的距離。padding有顏色。表示方法，能夠用padding綜合寫，4個值“上、右、下、左”，3個值“上、左右、下”，2個值“上下，左右”。還能按方向拆開，padding-left、padding-top、padding-right、padding-bottom。
border，邊框，3要素，4條邊。3要素：border-width、border-style、border-color；4條邊：border-top、border-right、border-bottom、border-left。 比如我們要多帶帶設置某一條邊，那么就需要寫清楚3要素：
1 border-top:3px solid red;
如果要多帶帶設置要素：
1 border-width:3px;
2 border-color:red;
3 border-style:solid;
還能拆成最?。?nbsp;
1 border-bottom-style:solid;
常用線型：solid、dashed、dotted。
標準文檔流：說白了，就是一個“默認”狀態。標準文檔流中，標簽分為兩種：塊級元素、行內元素。
塊級元素：一定是霸占一行的，能設置寬、高，不設置寬度默認就是占滿父親。div、p、h、li
行內元素：和其他行內元素并排，不能設置寬、高，默認寬度就是文字寬度。span、a、b、i、u
能夠相互轉：
1 display:block;
2 或者：
3 display:inline;
標準流做不出網頁：因為能并排的不能改寬高。所以，要脫離標準流。
浮動：
1 float:left;
2 或者
3 float:right;
一個浮動的a、span ，是不需要設置display:block; 就能夠設置寬高了。因為浮動之后，脫離標準流了，所以標準流里面的法律、規則都不適用了。浮動宏觀的看，就是做“并排”的。有幾個性質：脫標、貼邊、字圍、收縮。
浮動的性質：脫標、貼邊、字圍、收縮。
收縮：一個浮動的元素，如果沒有設置width，那么將自動收縮為文字的寬度（這點非常像行內元素）。
比如：
1
這個div浮動了，且沒有設置寬度，那么將自動縮緊為內容的寬度：
整個網頁，就是通過浮動，來實現并排的。
案例代碼：
Document
View Code
案例2：
浮動的元素如果沒有width將縮進：
Document
我是文字
:
來看一個實驗：現在有兩個div，div身上沒有任何屬性。每個div中都有li，這些li都是浮動的。
1
2
3 - HTML
4 - CSS
5 - JS
6 - HTML5
7 - 設計模式
8
9
10
11
12
13 - 學習方法
14 - 英語水平
15 - 面試技巧
16
17
我們本以為這些li，會分為兩排，但是，第二組中的第1個li，去貼靠第一組中的最后一個li了。
第二個div中的li，去貼第一個div中最后一個li的邊了。
原因就是因為div沒有高度，不能給自己浮動的孩子們，一個容器。
清除浮動方法1：父親加高度：
Document
- HTML
- CSS
- JS
- HTML5
- 設計模式
- 學習方法
- 英語水平
- 面試技巧
如果一個元素要浮動，那么它的祖先元素一定要有高度。高度的盒子，才能關住浮動。
只要浮動在一個有高度的盒子中，那么這個浮動就不會影響后面的浮動元素。所以就是清除浮動帶來的影響了。
網頁制作中，高度height很少出現。為什么？
因為能被內容撐高！那也就是說，剛才我們講解的方法1，工作中用的很少。
Document
腦弄大開：能不能不寫height，也把浮動清除了呢？也讓浮動之間，互不影響呢？
1
2
3 - HTML
4 - CSS
5 - JS
6 - HTML5
7 - 設計模式
8
9
10
11 → 這個div寫一個clear:both;屬性
13 - 學習方法
14 - 英語水平
15 - 面試技巧
16
17
1 clear:both;
clear就是清除，both指的是左浮動、右浮動都要清除。意思就是：清除別人對我的影響。
這種方法有一個非常大的、致命的問題，margin失效了。
隔墻法：
Document
- HTML
- CSS
- JS
- HTML5
- 設計模式
- 學習方法
- 英語水平
- 面試技巧
View Code
1
2
3 - HTML
4 - CSS
5 - JS
6 - HTML5
7 - 設計模式
8
9
11
13
14
15 - 學習方法
16 - 英語水平
17 - 面試技巧
18
19
1 .cl{ 2 clear: both; 3 } 4 .h16{ 5 height: 16px; 6 }
近些年，有演化出了“內墻法”：
案例代碼：
Document
- HTML
- CSS
- JS
- HTML5
- 設計模式
- 學習方法
- 英語水平
- 面試技巧
View Code
內墻法本質：
Document
內墻法用途：
Document
View Code
代碼例子：
Document
- HTML
- CSS
- JS
- HTML5
- 設計模式
- 學習方法
- 英語水平
- 面試技巧
View Code
案例代碼：
Document
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
View Code
overflow就是“溢出”的意思， hidden就是“隱藏”的意思。
1 overflow:hidden;
表示“溢出隱藏”。所有溢出邊框的內容，都要隱藏掉。
內容太多，溢出了盒子：
overflow:hidden; 溢出盒子邊框的內容，隱藏了。
本意就是清除溢出到盒子外面的文字。但是，前端開發工程師又發現了，它能做偏方。
一個父親不能被自己浮動的兒子，撐出高度。但是，只要給父親加上overflow:hidden; 那么，父親就能被兒子撐出高了。這是一個偏方。
案例：
Document
View Code
1 div{ 2 width: 400px; 3 border: 10px solid black; 4 overflow: hidden; 5 }
例子：
Document
-
哈哈哈哈哈哈哈哈
2015年10月24日
-
嘻嘻嘻嘻嘻
2015年10月24日
-
嗚嗚嗚嗚嗚嗚嗚
2015年10月24日
View Code
總結一下：
浮動的元素，只能被有高度的盒子關住。 也就是說，如果盒子內部有浮動，這個盒子有高，那么妥妥的，浮動不會互相影響。但是，工作上，我們絕對不會給所有的盒子加高度，這是因為麻煩，并且不能適應頁面的快速變化。
1 → 設置height
2
3
4
5
6
7 → 設置height
8
9
10
11
最簡單的清除浮動的方法，就是給盒子增加clear:both；表示自己的內部元素，不受其他盒子的影響。
1
2
3
4
5
6
7 → clear:both;
8
9
10
11
在兩部分浮動元素中間，建一個墻。隔開兩部分浮動，讓后面的浮動元素，不去追前面的浮動元素。
墻用自己的身體當做了間隙。
1
2
3
4
5
7
9
10
1
12
13
內墻法：我們發現，隔墻法好用，但是第一個div，還是沒有高度。如果我們現在想讓第一個div，自動的根據自己的兒子，撐出高度，我們就要想一些“小伎倆”，“奇淫技巧”。
1
2
3
4
5
6
7
8
10
11
12
內墻法的優點就是，不僅僅能夠讓后部分的p不去追前部分的p了，并且能把第一個div撐出高度。這樣，這個div的背景、邊框就能夠根據p的高度來撐開了。
這個屬性的本意，就是將所有溢出盒子的內容，隱藏掉。但是，我們發現這個東西能夠用于浮動的清除。
我們知道，一個父親，不能被自己浮動的兒子撐出高度，但是，如果這個父親加上了overflow:hidden；那么這個父親就能夠被浮動的兒子撐出高度了。這個現象，不能解釋，就是瀏覽器的小偏方。
并且,overflow:hidden;能夠讓margin生效。
上述知識點遇見的瀏覽器兼容問題
第一，IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大
解決辦法很簡單，就是將盒子的字號，設置?。ㄐ∮诤凶拥母撸?，比如0px。
1 height: 4px;
2 _font-size: 0px;
我們現在介紹一下瀏覽器hack。hack就是“黑客”，就是使用瀏覽器提供的后門，針對某一種瀏覽器做兼容。
IE6留了一個后門，就是只要給css屬性之前，加上下劃線，這個屬性就是IE6認識的專有屬性。
比如：
1 _
解決微型盒子，正確寫法：
1 height: 10px;
2 _font-size:0;
第二，IE6不支持用overflow:hidden;來清除浮動的
解決辦法，以毒攻毒。追加一條
1 _zoom:1;
完整寫法：
1 overflow: hidden;
2 _zoom:1;
實際上，_zoom:1;能夠觸發瀏覽器hasLayout機制。這個機制，不要深究了，因為就IE6有。我們只需要讓IE6好用，具體的實現機制，有興趣的同學，自行百度。
強調一點， overflow:hidden;的本意，就是溢出盒子的border的東西隱藏，這個功能是IE6兼容的。不兼容的是overflow:hidden;清除浮動的時候。
Document
- HTML
- CSS
- JS
- HTML5
- 設計模式
- 學習方法
- 英語水平
- 面試技巧
View Code
我們剛才學習了兩個IE6的兼容問題，這兩個IE6的兼容問題，都是通過多寫一條hack來解決的。
這個我們稱為伴生屬性。
1 height:6px;
2 _font-size:0;
1 overflow:hidden;
2 _zoom:1;
標準文檔流中，豎直方向的margin不疊加，以較大的為準。
Document
View Code
如果不在標準流，比如盒子都浮動了，那么兩個盒子之間是沒有塌陷現象的：
margin的值可以為auto，表示自動。當left、right兩個方向，都是auto的時候，盒子居中了：
Document
哈哈哈
View Code
1 margin-left: auto;
2 margin-right: auto;
簡寫為
1 margin:0 auto;
注意：
1） 使用margin:0 auto; 的盒子，必須有width，有明確的width
2） 只有標準流的盒子，才能使用margin:0 auto; 居中。
也就是說，當一個盒子浮動了、絕對定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。
文本的居中，要使用
1 text-align:center;
1 margin:0 auto; → 讓這個div自己在大容器中居中。
2 text-align: center; → 讓這個div內部的文本居中。
普及一下知識，text-align還有
1 text-align:left; 沒啥用，因為默認居左
2 text-align:right; 文本居右
4.3 善于使用父親的padding，而不是兒子的margin
如果父親沒有border，那么兒子的margin實際上踹的是“流”，踹的是這“行”。所以，父親整體也掉下來了
Document
View Code
這個p有一個margin-top踹父親，試圖將自己下移
1
2
3
結果：
margin這個屬性，本質上描述的是兄弟和兄弟之間的距離； 最好不要用這個marign表達父子之間的距離。
所以，我們一定要善于使用父親的padding，而不是兒子的margin。
IE6雙倍margin bug
當出現連續浮動的元素，攜帶和浮動方向相同的margin時，隊首的元素，會雙倍marign。
Document