盒模型属性
centent 内容
width
heightpadding 内边距 隔开内容和边框
padding- top | right | bottom | leftborder 边框
边框颜色
border- top | right | bottom | left | -color边框宽度
border- top | right | bottom | left | -width
medium 默认的边框宽度 | thin 小于默认的边框宽度
thick 大于默认的边框宽度| length 长度值边框样式
border- top | right | bottom | left | -style:
none 没有边框 | hidden 隐藏边框
dotted 边框为点线 | dashed 边框为虚线
solid 边框为实线 | double 边框为双线
groove 边框为3d凹槽 | ridge 边框为菱形
inset 边框为3d凹边 | outset 边框为3d凸边边框圆角
border-radiusmargin 外边距 隔开元素与元素的间距
margin- top | right | bottom | left
auto 浏览器默认值| length 具体单位值| percentag百分比tip
简写
marginpaddingborder适用
margin：1px 2px 3px 4px ；按（上、右、下、左）顺时针写
margin: 1px 2px 3px 2px;可简写成margin: 1px 2px 3px;表示上外边距是1px 下外边距是3px，左右外边距都是2px
margin: 0 1px 0 1px;可简写成margin: 0 10px;表示（上下）外边距都是0px （左右）外边距都是10px
margin: 0 0 0 0;可简写成margin: 0;表示（上下左右）外边距都是0px外边距合并
1.当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
2.当一个元素包含在另一个元素中时（前提是外面的元素没有border且没有padding），它们的上和/或下外边距也会发生合并。
3.当一个空元素且没有边框但是有外边距top与bottom，在这种情况下，上外边距与下外边距也会发生合并。
注：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。关于行内元素
行内元素设置width，height无效。
行内元素上下margin无效，上下padding撑开空间，但不占用文档流。左右margin、padding有效。设置背景色时，margin外边距没有颜色。
text-align: center
text-align 属性规定元素中的文本的水平对齐方式
value=left | right | center | justify | inherit
text-align: center作用在块级元素上，使块级内的行内元素水平居中
属性兼容性查询工具can i use
IE 盒模型和W3C盒模型区别?
标准盒模型width=content尺寸
padding、border所占的空间不在width、height范围内；
IE的盒模型width=content尺寸＋padding＋border；
box-sizing作用 兼容性
* {
box-sizing: border-box;
}
box-sizing属性可以设置盒模型的组成形式
value：
content-box，border和padding不计算入width之内
padding-box，padding计算入width内
border-box，border和padding计算入width之内（即怪异模式）*{box-sizing: border-box} 作用：为所有元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
更符合人们对盒子的直观感受，计算起来更方便-
兼容性
