margin
-
概念：盒子的外边距，盒子和盒子之间的距离
-
设置方式：
/* 单独设置 */ margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; /* 复合属性 */ //一个值 上下左右 margin: 20px; //两个值 上下 左右 margin: 10px 20px; //三个值 上 左右 下 margin: 10px 20px 30px; //四个值 上 右 下 左 margin: 10px 20px 30px 40px ; -
margin使用技巧：
margin:0 auto：上下外边距为0，左右自适应，- 注意：auto只能左右自适应，上下不生效。如果需要垂直居中，则可以单独使用
margin-top:calc((大盒子高度 - 小盒子高度) / 2)
- 注意：auto只能左右自适应，上下不生效。如果需要垂直居中，则可以单独使用
-
margin的特点：
-
margin-top的传递性：小盒子找不到大盒子的边界时，给小盒子设置
margin-top，大盒子会和小盒子一起往下移动
-
解决传递性：
- 给大盒子添加边框，但是会影响盒子实际大小
- 给大盒子设置内边距，但是会影响盒子实际大小
- 给大盒子添加属性
overflow:hidden，使用BFC区域的特点解决margin-top的传递性
-
-
mrgin的重叠性：在垂直方向上具有重叠性，以值更大的为准。水平方向上没有重叠性，两个盒子外边距直接相加即可 -
对于行级元素，margin左右有效，上下无效
-
