盒子模型和怪异盒子模型

content的width 元素宽度  height 元素高度  可设置像素或者百分比或者其他单位

盒子模型的总宽度和总高度：

外总宽度 = width + padding + border + margin

外总高度 = height + padding + border + margin

内总宽度 = width + padding + border

内总高度 = height + padding + border

注意点：1.宽高属性仅适用于块级元素 2.需要考虑垂直外边距合并情况 3.如果一个盒子则会和父亲一样宽 占满父亲的宽度， 如果此盒子没有给定宽度 则padding 不会影响本盒子大小

border盒子边框 border样式 none没有边框 solid单实线 dashed虚线 dotted点线 double双实线

border-top/border-bottom/border-left/border-right 上下左右

border: 1px solid red;

padding 内边距

padding-top/padding-bottom/padding-left/padding-right 上下左右

padding: 3px; 上下左右内边距都是3px

padding: 4px 3px; 上下4px 左右3px

padding: 3px 4px 5px; 上3px 左右4px 下5px

padding: 3px 4px 5px 6px; 上右下左

margin 外边距

margin-top/margin-bottom/margin-left/margin-right

外边距实现盒子居中 margin: 0 auto; 盒子必须是块级元素且必须指定宽度

1.相邻块元素垂直外边距会合并(外边距塌陷)：上下元素之间的垂直间距为margin-bottom和margin-top之间的较大者

2.嵌套块元素垂直外边距合并：如果父元素没有上内边距和边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中较大者，即使父元素的上外边距为0也会发生合并

解决：可以为父元素定义1px的上边框或上内边距；可以为父元素添加overflow:hidden;

优先使用width 其次使用内边距padding 再次外边距margin

怪异盒子模型

box-sizing: border-box; 怪异盒子模型

box-sizing: content-box; 标准盒子模型

怪异盒子模型的宽高计算和标准盒子模型不一样，怪异盒子模型的content内容宽度会包含padding和border

其他：

图片标签 设置具体宽度后 可以设置高度auto 实现等比例自动计算

行高与高度设置相等的时候 文本垂直居中