盒模型

盒模型属性

• centent 内容
  width
height

• padding 内边距 隔开内容和边框
  padding- top | right | bottom | left

• border 边框

• 边框颜色 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-radius

• margin 外边距 隔开元素与元素的间距
  margin- top | right | bottom | left
  auto 浏览器默认值| length 具体单位值| percentag百分比

• tip

• 简写 margin padding border适用
  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} 作用：为所有元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
  更符合人们对盒子的直观感受，计算起来更方便

• 兼容性