css的盒模型實(shí)例分析

這篇文章主要介紹“css的盒模型實(shí)例分析”，在日常操作中，相信很多人在css的盒模型實(shí)例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css的盒模型實(shí)例分析”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

　　CSS盒子模型與怪異盒模型

　　盒子模型（Box Modle）可以用來對元素進(jìn)行布局，包括內(nèi)邊距(padding)，邊框(border)，外邊距(margin)，和實(shí)際內(nèi)容(content)這幾個部分。

　　標(biāo)準(zhǔn)盒模型

　　標(biāo)準(zhǔn)盒模型中盒子的大小是指：content + border + padding + margin。其中width指的是內(nèi)容區(qū)域content的寬度；height指的是內(nèi)容區(qū)域content的高度。下面用一段代碼和圖片來讓說明一個盒子大小的呈現(xiàn)方式。

　　.box {

　　width: 100px;

　　height: 100px;

　　padding: 10px;

　　margin: 10px;

　　border: 10px solid red;

　　background-color: #606266;

　　/*標(biāo)準(zhǔn)盒模型*/

　　box-sizing: content-box;

　　}

　　在chrome里面調(diào)試工具樣式的最下面可以看到一個盒子呈現(xiàn)出的長寬，內(nèi)邊距(padding)，邊框(border)和外邊距(margin)。鼠標(biāo)移動到dom上，可以看到盒子實(shí)際呈現(xiàn)出的長寬分別為140px,140px。這是因?yàn)槲覀兊膚idth為100px,height為100px,padding上下左右均為10px,border上下左右均為10px。所以我們看到的我們盒子的長寬為140px。由于是塊級元素，實(shí)際盒子會獨(dú)占一行，這里的140px沒有算是margin。標(biāo)準(zhǔn)模式下，最直觀的特點(diǎn)是widith和height的值決定了盒子的內(nèi)容區(qū)域(content)的大小。而盒子實(shí)際呈現(xiàn)的大小并不一定是你設(shè)置的widith和height的值。因?yàn)檫€有padding,border,margin等來影響它。

　　IE怪異盒模型

　　怪異盒模型中的width指的是內(nèi)容、邊框、內(nèi)邊距總的寬度（content + border + padding）;height指的是內(nèi)容、邊框、內(nèi)邊距總的高度。

　　怪異盒模型下盒子的大小=width（content + border + padding） + margin。下面用一段代碼和圖片來讓說明一個盒子大小的呈現(xiàn)方式。

　　.box {

　　width: 100px;

　　height: 100px;

　　padding: 10px;

　　margin: 10px;

　　border: 10px solid red;

　　background-color: #606266;

　　/*IE盒模型*/

　　box-sizing: border-box;

　　}

　　圖中可以看到，我們設(shè)置的widht和height為100px，那么盒子實(shí)際呈現(xiàn)的大小也為100px(這里是width和height的值，沒算margin)。那么內(nèi)容區(qū)域（可以放文字，div標(biāo)簽的區(qū)域）content的大小為width - padding - border = 60。

　　如何切換盒模型

　　在html頂部加上DOCTYPE聲明，大多數(shù)瀏覽器就會默認(rèn)采用標(biāo)準(zhǔn)盒模型。上面的代碼也可以看出，通過css的屬性box-sizing能改變盒模型。

　　*{

　　/*IE盒模型,order和padding計(jì)算入width之內(nèi)*/

　　box-sizing: border-box;

　　/*padding計(jì)算入width內(nèi)，不推薦使用，非常老的瀏覽器才支持*/

　　box-sizing: padding-box;

　　/*border和padding不計(jì)算入width之內(nèi)*/

　　box-sizing: content-box;

　　/*繼承父元素*/

　　box-sizing: inherit;

　　}

　　兼容性

　　可以看到現(xiàn)代瀏覽器都支持了該屬性。

到此，關(guān)于“css的盒模型實(shí)例分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！