>也許你覺得盒子模型很簡單,尤其在ie6怪異盒模型已經退出歷史舞臺的時候,但事實上并非如此,怪異盒模型仍然在不斷的被前端開發者所青睞。在css3中更是增加了`box-sizing`這一屬性來改變標準盒模型。
## 概念(box-model)
盒子模型,就是針對html標簽為單位,所定義的一個形象化的展示模型,規定了元素如何處理元素內容、內邊距、邊框 和 外邊距的方式。而整體的頁面布局就是不同的盒子堆砌以及嵌套組成。
## 盒子模型的差別
目前存在的盒子分為兩種,一種是w3c標準盒子,另外一種是ie6以下的怪異盒子模型。區別這兩種盒子之前,看一下盒子模型中外盒和內盒的概念。
1. w3c標準的盒模型中外盒以及內盒的定義 :
外盒尺寸計算(元素空間尺寸)
Element空間高度 = content height + padding + border + margin
Element 空間寬度 = content width + padding + border + margin
內盒尺寸計算(元素大小)
Element Height = content height + padding + border (Height為內容高度)
Element Width = content width + padding + border (Width為內容寬度)
2. ie傳統盒模型:ie6以下,不含ie6版本。
外盒尺寸計算(元素空間尺寸)
Element空間高度 = content Height + margin (Height包含了元素內容寬度,邊框寬度,內距寬度)
Element空間寬度 = content Width + margin (Width包含了元素內容寬度、邊框寬度、內距寬度)
內盒尺寸計算(元素大小)
Element Height = content Height(Height包含了元素內容寬度,邊框寬度,內距寬度)
Element Width = content Width(Width包含了元素內容寬度、邊框寬度、內距寬度)
可以看到 在以上的盒模型中,元素的寬高定義的非常細,兩者的外盒模型是一致的,而ie的內盒模型的寬高是包括了w3c中的內盒模型的整體的,而content width=css屬性的width.
## 實際使用
* 在目前的主流瀏覽器使用最新的h5文檔申明之后,所參考的都是最新的w3c的盒模型,除非客戶ie特別是ie6以下版本才是怪異模型。
就使用而言,現狀是定義的樣式寬高只包括了內容的寬高,而實際的寬高則是一個累加值。所以在定義所有元素大小時,如果寬高中有padding以及padding值時需要對應的寬高減去間距或者邊框值,而這樣的使用是不便于控制的。
所以在w3c的官方說明中,是這樣建議的:
> 目前最好的解決方案是回避這個問題。也就是,不要給元素有指定寬度高度的元素添加內邊距和邊框,而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。
* 以上的應用也可以在大多數的網站中得到驗證,在許多需要內邊距或者邊框的,尤其內邊距的布局中,前端工程師都會多寫一層類似于wrapper 的包裹元素用來解決這個問題。
## css3 box-sizing
* 就概念而言,ie的怪異模型是比較好控制和理解的,w3c在認識到這個問題之后,在css3中追加了改變盒模型的屬性:box-sizing ,語法如下:
`box-sizing : content-box || border-box || inherit`
中文版說明:http://www.w3help.org/zh-cn/kb/006/
在這個屬性中,可以控制內盒模型按照何種方式進行顯示,如果是content-box是w3c 的標準盒子,如果是border-box是ie 的怪異盒模型處理。
特別需要說明的是這個屬性現代的瀏覽器都是支持的,但IE家族只有IE8版本以上才支持,雖然現代瀏覽器支持box-sizing,但有些瀏覽器還是需要加上自己的前綴,Mozilla需要加上-moz-,Webkit內核需要加上-webkit-,Presto內核-o-,IE8-ms-,所以box-sizing兼容瀏覽器時需要加上各自的前綴:
``` css
/*Content box*/
Element {
-moz-box-sizing: content-box; /*Firefox3.5+*/
-webkit-box-sizing: content-box; /*Safari3.2+*/
-o-box-sizing: content-box; /*Opera9.6*/
-ms-box-sizing: content-box; /*IE8*/
box-sizing: content-box; /*W3C標準(IE9+,Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c標準語法)*/
}
/*Border box*/
Element {
-moz-box-sizing: border-box; /*Firefox3.5+*/
-webkit-box-sizing: border-box; /*Safari3.2+*/
-o-box-sizing: border-box; /*Opera9.6*/
-ms-box-sizing: border-box; /*IE8*/
box-sizing: border-box; /*W3C標準(IE9+,Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c標準語法)*/
}
```
## 總結
* 在綜合分析和深刻理解盒模型之后,我們可以得出這樣的結論:
1. 如果用戶主題為ie8以上的現代瀏覽器,那么可以采用ie 的怪異模式來處理所有的盒模型,在boot等主流框架中也是用的這種。(最新,前端開發人員青睞的)
2. 而如果用戶中確定有ie6以及ie7時,需要按照w3c的標準建議,對于有padding的固寬固高元素需要多些一層wrapper。(常用經典,但是不方便的)
3. 針對有寬高同時有padding或者邊框的,將寬高的數值減去內間距以及邊框的。(少用)
4. 用補丁文件 box-sizing-polyfill
git地址 :https://github.com/Schepp/box-sizing-polyfill
使用說明 :box-sizing: border-box;*behavior: url(/js/boxsizing.htc); 親測可用:`box-sizing:border-box;*behavior: url(/r/cms/www/zygw/css/boxsizing.htc); `
## 個人建議
* 總結中第二種方案是最穩妥的,也是目前主流網站所采用的方式。但是隨著響應式布局以及w3c的不變更新優化,ie的傳統模型將不斷的會被更好的支持,那時將不用這么麻煩。
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi