2020-10-18 css10margin塌陷/外边距合并

margin塌陷/外边距合并

一.相邻块元素外边距合并
1.设置上面的盒子margin-bottom为20px,下面的盒子的margin-top为10px，两个盒子的外边距会出现合并现象
合并后两盒子的距离变为20px
2.解决方法：只给一个盒子加margin值

二.嵌套块元素垂直外边距合并（塌陷）
1.父元素没有上边的内边距和边框，则会与子元素的上边距合并，取较大者。
2.解决方法：
为父元素指定上边框；
为父元素指定上内边距；
为父元素添加overflow:hidden。

三.去掉列表的样式

 li{           
      list-style: none;       
           }

四.圆角边框

border-radius:百分数;

常见的设置把值设置为高度一半

五.盒子阴影
1.格式：
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影
2.实例：
box-shaow:0 15px 30px rgba(0,0,0,.1);