盒模型：
垂直方向布局
mt + bt + pt + height + pb + bb + mb =父元素的高度
[if !supportLists]1)?[endif]寬度是auto時，子元素會占滿父元素 ?
父元素寬度auto,父元素寬度占整個屏幕。
子元素寬度為auto,子元素寬度與父元素一樣
父子元素同時為auto,父子元素同時為屏幕寬度。 ????????
2)高度是auto時，父元素的高度由其內(nèi)容的高度決定 ????????????????
3)如果不為父元素指定高度，則父元素會自動適應(yīng)子元素的高度，確保能容納所有的子元素 ????????
4)如果為父元素指定了高度，則指定多少就是多少， 此時如果子元素的大小超過了父元素，則會導(dǎo)致子元素從父元素中溢出。溢出的子元素不會影響到頁面的布局
2、溢出????????
使用overflow來設(shè)置溢出內(nèi)容的處理方式
可選值：
visible，默認值 溢出內(nèi)容不會被裁剪直接在父元素外部顯示
hidden，溢出的內(nèi)容會被裁剪，超過父元素的不會顯示
scroll，生成滾動條，可以通過滾動條查看完整內(nèi)容
auto，根據(jù)需要生成滾動條
3、外邊距折疊
垂直方向、相鄰的外邊距會發(fā)生外邊距折疊現(xiàn)象。
1）[endif]兄弟元素間的相鄰?fù)膺吘啵?/p>
1>?[endif]正值：取兩個邊界的最大值
2>?[endif]負值：取絕對值較大的
3>?[endif]一正一負：取兩個值的和
2）[endif]父子元素間的相鄰垂直外邊距：
子元素的外邊距會傳遞給父元素（給子元素設(shè)置外邊距時，父元素也會跟著改變）
解決方法：偽元素：：before
4、文檔流(標(biāo)準(zhǔn)流、常規(guī)流) ??
文檔流是網(wǎng)頁中的一個位置，默認情況頁面中的所有元素都在文檔流中排列。
1> 塊元素在文檔流中的特點
1、自上向下進行排列（獨占一行）
2、默認寬度和元素一樣
3、默認高度被內(nèi)容撐開
2> 行內(nèi)元素在文檔流中的特點
1、自左向右水平排列，如果一行中不足以容納所有的元素則切換到下一行繼續(xù)自作向右水平排列（和我們書寫習(xí)慣一樣）
2、默認高度和寬度都被內(nèi)容撐開
5、行內(nèi)元素的盒模型
1>內(nèi)聯(lián)元素不支持設(shè)置寬度和高度
2>內(nèi)聯(lián)元素可以設(shè)置padding，但是垂直方向的padding不會影響頁面的布局
3>內(nèi)聯(lián)元素可以設(shè)置border， 但是垂直方向的border不會影響頁面的布局
4>內(nèi)聯(lián)元素支持水平方向的外邊距，不支持垂直方向的
5>水平方向相鄰的外邊距不會重疊，而是求和
6、display ：指定元素所生產(chǎn)的框的類型（把行內(nèi)元素變成塊元素、行內(nèi)元素等）
可選值：
inline：行內(nèi)元素
block：塊元素
inline-block：行內(nèi)塊元素，既有行內(nèi)元素的特點，不獨占一行；又有塊元素的特點，可以設(shè)置寬高
none：元素不在頁面中顯示
7、 visibility ：可以設(shè)置元素的顯示的狀態(tài)
可選值：
visible：默認值，元素正常顯示
hidden：不顯示元素，但是元素依然占據(jù)位置
8、默認樣式
為了確保網(wǎng)頁在沒有樣式的情況下，也可以瀏覽，所以瀏覽器都會為網(wǎng)頁設(shè)置一些默認的樣式，這些默認樣式對于我們的開發(fā)來說是沒有任何作用，并且不同的瀏覽器所設(shè)置的默認樣式也是不同，所以開發(fā)中我們要做的第一件事往往就是去除調(diào)瀏覽器的默認樣式。
[if !supportLists]1)?[endif]* {
?????Margin: 0;
?????Padding:0;
}
[if !supportLists]2)?[endif]文件（CSS文件)
9、塊元素和行內(nèi)元素
?1> 塊元素(block) ?:塊元素用于頁面的布局
[if !supportLists]2>?[endif]行內(nèi)元素(inline) :行內(nèi)元素主要用于在頁面中選中文字
[if !supportLists]3>?[endif]一般情況下只會在塊中去放內(nèi)聯(lián)元素，不會向內(nèi)聯(lián)元素放塊元素
p元素中不能放任何的塊元素
a元素里邊什么都能放，除了它自己
?
******************
10、display 做隱藏的菜單欄
1>隱藏的元素與 ?hover 元素是 祖先與后代的關(guān)系
例：li為祖先（用 :hover） , ??.inner隱藏為后代
