盒模型
content->padding->border->margin
注：1、背景色只能填充到margin以內的區域
2、文字的content以內的區域新增
3、padding不能為負數，margin可以為負數
box-sizing
box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。取值為content-box(預設值)|border-box
盒子尺寸，可以改變盒子模型的展示形態：
預設值：content-box: height、width -> content
border-box: height、width -> content、padding、border
使用場景：
1、不用再去計算一些值
2、解決一些百分比問題
盒子模型遇見的一些問題：
1、margin疊加問題：
給兩個盒子同時新增上下外邊距時，就會出現疊加的問題，這個問題只有上下有，左右是沒有的。
上下疊加時取得是最大的量進行疊加。
解決方法：
1、bfc規範
2、想辦法給乙個元素新增間距
2、margin傳遞問題：
margin傳遞的問題只會出現在巢狀的結構中，且只有margin-top有傳遞的問題，其他三個方向的傳遞是沒有問題的。
解決方案：
1、bfc規範
2、給父容器加邊框
3、margin換成padding
3、盒子模型拓展
margin左右自適應居中（上下不行）
width、height不設定的時候會，對盒子模型的影響：會自動去計算容器的大小，節省**
CSS盒模型常見問題
div.parent的margin屬性為margin 0 auto，與body之間不應該有空隙，但是由於div.child的margin屬性設定為margin top 10px，div.parent出現了乙個本不該有的margin top 10px效果。原因在於 w3c的盒模型 collapsing...
CSS盒模型及排版
css盒模型由四部分組成 margin border padding content。外邊距 邊框 內邊距 內容。我們設定的width和height都是內容的大小，從而影響整個盒子的大小。盒子的佔位大小包括margin，但盒子的尺寸不包括margin。比如 盒子的高度 border width pa...
CSS盒模型及應用
注意事項 important 如果乙個盒子沒有給定寬度 高度或繼承父類的寬度 高度，盒子大小不受影響 新盒子 盒子大小就是寬度,padding width 包含在width中 box sizing border box 盒子計算尺寸 重點 box sizing content box 外盒尺寸計算 ...