css盒子模型、垂直外邊距合并

標籤：pos   css盒子模型   通過   修改   class   部分   繼承   作用   表示   

　　css盒子模型由四部分組成：內容（content）、填充（padding）、邊框（border）、邊距（margin），其中css樣式中定義的width屬性是定義內容地區的寬度，正常情況下，設定了內容地區的寬度後，再設定盒子的填充、邊框、邊距值，盒子在頁面中實際佔據的頁面尺寸的計算是：

　　　　水平方向上：：width+2*padding+2*border+2*border，

　　　　垂直方向上：：height+2*padding+2*border+2*border，

不過需要注意的是行內元素，在不改變它的表現行為時，它是不能設定垂直方向上的填儲值與邊距值。

　　

　　邊距（margin）

      邊距描述的是盒子與盒子之間的距離，也就是在這個盒子的多遠的距離可以放置另外一個盒子。　邊距的設定中存在經典的問題：垂直外邊距合并；常常出現在父元素與第一個子項目之間或者是垂直方向上的同級元素之間；表現為給元素設定上邊距時，子項目與父元素之間卻沒有如預期那隔開距離，或者父元素與它的同級元素之間隔開距離，但是我們沒有給父元素設定外邊距。解決外邊距合并的方法是：

　　1、浮動（float）

　　2、定位（position：absolute）

　　3、填充（padding），給父元素在垂直方向上設定填充，以隔開父級元素與子項目的邊距；

　　4、邊框（border），原理同上；

　　5、overflow：hidden；

其中，overflow:hidden 的作用並不止於解決垂直外邊距合并，它還有清除浮動的作用；

　　

　　填充（padding）

　　填充指的是在盒子的內部，距離盒子四周多遠的距離之內才可以將盒子放進來，不過在內部的盒子可以通過改變自己的邊距（margin）來修改自己與父元素盒子四周的距離而無視父元素內部填充的設定。元素設定了overflow:hidden,在它的填充地區內出現隱藏，而是超出邊距則隱藏超出部分。

 

　　內容（content）

　　在css中設定的寬度與高度，是內容地區的寬高，但是有一個屬性可以設定盒子的組成：

　box-sizing：border-box|content-box|inherit

其中border-box代表在css中設定的width與height屬性中包括了邊框與填充;

　　content-box表示在css中設定的width與height屬性只是內容地區的寬度與高度；

　　inherit是繼承父元素。

<div  class="wrapper">

　　<div  class="border-box" style="width:200px;box-sizing:border-box;"></div>     //在整個頁面中所佔的尺寸是200px

</div>

 

<div  class="wrapper">

　　<div  class="content-box"  style="width:200px;box-sizing:content-box;"></div>   //在整個頁面中所佔的尺寸計算為

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　水平方向上：：width+2*padding+2*border+2*border，

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　                垂直方向上：：height+2*padding+2*border+2*border，

</div>

 

<div  class="wrapper"   style="width:200px;">

　　<div  class="inherit"  style="box-sizing:inherit;"></div>                                          //繼承父元素

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

</div>

 

css盒子模型、垂直外邊距合并