盒子模型
- 關于
CSS重要的一個概念就是CSS盒子模型。它控制著頁面這些元素的高度和寬度。盒子模型多少會讓人產生一些困惑，尤其當涉及到高度和寬度計算的時候。真正盒子的寬度(在頁面呈現出來的寬度)和高度，需要加上一些其它的屬性，例如：-
padding+border+width= 盒子的寬度 -
padding+border+height= 盒子的高度
-
- 這看起來并不是那么直觀，那么我們看一個圖：
這意味著，如果我們設置一個寬度為
200px，而實際呈現的盒子的寬度可能會大于200px(除非沒有左右邊框和左右補白)。這可能看起來比較怪，CSS設置的寬度僅僅是內容區的寬度，而非盒子的寬度。同樣，高度類似這導致的直接結果是當我們希望頁面呈現的盒子的寬度是200px的時候，我們需要減去它的左右邊框和左右補白，然后設置為對應的CSS寬度。例如上圖，我們設置希望盒子寬度為
200px，則需要先減去左右補白各20px，左右邊框各1px，然后設置對應的CSS寬度158px。
- 幸運的是，我們有更好的方法達到我們想要的目的
box-sizing
語法：
box-sizing:content-box|border-box|inherit;與上面不同的是，當你設置
box-sizing:border-box以后，這就能達到你想要的目的。例如，上面我們想要一個寬度為200px的盒子，那么我們直接設置寬度為200px。是不是看起來清晰多了。當再設置它的左右邊框和左右補白后，它的內容區會自動調整。這可能更直接和一目了然。CSS代碼如下：
div {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 1px solid #DDD;
}
實際上，這更被設計者和開發者推崇
一些開發人員覺得
box-sizing使用起來十分方便,所以他們主張通過通用選擇器將這個屬性應用于每個元素但這樣的觀點未免有些偏激,而且還會導致不必要的困難,所以更好的方法是只在實際需要時才使用這個屬性
*{
margin:0;
padding:0;
box-sizing:border-box;
}
- 寫上
box-sizing: border-box; ，設置padding值 也不用擔心沒有減小寬度值而變形
box-sizing其它的值
-
content-box- 描述：在寬度和高度之外繪制元素的內邊距和邊框。
-
border-box- 描述：為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制
-
inherit- 描述：繼承 父元素
box-sizing屬性的值
- 描述：繼承 父元素
瀏覽器兼容性
-
IE8及以上版本支持該屬性，Firefox需要加上瀏覽器廠商前綴-moz-，對于低版本的IOS和Android瀏覽器也需要加上-webkit-。實際上，很多reset.css或者normal.css里都包含如下CSS語句，也是比較贊成的用法：
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
box-sizing 布局三欄目案例
div{
height:700px;
float:left;
}
div.left{
width:25%;
background:red;
}
div.cent{
width:50%;
box-sizing:border-box;/*可以改變元素以使其寬度包含填充*/
/* 現在整個元素,包括填充在內,占頁面總寬度的50%,所以元素的組合寬度為100%,這全程它們很好地適應于它們的容器.*/
background:yellow;
padding:0 20px;/*加了這個會使盒子內容溢出 但是box-sizing很好的自適應了*/
}
div.right{
width:25%;
background:blue;
}
<div class="left"></div>
<div class="cent"></div>
<div class="right"></div>
- 效果
