盒模型的一些介紹

盒模型:

在html中每個標籤都有一個盒模型,和模型有如下內容組成

1. content(內容)
2. padding(內邊距)
3. border (邊框)
4. margin (外邊距)

content: 

        用來承載當前標籤中的內容,經過width和height兩個屬性來設置

padding: 

        控制當前標籤內容與邊框之間的間距,經過padding屬性來設置

border: 

        控制當前標籤的邊框,經過屬性border來設置

margin: 

        控制當前標籤與相鄰標籤之間的間距,經過屬性 margin來設置

padding margin 屬性複合了以上四個屬性;

padding: 20px ; 一個值表明:上下左右都是50px;

padding: 20px 20px; 兩個值表明:上下 左右分別都是20px;

padding: 10px 20px 30px; 三個值表明;上 左右 下 分別是10px 20px 30px;

padding: 10px 20px 30px 40px; 四個值表明:上 右 下 左 分別是10px 20px 30px 40px;

border屬性複合了以上三個屬性:

其中border-width,border-style是邊框比不可少的兩個元素

border-color 默認爲 黑色

若是各個邊的邊框不一致須要單獨設置

邊框樣式:

•        solid 實線
•        dotted 點線
•        dashed 虛線
•        double 雙實線

margin的兩個坑:

      1, 上下排布的兩個標籤,上邊元素的margin-bottom與下邊元素的margin-top二者取最大關係,不會疊加.

      2, 父子嵌套的兩個標籤: 若是父元素沒有邊框,同時給子元素設置了垂直方向的margin,此時子元素的margin會傳遞給父級(父子共用margin)

最佳解決方案: 給父元素設置overflow:hidden; 屬性

閒來無事,總結下...