这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情
盒模型的属性
●margin 外边距
●border 边框
●padding 内边距
●content
注意：
1.对于行内元素，手动设置宽高是无效的，它本身的宽高是由自身决定的。
2.行内元素可以设置margin、padding，但是只有水平方向，也就是左右方向的margin和padding是有效的，垂直方向，也就是上下方向的margin和padding是无效的。如果设置边框或者背景色，会把边框和背景色撑开。但是它本身并不会挤占空间，这样的话可能会出现一个覆盖的问题。
边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。但是注意只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会合并。设置了display:inline-block的元素，垂直margin不会被合并。
一般来说， 垂直外边距合并有三种情况：
●元素自身合并。当元素没有内容（即空元素）、内边距、边框时， 它的上下边距就会相遇了， 即会产生合并（垂直方向）。 如果为元素添加内容、 内边距、 边框其中的任何一项， 都会取消合并。❓
●元素合并相邻元素（兄弟合并），如果它们的上下边距相遇，即会产生合并。
●包含元素合并（父子合并）。包含元素的外边距隔着父元素的内边距和边框，当这两项都不存在的时候，父子元素垂直外边距相邻，产生合并。 添加任何一项即会取消叠加。
text-align: center
1的作用是什么？
2作用在什么元素上？
3能让什么元素水平居中？
作用于块级元素，比如说一个div或者段落上。
使块级元素内部的行内元素水平居中。这个所谓的居中是针对自己的父容器。
IE 盒模型和W3C盒模型有什么区别?
IE盒模型并不只是设置的内容宽高大小，还要包括border和padding；W3C盒模型只是内容宽高的大小。
●ie678怪异模式（不添加 doctype）使用 ie 盒模型，宽度=边框+padding+内容宽度。
●chrome， ie9+, ie678(添加 doctype) 使用标准盒模型， 宽度= 内容宽度。
box-sizing属性
box-sizing是定义元素盒尺寸大小的方式。它的属性值可以为
●content-box
●border-box
●inherit
●box-sizing: content-box;这是盒模型默认值，也就是上面提到的标准盒模型。计算方法为width/height=content，表示指定的宽度和高度仅限内容区域，边框和内边距的宽度不包含在内。
●box-sizing: border-box;计算方法为width/height=content+padding+border，表示指定的宽度和高度包含边框、内边距和内容区域。这就是上面提到的IE盒模型。
●box-sizing: inherit;继承父元素中box-sizing属性的值。
