css的盒模型實例分析

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

　　CSS盒子模型與怪異盒模型

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

　　標準盒模型

　　標準盒模型中盒子的大小是指：content + border + padding + margin。其中width指的是內容區域content的寬度；height指的是內容區域content的高度。下面用一段代碼和圖片來讓說明一個盒子大小的呈現方式。

　　.box {

　　width: 100px;

　　height: 100px;

　　padding: 10px;

　　margin: 10px;

　　border: 10px solid red;

　　background-color: #606266;

　　/*標準盒模型*/

　　box-sizing: content-box;

　　}

　　在chrome里面調試工具樣式的最下面可以看到一個盒子呈現出的長寬，內邊距(padding)，邊框(border)和外邊距(margin)。鼠標移動到dom上，可以看到盒子實際呈現出的長寬分別為140px,140px。這是因為我們的width為100px,height為100px,padding上下左右均為10px,border上下左右均為10px。所以我們看到的我們盒子的長寬為140px。由于是塊級元素，實際盒子會獨占一行，這里的140px沒有算是margin。標準模式下，最直觀的特點是widith和height的值決定了盒子的內容區域(content)的大小。而盒子實際呈現的大小并不一定是你設置的widith和height的值。因為還有padding,border,margin等來影響它。

　　IE怪異盒模型

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

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

　　.box {

　　width: 100px;

　　height: 100px;

　　padding: 10px;

　　margin: 10px;

　　border: 10px solid red;

　　background-color: #606266;

　　/*IE盒模型*/

　　box-sizing: border-box;

　　}

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

　　如何切換盒模型

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

　　*{

　　/*IE盒模型,order和padding計算入width之內*/

　　box-sizing: border-box;

　　/*padding計算入width內，不推薦使用，非常老的瀏覽器才支持*/

　　box-sizing: padding-box;

　　/*border和padding不計算入width之內*/

　　box-sizing: content-box;

　　/*繼承父元素*/

　　box-sizing: inherit;

　　}

　　兼容性

　　可以看到現代瀏覽器都支持了該屬性。

到此，關于“css的盒模型實例分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！