CSS的盒模型分兩種桩卵，content-box和border-box
在CSS中绽媒，使用 box-sizing這個(gè)屬性來設(shè)置是 content-box或者border-box
它們兩者之間的區(qū)別看下圖疚察。
content-box 的寬度只包含內(nèi)容部分。
而border-box的寬度包含碘耳，border绝编，padding,content
Q：具體是什么意思呢？
A：我們可以來看個(gè)例子废封；
比如我這里將兩個(gè)div 分別設(shè)置成 content-box和border-box 的樣式州泊。
都給它們?cè)O(shè)置了同樣的100px 的寬度。
但是我們看下結(jié)果會(huì)發(fā)現(xiàn)虱饿，明明兩個(gè)div 里面的單詞長(zhǎng)度相差不了多少拥诡。
但是結(jié)果卻是border-box的折行了触趴。
這是為什么？
我們打開F12 來檢查一下渴肉。
我們可以看下上面兩張圖的區(qū)別冗懦，我們可以看到。
當(dāng)你給content-box設(shè)置了width:100px 之后仇祭，它真的就把內(nèi)容content的寬度如實(shí)的設(shè)置為了100px .但是又因?yàn)檫@個(gè)div 還設(shè)置了,padding ,border披蕉。所以這整個(gè) 設(shè)置為content-box 的div ，的寬度就是? width+padding+border寬度乌奇。
所以最終得到的實(shí)際寬度没讲，其實(shí)是比我們自己設(shè)置的width:100px 要寬很多的。
那我們看下設(shè)置了border-box 的這個(gè)div 的情況礁苗。
我們會(huì)發(fā)現(xiàn)它的內(nèi)容部分的寬度只有60px ,這是什么原因呢爬凑？
原來我們?cè)O(shè)置的width:100px ，在border-box的情況下试伙，并不完全分配給了content：內(nèi)容部分荆责，我們?cè)O(shè)置的width其實(shí)是分配給了content, padding, border寬度,這三個(gè)部分陵叽。
所以才會(huì)導(dǎo)致挪圾，內(nèi)容部分的寬度芒划，不是像我們所想的那樣有100px 。
所以蚤蔓，就不奇怪卦溢，為什么在設(shè)置了同樣width 且文字內(nèi)容沒差多少的情況下，border-box和content-box在顯示上的區(qū)別會(huì)如此不同了秀又。
總結(jié)一下：
border-box 的寬度=border寬度+padding+content的寬度
content-box 的寬度=content的寬度
這個(gè)就是兩者之間的區(qū)別单寂。
Q：那哪種模型更好用呢？
A：這個(gè)因地制宜涮坐。在設(shè)置了 width,border,padding的情況下凄贩，border-box更合適些。
如果沒有設(shè)置的話袱讹，其實(shí)content-box和border-box相差不大疲扎。
