CSS盒模型

• 盒模型

.box {

width: 200px;

height: 200px;

border: 2px solid red;

}

        一般設置的width、height，僅僅指內容區域，不包含border、padding在內。可是，能夠經過設置 box-sizing屬性，指定盒模型區域，box-sizing有兩個值：content-box和border-box。默認狀況下不設置時當前盒模型box-sizing值爲content-box，設置盒模型的寬高爲內容寬高。

        當手動設置box-sizing值爲boxder-box時，當前盒模型的寬高表示內容寬高+padding值+border 所獲得的總體寬高。

以下box全部寬高相同，不一樣是左側設置了box-sizing: border-box.

        能夠看出區別，左側設置的寬度200px = 內容寬度(186px) + padding (5px * 2)+border；

        右側沒有設置box-sizing,默認爲content-box， 所設置的寬度僅僅爲內容的寬高200px。

         

---

• box-shadow 盒陰影： 陰影只是修飾，並不佔用空間

模糊半徑：設置內容模糊的範圍，值越大邊框模糊的範圍也越大，

陰影大小：設置額外加大模糊的範圍，值越大模糊範圍也越大，也能夠設置負數

顏色：模糊顏色，若是不設置將取字體顏色

---

• outline : 盒邊框，修飾，不佔用空間