盒模型

盒模型

1. 默認狀況下， 在盒子模型中，咱們設置的寬度都是內容寬度，不是整個盒子的寬度。而整個盒子的寬度是：（內容寬度 + padding寬度 + border寬度 + margin寬度）之和。這樣咱們改四個中的其中一個，都會致使盒子寬度的改變2. 若是父容器寬度不變，咱們手動增大margin、border或padding其中一項的寬度值，都會致使內容寬度的減小。極端狀況下，若是內容的寬度壓縮到不能再壓縮了（例如一個字的寬度），那麼瀏覽器會強迫增長父容器的寬度3. box-sizing:border-box4. 切記，margin有一個特性——縱向重疊，以下圖，<p>的縱向margin是16px，那麼兩個<p>之間縱向的距離按常理來講應該是 16 + 16 = 32px，可是答案仍然是 16px。由於縱向的margin是會重疊的，大的會把小的「吃掉」