CSS盒模型 ╰(‵□′)╯So Easy!

CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

• Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
• Border(邊框) - 圍繞在內邊距和內容外的邊框。
• Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
• Content(內容) - 盒子的內容，顯示文本和圖像

CSS盒子模型分爲 標準盒子(W3C盒子模型) 和 IE盒子

width = content

width = content+padding+border

這兩個模型的唯一區別就是計算width 和height時，IE盒子模型包括padding和border，W3C盒子模型則不包括。

常用以下語句規範整個頁面的盒子：

*{box-sizing:border-box;}

可以通過box-sizing屬性來設置盒子模型

box-sizing屬性如下：

值	描述
content-box	默認值，標準模式 width = content
border-box	寬高計算方法與IE模式一致 width = content+padding+border
inherit	規定應從父元素繼承 box-sizing 屬性的值。

示例：導航欄最後一項掉下來的問題

html 部分：

<ul>
	<li>好好學習</li>
	<li>不要瞌睡</li>
	<li>敲敲代碼</li>
	<li>看看博客</li>
	<li>變成大神</li>
</ul>

css部分：

*{
	padding:0;
	margin:0;
}
ul{
	width:100%;
	height: 50px;
	list-style: none;
}
li{
	float: left;
	width:20%;
	background: pink;
	border:1px solid #000
}

效果圖：

解決方法：使用 box-sizing:border-box;

li{
	box-sizing:border-box; // 設置爲IE盒模型 width = content+padding+border
	float: left;
	width:20%; // 這裏的寬度包含了border的寬度
	background: pink;
	border:1px solid #000
}

效果圖：