css中乙個很重要的概念是盒模型，css處理網頁時，它認為每個元素都包含在乙個不可見的盒子裡
由內容區域、內容區域周圍的空間（內邊距，padding）、內邊距的外邊緣（邊框，border）和邊框外面將元素與相鄰元素隔開的不可見區域（外邊距，margin）構成。具體如下圖
瀏覽器中元素的寬度與其width屬性值並不一致（除非沒有內邊距和邊框）。css中的寬度指示的是內邊距裡內容區域的寬度，而在瀏覽器中顯示寬度則是內容寬度、左右內邊距和左右邊框的總和，顯示高度與之類似。
當使用了box-sizing:border-box;則元素的顯示寬度就等於width屬性的值。內容寬度、內邊距和邊框都包含在裡面。如下圖
看起來似乎是css設定的寬度變大了，但其實，更改的並不是css，改變的是瀏覽器對於寬度的計算，我們來看乙個例子：
doctype html>
<
html
>
<
head
>
<
title
>test
title
>
<
link
rel="stylesheet"
type
="text/css"
href
="css/test.css"
>
head
>
<
body
>
<
div
class
="box"
>
div>
body
>
html
>
.box效果：
寬度和高度都為180px，即20+20+100+20+20 = 180px，而內容區域一樣是100px，加上box-sizing:border-box之後：
寬度和高度為100px，而內容區域只剩下20px，即100 - 20 - 20 - 20 - 20 = 20px
即當加上box-sizing:border-box之後，瀏覽器對於css中設定的width的計算方式變成了：border-left + padding-left + content + padding-right + border-right的總寬度，對於height的計算變成了：border-top + padding-top + content + padding-bottom + border-bottom的總高度
製作小三角形：
最終效果：
示例：
doctype html>
<
html
>
<
head
>
<
title
>test
title
>
<
link
rel="stylesheet"
type
="text/css"
href
="css/test.css"
>
head
>
<
body
>
<
div
class
="box"
>
div>
body
>
html
>
.box解釋：盒模型中，margin，border，padding都可以分成上、下、左、右四個部分，都可以進行分別控制，而當我們把padding和content的大小都設為0，而border給定寬度時，將會出現如上圖所示的圖形。我們也可以試試給定padding和content部分空間時的形態：
.box效果：
簡單應用：
doctype html>
<
html
>
<
head
>
<
title
>test
title
>
<
link
rel="stylesheet"
type
="text/css"
href
="css/test.css"
>
head
>
<
body
>
<
div
class
="box"
>
<
ul>
<
li>item 1
li>
<
li>item 2
li>
<
li>item 3
li>
ul>
div>
body
>
html
>
.box.box:afterli效果：以上只是個人粗淺理解，有啥問題，大家可以提出，一起**！
盒模型理解
參考 盒模型理解 前端的盒模型包括兩種，分別是w3c盒模型和ie盒模型。w3c盒模型包括content padding border margin。其中width content ie盒模型包括content padding border margin。其中width content padding...
理解盒模型
div css有兩種盒模型 標準w3c盒模型 ie盒模型 如何讓瀏覽器能夠按標準盒模型來處理，就是在網頁的頂部加上doctype宣告。如果不加 doctype宣告，那麼各個瀏覽器會根據自己的行為去理解網頁。標準盒模型中width和height指的是內容區域的寬度和高度，增加內邊距 邊框和外邊距不會影...
理解盒模型
div css有兩種盒模型 標準w3c盒模型 ie盒模型 如何讓瀏覽器能夠按標準盒模型來處理，就是在網頁的頂部加上doctype宣告。如果不加 doctype宣告，那麼各個瀏覽器會根據自己的行為去理解網頁。標準盒模型中width和height指的是內容區域的寬度和高度，增加內邊距 邊框和外邊距不會影...