css中盒模型的理解与整理

---

margin: 20px;
margin: 外边距
① 只写一个值： 表示四周的外边距都是这个值；
② 写两个值：第一个数表示上下，第二个数表示左右；
③ 写三个值：分别表示上、右、下，左边默认等于右边；
④ 写四个值：分别表示上、右、下、左，顺时针方向。
⑤ margin: 0 auto; 设置块级元素在父容器中水平居中！

padding: 20px;
padding： 内边距
* 设置方式与margin完全相同。
》》》》》 * 注意： 设置padding后，将导致div可见区域被撑大！使用时必须注意div所占的实际大小。

border: 10px solid blue;
border：边框
* 共接收三个属性： 边框的宽度、边框的样式、边框的颜色。
* 边框样式不能省略，其他的两个可以省略，但是原则上一般三个属性都要写。
* 三个属性的顺序，可以随意修改，没有先后要求。

---

                            【父容器高度塌陷问题】

                                原因： 当父盒子包裹子盒子，给子盒子添加margin-top时，子盒子和父盒子的上边线重合，而导致两个盒子同时下来。
			 * [解决办法]
			 1、 给父容器添加一定的padding-top。 会导致父容器产生不必要的padding区域，不推荐使用；
			 2、 给父容器添加一定的上边框。会导致父容器产生不必要的边框。
		         3、 给父容器或子容器添加float属性；
			 4、 给父容器添加overflow属性。推荐！！

---

border-radius: 260px;
border-radius:圆角
1、 border-radius共接收8个属性值，分别表示：
X轴（左上、右上、右下、左下）/Y轴（左上、右上、右下、左下）
eg:border-radius: 20px 30px 40px 50px/50px 40px 30px 20px;

			  2、 缩写形式：
			     省略Y轴，默认与X轴相等；
			    四角写不全，默认对角相等；
			     只写一个值，默认8个值均等；
			    eg: border-radius: 50px 20px;
			        =border-radius: 50px 20px 50px 20px;
			       =border-radius: 50px 20px 50px 20px/50px 20px 50px 20px;

			  3、 当圆角弧度>=正方形边长的一半时，将显示为原形

---

box-shadow: 0px 0px 10px 0px red;
box-shadow 盒子阴影
* 共接收6个属性值，用空格分隔：
* ① 水平阴影距离(必选)：可正可负。正数右移，负数左移；
* ② 垂直阴影距离(必选)：可正可负。正数下移，负数上移；
* ③ 阴影模糊半径(可选)：只能为正数，默认为0. 数值越大，阴影越模糊；
* ④ 阴影扩展半径(可选)：可正可负，默认为0. 数值增大，阴影扩大，数值减小，阴影缩小；
* ⑤ 阴影颜色(可选值)： 默认为黑色。
* ⑥ 内外阴影(可选值)： 默认为外阴影。 inset 表示内阴影。

---

outline: 10px solid red;
outline 外围线
* 在元素的边框以为，不占据任何空间，可能会覆盖四周的内容。
* 写法上，与边框完全相同。