html 盒模型整理

width 寬度： 指的是真實內容的寬度，不是盒模型的寬度。

height 高度： 盒子裏面內容的高度，不是指盒子的高度。

padding 內邊距（盒子裏面的留白）。

border 指的是盒子邊框的大小。

margin 盒子外邊距。（一個盒子和另一個盒子的關係）

width和height 描述的是真實內容的寬和真實內容的高。

盒子的寬度和真實的佔有度不是一回事。

以上圖爲例：

盒子的內容width：200px height:200px 但真實的寬高倒是302*302 ，這是由於還要加上內邊距（padding），還有邊框（border）大小。

若是要求一個盒子的真實佔有像素 公式爲 左border+右border+width+左padding+右padding.

若是想保持一個盒子的真實佔有不變，那麼加width就要減padding（width +2 padding-1），加了padding就要減width。  （padding+1 width-2）

1、關於padding。

padding區域都是有背景顏色的，也就是說backgroud-color將填充全部boder之內的區域！！

padding 是有四個方向的，分別能夠描述四個方向的padding。

在css中有兩種定義padding的方式，分別是直接用小屬性，或者用空格隔開，例如：

padding-left: 100px;

pandding-right: 20px;

padding-top: 30px;

padding-bottom: 40px;

或者用如下方式定義，經過空格分開，上右下左：

padding：30px 20px 40px 100px；

其實有一些html元素標籤默認就帶有padding，好比ul標籤。因此在編寫html代碼的時，默認都會加一個默認的選擇器，把margin和padding都清除。

*{

margin: 0;

padding: 0;

}

2、border邊框。

border有三個要素，分別是粗細，線形，顏色。

例：

boder: 10px ridge red;  

另一種寫法就是：

border-width: 10px;

border-style: solid;

border-color: red;

按照方向拆分：

border-top：10px solid red;

border-right:10px solid bule;

border-left: 10px solid yellow;

border-bottom: 10px solid green;

甚至能夠拆的更詳細：

將每一個方向的每一個元素都拆開。

若是想讓邊框消失，能夠使用border:none 或者boder:0，他們兩個做用同樣。

若是想讓某一個方向的邊框消失border-left:none；或者border-left:0；。