掌握盒模型相關(guān)知識點
了解IE盒模型和W3C 盒模型區(qū)別
問答
一、盒模型包括哪些屬性？
- 內(nèi)邊距（上右下左）
- 外邊距（上右下左）
- 邊框（上右下左）
- 內(nèi)容區(qū)
二酗洒、text-align:center的作用是什么，作用在什么元素上？能讓什么元素水平居中滓走？
- text-align CSS屬性定義行內(nèi)內(nèi)容（例如文字）如何相對于它的塊父元素對齊。
- text-align作用在塊級元素上帽馋。但是并不控制塊元素自己的對齊（注意經(jīng)試驗發(fā)現(xiàn)display:inline-block的元素同樣不行）
- 能讓行內(nèi)元素水平居中搅方，包括display:inline-block.且適用于繼承屬性。
- 居中一個塊元素且不居中它的行內(nèi)內(nèi)容的標準兼容的方法是將它的左绽族、右margin設(shè)為auto姨涡。
三、如果遇到一個屬性想知道兼容性吧慢，在哪查看?
caniuse
四涛漂、IE 盒模型和W3C盒模型有什么區(qū)別?
- ie盒模型：ie678怪異模式（在ie678不聲明文檔類型 doctype）使用 ie盒模型，寬度=邊框+padding+內(nèi)容寬度检诗。要想在其他支持css3的瀏覽器上體驗ie盒模型匈仗，則使用
box-sizing: border-box;（并不是所有元素都有默認padding margin值） - chrome， ie9+, ie678(添加 doctype)(ie5經(jīng)試驗div不設(shè)定margin值,該值會是auto逢慌，其他瀏覽器為0) 使用標準盒模型悠轩， 寬度= 內(nèi)容寬度。
五攻泼、以下代碼的作用火架？兼容性？
0_1478654197295_upload-bad56e5c-6cad-4784-962a-27a08ac85809
- box-sizing:border-box: 以ie盒模型渲染頁面忙菠，所有元素的寬度=內(nèi)容寬+左右內(nèi)邊距+左右邊框何鸡。高度=上下內(nèi)邊距+上下邊框+內(nèi)容高。便于計算
