盒子的屬性：width样傍、height横缔、padding、border铭乾、margin
盒子分兩種：
1.標(biāo)準(zhǔn)W3C盒子模型
標(biāo)準(zhǔn)W3C盒子模型包括margin剪廉、border、padding炕檩、content斗蒋，并且content不包括其他部分捌斧。
2.IE盒子模型
標(biāo)準(zhǔn)W3C盒子模型包括margin、border泉沾、padding捞蚂、content，并且content包括border和padding跷究。
ICSS盒模型和IE盒模型的區(qū)別：
在?標(biāo)準(zhǔn)盒子模型中姓迅，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距俊马、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸丁存，但是會增加元素框的總尺寸。
在IE盒子模型中柴我，width 和 height 指的是內(nèi)容區(qū)域+border+padding的寬度和高度解寝。
溫馨提示：<body>標(biāo)簽也有margin
很多人以為<body>標(biāo)簽占據(jù)的是整個頁面的全部區(qū)域，其實是錯誤的艘儒。
正確的理解是這樣的：整個網(wǎng)頁最大的盒子是<document>聋伦，即瀏覽器。而<body>是<document>的兒子界睁。瀏覽器給<body>默認(rèn)的margin大小是8個像素觉增，此時<body>占據(jù)了整個頁面的一大部分區(qū)域，而不是全部區(qū)域翻斟。
解決方案：可以在網(wǎng)頁里清除所有的margin與padding逾礁，代碼如下：
*{
padding:0;
margin:0;
}
但是，*的效率不高访惜，所以我們使用并集選擇器敞斋，羅列所有的標(biāo)簽（不用背，有專業(yè)的清除默認(rèn)樣式的樣式表疾牲，今后學(xué)習(xí)）：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
關(guān)于width植捎、height
真實占有寬度 = 左border + 左padding + width + 右padding + 右border
真實占有寬度不變，所以 width+ ==>padding-
關(guān)于padding
padding就是內(nèi)邊距阳柔。padding的區(qū)域有背景顏色焰枢，css2.1前提下，并且背景顏色一定和內(nèi)容區(qū)域的相同舌剂。也就是說济锄，background-color將填充所有border以內(nèi)的區(qū)域。
padding：30px 20px 10px 5px? ? ?
綜合屬性的寫法：(上霍转、右荐绝、下、左)（順時針方向避消，用空格隔開低滩。margin的道理也是一樣的）
padding: 20px 40px 60px;（上20px召夹；左、右40px恕沫；下60px监憎。）
后者居上。比如：padding: 20px;padding-left: 30px;
所以正確的是：padding：20px 20px 20px 30px
認(rèn)識border
border就是邊框婶溯。邊框有三個要素：像素（粗細(xì)）鲸阔、線型、顏色迄委。
border綜合屬性：border:1px solid red;拆分開來褐筛，border包括：border-width、border-style叙身、border-color死讹。
css 外邊距合并（疊加）
兩個上下方向相鄰的元素框垂直相遇時，外邊距會合并曲梗，合并后的外邊距的高度等于兩個發(fā)生合并的外邊距中較高的那個邊距值，如圖：
實際開發(fā)中遇到的和框模型相關(guān)的應(yīng)用及小問題世剖。
1 margin越界（第一個子元素的margin-top和最后一個子元素的margin-bottom的越界問題）
以第一個子元素的margin-top 為例：
當(dāng)父元素沒有邊框border時定罢，設(shè)置第一個子元素的margin-top值的時候，會出現(xiàn)margin-top值加在父元素上的現(xiàn)象旁瘫，解決方法有四個：
（1）給父元素加邊框border （副作用）
（2）給父元素設(shè)置padding值 ?（副作用）
（3）父元素添加 overflow：hidden （副作用）
（4）父元素加前置內(nèi)容生成祖凫。（推薦）
2 瀏覽器間的盒子模型。
（1）ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的酬凳，而在IE中只有margin有值惠况。
（2）標(biāo)準(zhǔn)盒子模型與IE模型之間的差異：
標(biāo)準(zhǔn)的盒子模型就是上述介紹的那種，而IE模型更像是 box-sizing : border-box; 其內(nèi)容寬度還包含了border和padding宁仔。解決辦法就是：在html模板中加doctype聲明稠屠。
3 用盒子模型畫三角形
詳細(xì)了解：
https://blog.csdn.net/qq_34382449/article/details/81234653
http://www.cnblogs.com/blosaa/p/3823695.html
