day 1 盒模型

一、什么是盒模型

每一个标签都是一个矩形，像一个盒子，所以HTML页面的布局可以理解为多个盒子组合嵌套排列而成。

二、盒模型的组成

标准盒子模型

width(宽度)

height(高度)

padding(内边距)：边框与内容之间的距离。可以给1-4个值，赋值是顺时针赋值，即上右下左，内边距可以增加盒模型面积。

border(边框)：边框也可以增加盒模型面积。其属性如下：

border	复合属性，三个值分别为宽度、样式、颜色
border-width	边框宽度
border-style	边框样式，none无边框，solid实线，dashed虚线，dotted点线，double双线
border-color	边框颜色
border-radius	边框角的弧度

margin(外边距)：盒子与盒子之间的距离。可以给1-4个值，赋值是顺时针赋值，即上右下左，可以增加盒模型面积。

设外边距时需要注意的问题：

1.叠压现象：常态下，兄弟标签间的上下间距以大值为准。

2.塌陷问题

产生原因：常态下，父标签的第一个子标签为块标签，并且使用了margin或margin-top.

解决方案：1）在父级使用border

                  2）不使用margin-top，在父级使用padding-top

                  3）在父级使用overflow:hidden

怪异盒子模型

盒子的padding和border都向内压缩，不会增加盒模型面积。

两种盒模型转换

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

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