外边距折叠

块级元素的上外边距和下外边距有时候会合并为一个外边距，其大小取于其中的最大者

上图中，header和main的上下间距是20px，main和footer之间的间距是30px

嵌套折叠

如果在父元素与其嵌套的后代元素间没有边距、内边距、行内内容，也没有创建块格式化上下文，父子外边距会折叠

上图，h1和p标签默认有外边距，这两个外边距冲出父元素和父父元素，成为父元素的外边距

也就是h1的外边距成为header的外边距，p的外边距成为section的外边距后又成为main的外边距

然后main和header的外边距再发生折叠，取header的外边距值为外边距

解决方案：

1.嵌套折叠发生的条件是父元素与其嵌套的后代元素间没有边距、内边距、行内内容，也没有创建块格式化上下文，破坏其一即可避免发生嵌套折叠

如给元素加border，添加padding

2.给元素添加overflow:hidden/auto;

空块折叠

如果一个块级元素间不包含任何内容，并且在其margin-top与margin-bottom之间没有边内边距、行内内容、height、min-height将两者分开，则该元素的上下外边距会折叠

上图中，因为.empty的元素里面没有内容，上下外边距会折叠为10px

解决方法：

加内容，加border，加padding，加overflow:hidden/auto

外边距折叠只针对上下外边距，不针对左右外边距

常见样式

表格样式

border-collapse:collapse，取消表格之间的塌陷
元素:nth-child(odd/even/3n+1)，可选中odd奇数列，even偶数列，3n+1列，or其它

背景样式

        .hero{
            height: 280px;
            background:/* lightblue */ url() left center no-repeat,
            url() right center no-repeat;
            /* background-size: cover; */
        }

background中可以设置两个url，这时候不能设置背景色
背景色可覆盖图片没有覆盖的地方
以上面代码为例，left是指水平，center是指垂直
background-size:contain/cover;

contain—容器完整包含图片，可能出现空白 cover—容器被图片铺满，图片可能显示不完全

渐变linear-gradient

background: linear-gradient(to top right, pink, white);

上面设置渐变的代码，第一个参数是方向设置，可同时设置两个（如往右上角渐变）也可只设置一个；后面是两个颜色的渐变，颜色可同时设置多个，也可以不设置，默认从上往下

盒子阴影box-shadow

box-shadow: 2px 2px 2px 1px palevioletred;

从左到右分别是x轴偏移量、y轴偏移量、阴影模糊半径、阴影扩散半径和阴影颜色

行高line-height

一行文字占据的垂直空间

line-height:1.5/20px/150%;

1.5—当前元素font-size的1.5倍，该倍数会继承给后代；20px—占据高度固定值，该值会继承给后代；150%—当前元素font-size的150%，会计算具体值并把具体值继承给后代

overflow，控制容器溢出

    <div class="hero">
        <p>哈哈哈</p>
        <p>哈哈哈</p>
        <p>哈哈哈</p>
        <p>哈哈哈</p>
        <p>哈哈哈</p>
        <p>哈哈哈</p>
    </div>
    <style>
        .hero{
            height: 100px;
            border: 1px solid burlywood;
            margin: 10px;
        }

如上面代码，内容溢出容器，这时候使用overflow属性控制溢出

overflow: hidden——隐藏溢出的内容
overflow: scroll——添加滚动条，滚动显示溢出内容，无论是否溢出，滚动均会出现，且同时出现xy轴
overflow-y: scroll——只在y轴添加滚动条
overflow: auto——浏览器判断是否需要添加滚动条
overflow: visible——溢出仍然展示，与不添加overflow属性的效果是一样的

显示隐藏

display:none 将元素从普通流移除，不占据位置
opacity:0 将元素变为透明，但仍然占据位置
visibility:hidden —— 在普通流中，看不见，但仍占据位置

CSS外边距折叠，常见样式