CSS盒子模型

1. 盒子模型

1. 盒子模型内容包括：content、padding、border、margin

1. padding内边距：在内容（content）之外边框以内）（边框到内容的距离），会撑大盒子

<1>padding：设置所有边距（注意下面说的顺序不能反）

1. 内边距连写：

只写一个的时候表示上下左右内边距；

写两个的时候表示上下、左右；

写三个的时候表示上、左右、下；

写四个的时候表示上、右、下、左

<2>padding-bottom：设置底边距

<3>padding-left：设置左边距

<4>padding-right：设置右边距

<5>padding-top：设置上边距

<6>padding只能影响盒子的大小不能影响盒子的位置

2. border边框

<1>border-width：边框宽度

<2>border-style：边框样式

<3>border-color：边框颜色

<4>border-radius：圆角边框

<5>border-shadow：对象阴影

<6>border-image：背景图片

3. margin外边距（盒子与盒子之间的距离）：不会影响盒子大小

<1>围绕在内容边框的区域就是外边距，外边距默认为是透明区域

<2>外边距接受任何长度单位、百分数值

<3>属性和padding的一致

<4>外边距连写

    只写一个的时候表示上下左右；

    写两个的时候表示上下、左右；

    写三个的时候表示上、左右、下；

    写四个的时候表示上、右、下、左

<5>垂直方向外边距合并：垂直方向的2个盒子，如果都设置了垂直方向的外边距，取的是设置的比较大的值

<6>外边距塌陷：嵌套的盒子，直接给子盒子设置垂直方向外边距的时候会发生外边距塌陷（也就是父级盒子会跟着一起移动）

解决方法（实现只有子盒子移动，父盒子不跟着移动）：

1. 给父盒子设置边框
2. 给父盒子设置overflow:hidden

2. 盒子模型分类

1. 标准盒：正常盒模型、怪异盒模型

<1>怪异盒模型：固定了盒子的大小（就算是加上了乱七八糟的一堆边框之类的东西也还是这么大，盒子总的大小固定）

1. 属性：box-sizing

值：content-box正常盒子模型     border-box：怪异盒子模型

2. 伸缩盒：新、旧

影响盒子宽度的因素：内边距、边框

盒子的宽度 = 定义的宽度 + 边框宽度 + 左右内边距

继承的盒子设置内边距如果不大于父级盒子的宽度的时候一般不被撑大（水平方向不会但是垂直方向会）：包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距不会撑大子盒子

盒子居中：就是内包div在外包div中居中用margin:0 auto；

这里的“边框”指的是边框的宽度，“填充”就是内边距