css盒子模型
content，padding，border，margin;
盒子模型属性默认不继承。
ie盒子
border-box:content包括content，padding，border
w3c盒子
content-box: content只包括content
盒子模型5个层次
border=>content&padding=>background-image=>background-color=>margin
width
auto 默认值。浏览器可计算出实际的宽度。
length 使用 px、cm 等单位定义宽度。
% 定义基于包含块（父元素）宽度的百分比宽度。
inherit 规定应该从父元素继承 width 属性的值。
width: auto
子元素（包括content+padding+border+margin）撑满整个父元素的content区域。
子元素有margin、border、padding时，会减去子元素content区域相对应的width值
父元素的content = 子元素（content + padding + border + margin )
width: 100%
强制将子元素的content区域 撑满 父元素的content区域
子元素有margin、border、padding时，不改变子元素content区域的width，而是溢出父盒子，保持原有值
父元素的content = 子元素的content(前提是content-box，即默认w3c盒子模型)
height
auto 默认。浏览器会计算出实际的高度。
length 使用 px、cm 等单位定义高度。
% 基于包含它的块级对象的百分比高度。
inherit 规定应该从父元素继承 height 属性的值。
padding
length 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
% 规定基于父元素的宽度的百分比的填充
inherit 指定应该从父元素继承padding
margin
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。
对于行内元素margin-top/margin-bottom无效。
padding与margin的区别
padding用来隔开元素与内容的间隔
margin用来隔开元素与元素的间隔
注意padding-top/bottom、margin-top/bottom
注意padding-top/bottom、margin-top/bottom设置百分比(%),是相对父元素width。
eg:设置移动端正方形图片
height：1px;
width:100%;
padding-top:100%; =>相对父元素width,所以就为正方形了。
eg:元素的竖向百分比相对于容器的高度吗？
不对。height相对容器高度，padding-top/bottom、margin-top/bottom相对容器宽度。
border
border:border-width border-style border-color;