00、CSS布局

布局&响应式设计

0.1、正常布局流(Normal flow)

正常布局流就是不做任何布局控制，按照HTML的顺序（从左到右，从上而下）进行布局排列。正常布局流的几个关键点：

• 单个内容的布局，把内容放入盒子，加上盒子三件套（padding、boder、margin。
• 块级元素单独一行，按照顺序垂直组织，并按其margin分离。
• 内联元素会在一行水平排列，高度、宽度都取决于内容，直到空间不足另起一行。
• 相邻元素的margin会保留最大的那一个，就是盒子的外边距折叠。

🚫脱离文档流，就是从正常文档流中移除，文档流布局就不考虑他了，也就不会占用空间。初步可以这样理解，当然也不是绝对就没人管了，他的父容器还是管的，至于怎么管看下文《格式化上下文》。

• float浮动，会使元素脱离文档流，移动到容器左/右边，不会和其他元素重叠，如果位置冲突，后面元素会围绕浮动元素。
• position定位，绝对定位（absolute）、固定定位（fixed），会使元素脱离文档流，空出来的位置被后续元素代替。所以会出现和其他元素重叠的问题。

  0.2、display布局属性

  正常流中的所有元素都有一个**display**的值，这个属性允许我们更改默认的显示方式。display可用来设置多种布局方式，可以让不同元素类型（行、块元素）转换。

0.3、响应式设计

响应式网页设计（responsive /rɪˈspɒnsɪv/ web design，RWD），指的是允许 Web 页面适应不同屏幕宽度等因素，进行布局和外观的调整的一系列实践。它涵盖了很多 CSS 和 HTML 的功能和技术，现在基本上就是我们默认建设网站的方式。

如上图，基于媒体查询和现代布局，响应式设计成为当下的主流。通过媒体查询测试，针对不同的尺寸适配不同的CSS样式、图片，如调整字体大小、段落填充、菜单按钮布局、以及增大触摸按钮的大小等，让网页能够自适应各种设备尺寸、设备类型。

• 对于响应式图形，创建多种尺寸版本文件，基于媒体查询计算，选择合适尺寸的文件。或者改用新的 元素。

  <img srcset="elva-fairy-320w.jpg 320w,
                         elva-fairy-480w.jpg 480w,
                         elva-fairy-800w.jpg 800w" 
         sizes="(max-width: 320px) 280px,
                        (max-width: 480px) 440px,
                        800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

• 响应式排版，传统方式可以结合vw单位（视口的1%）、固定尺寸rem、px单位，或者基于媒体查询设置字体尺寸。

  .p1 {
    font-size: calc(1rem + 2vw);
  }
  @media screen and (min-width:1440px) {
        .p2 {
                font-size: 150%;
        }
  }

• 视口元标签，明确视口的宽度为设备的宽度，并初始化缩放比例为1，建议添加如下元素申明。

<meta name="viewport" content="width=device-width,initial-scale=1">

0.4、@媒体查询

媒体查询是指针对不同的设备、特定的设备特征或者参数进行定制化的修改网站的样式。媒体查询的标准语法： :::info media-type and (media-feature-rule) { / CSS规则 CSS rules go here / }
/ 注意关键字and后面的空格 / :::

• 媒体类型media-type：媒体的类型，如print印刷品、screen屏幕。
• 媒体表达式media-feature-rule)：
• CSS规则：通过媒体查询测试后的CSS样式。 | 属性 | 描述 | 值 | | —- | —- | —- | | @media | 媒体查询申明 | | | media-type | 媒体类型 |
  - all：所有设备
  - print：打印，网页打印的时候
  - screen：屏幕
  - speech：语音合成器
  | | 逻辑操作符 | 连接多个媒体查询语句 |
  - and：查询条件都满足的时候才生效
  - not：查询条件取反
  - only：整个查询匹配的时候才生效，常用语兼容旧浏览器，使用时候必须指定媒体类型
  - 逗号或者 or：查询条件满足一项即可匹配；
  | | media-feature-rule | 媒体特征规则，探测视口宽度是比较普遍的做法。 |
  - min-width：>=最小宽度
  - max-width：<=最大宽度
  - 更多媒体查询特征，如orientation（屏幕方向）
  | | @import | 导入外部css样式，支持媒体查询 | |

/* 媒体查询：在大尺寸模式启用flex布局，横向排列 */
@media screen and (min-width: 40em) {
        .nav ul {
                display: flex;
        }
        .nav li {
                flex: 1;
        }
}

响应式布局-代码示例（Codepen）

01、BFC/IFC 格式化上下文

所有元素都是一个盒子Box，盒子Box是页面布局的基本单位，盒子的不同类型决定了他的布局方式。一个页面由各种盒子的组合、嵌套形成。这些盒子有各不相同，有些是横排，有些竖排，有些是弹性，有些是网格，那他们是如何布局的呢？
格式化上下文（Formatting Contexts），就是把页面内容分为多个不同的格式化上下文（区域），每个格式化上下文都是一个独立的渲染（布局）区域。根据盒子的不同，格式化上下文分为多种（四种）类型，每种类型有自己的渲染规则，决定了其内部子元素的定位、排列方式。

实际上这些格式上下文也是相互嵌套的，各自负责各自区域进行渲染（布局）。

上图为个人理解，不一定都对。

1.1、BFC-块级格式化上下文

Block fomatting context （= block-level box + Formatting Context），块级格式化上下文，简称 BFC 。是一个独立的渲染（布局）区域，用于给块级盒子布局，包含的都是块级盒子。
🔸基本规则：

• 块级元素：首先BFC本身也是“块级盒子”，其内部也都是块级元素盒子。
• 不扰民：该区域的内部无论有什么东西、如何排列、在干什么，都不影响其外部，反之亦然。
• 垂直排列：BFC内部的Box垂直排列，从上往下依次排列。
• 垂直 margin 重叠：垂直方向间距由margin决定，同一BFC内相邻的Box的margin重叠，看谁的大就谁的。so，不是在同一个BFC则不会发生边距重叠。
• 左边距，BFC中每个盒子，都是从其父容器Box的左边界开始，包括浮动元素也是这样。
• 区域重叠：BFC区域不会与浮动盒子（float box）重叠。注意❗，这是解决浮动盒子重叠的关键。

• BFC高度：计算BFC高度时，会包含浮动元素（float box）。注意❗，这是解决高度坍塌、清除浮动的关键。

  🔸如何触发BFC？

• **html**根元素

• **float**浮动：left、right，脱离了文档流，自成一派。
• **overflow**溢出属性值不为 visible，常用 overflow: hidden
• **display**值：一个块级盒子
  • 行内块级盒子：inline-block
  • 表格类盒子：table、table-cell、table-caption、inline-table
  • 弹性盒子：flex 、inline-flex
  • 网格盒子：grid 、inline-grid

• position定位，absolute、fixed、sticky，脱离了文档流，自成一派。 :::warning 📢注意：上面这些场景会触发创建块格式化上下文，而不是这些盒子本身。 :::

  🔸使用场景

  BFC主要还是浏览器用来渲染布局用的，在实际开发中可以利用他的个规则做哪些事情呢？—— 处理浮动float布局的烂摊子！
  

  ❶ float导致的高度塌陷

  ❓ 问题：如果一个块级盒子如<div>中的元素都是float，他们都脱离了文档流，会导致盒子高度塌陷，就是高度没了。
  ✅ 解决方法：触发这个容器素的**BFC**，因为BFC在计算高度的时候会考虑浮动元素，浮动元素本身也是一个BFC。

  <div class="height-lose">
        <div>div1</div>
        <div>div2</div>
        <i>艰难的撑起了一点高度</i>
  </div>
  <style>
        .height-lose{
                border:2px solid;
                /* 建立BFC,防止高度塌陷 */
                overflow: hidden;
                /* display: table; */
        }
        .height-lose>div{
                float: left;
                height: 50px; width: 50px; margin: 5px;
                background-color: antiquewhite;                    
        }
  </style>

  
  

  ❷ float导致的盒子重叠/环绕

  ❓ 问题：如下示例，父容器<div>中，左侧子元素是浮动float布局，导致后面正常元素与他重叠了，看上去就是环绕效果。
  ✅ 解决方法：触发后面的的盒子为**BFC**，防止重叠。这种方法还可以用来实现左右两栏布局。

  <div class="left-right">
        <div>left：左浮动box左浮动box左浮动box</div>
        <div>right：我是右边，你挡着我了！我是右边。</div>
  </div>
  <style>
        .left-right div:first-of-type {
                float: left;
                width: 100px; background-color: #7F7;
        }
        .left-right div:last-of-type {
                width: 200px; background-color: #77FA;
                /* 右侧盒子触发BFC，防止被遮挡 */
                overflow: hidden;
                /* display: flex; */
        }
  </style>

  
  

  ❸ 清除float浮动

  由于浮动float会导致后续正常布局的元素布局不正常，主要原因就是浮动float盒子的父容器高度塌陷、元素重叠。因此解决方法也就是恢复其高度，触发其父元素的BFC即可，方法同上。

  ❹ 边距重叠

  ❓ 问题：如下示例，父容器<div>中，两个<p>元素的上下边距重叠了，有的时候这并不是项看到的。
  ✅ 解决方法：原本这两个元素是在同一个BFC里，解决方式就是把一个<p>元素放到另一个**BFC**里，拆散他们！

  <div class="margin-overlap">
        <p>p1：margin:30px 0</p>
        <div class="bfc">
                <p>p2：margin:30px 0</p>
        </div>
  </div>
  <style>
        .margin-overlap p {
                margin: 30px 0;
                padding: 0 10px;
                border: 2px solid skyblue;
                line-height: 30px;
        }
        .bfc {
                /* 建立BFC，就是要打破你们的水乳交融 */
                overflow: hidden;
                /* display:  inline-block; */
        }
  </style>

1.2、IFC：内联级格式上下文

Inline formatting context ，内联级格式上下文，简称 IFC 。包含了多个行内元素盒子，从左到右横向排列成一行。形成条件比较简单，当块级元素中仅包含行内元素盒子时，就形成了一个IFC。很多时候都是浏览器自动用匿名块进行包装形成IFC，如当IFC中有块级元素插入时，会拆分产生两个IFC。
🔸基本规则：

• 水平排列：IFC内都是行内元素盒子，水平方向排列。
• 垂直对齐vertical-align：底部、顶部对齐，或者文本基线，不同元素默认对齐方式不同。
• 行框（line box）：包含了一整行的行内盒子的矩形区域，被称为该行的行框（line box），宽度由内容决定，高度由CSS计算（最高的元素）。
• 多行：当一个IFC的内容比较多，会自动换行，会切分为多个行框（line box）。
• 水平间距：盒子之间水平margin、border、padding都有效，会推开其他盒子。
• 水平对齐text-align：当内容宽度小于行框时，水平渲染规则有 text-align来决定。所以一般可以用text-align:center;来设置水平居中。
• 垂直间距：会有用，但不会计算垂直的空间，不影响行高、不影响其他元素布局。
• 默认有间隙：行内元素盒子之间有一个默认间隙。

<p>我只是路过而已！</p>
<div class="inline-box">
        <span>span：padding:100px</span>
        <img src="../res/qq.png" alt="图片" height="100px">
        <p>p标签，inline-block</p>
</div>
<p>我是新的一个p盒子内容，我只是路过而已，别当到我了！</p>
<style>
        .inline-box {
                text-align: center; /*水平居中*/
                background-color: aliceblue;
                height: 130px;
                /*line-height: 130px;*/  /* 基于line-height 垂直居中，子元素会继承*/
                /* overflow: hidden;  */ /* 隐藏溢出部分内容 */
        }
        .inline-box * {
                background-color: #F666;
                vertical-align: middle; /* 基于行框高度 垂直居中*/
        }
        .inline-box p {
                display: inline-block;
                margin: 0;
        }
        .inline-box span{
                margin: 300px 0; /*margin没有卵用，如果为inline-block有用*/
                padding: 100px 0;  /*padding 会溢出，不影响其他元素布局，会重叠*/
              border: 2px solid blue;
        }
</style>

⁉️上面的示例中有如下结论：

• 行框的高度由长得最高的元素撑起来的。
• 垂直margin好像没什么用，padding、border部分有效，不会计算垂直空间，不影响其他元素布局。
• text-align: center;，让行内元素水平居中布局显示。
• vertical-align: middle;，可以让行内元素垂直居中显示（基于行框的高度，而不是父容器高度）
• line-height: 130px;，让行内元素基于line-height 垂直居中。

02、Flex弹性盒子(display:flex)IE11

Flexbox (IE11)是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写，用于设计横向或纵向的单向布局，父元素（flex容器）上应用display: flex ，所有直接子元素（flex项）都将会按照 flex 进行布局。
Flexbox布局需了解他的两根轴：

• 主轴：flex-direction 定义的方向，就是flex项排列的方向。
• 交叉轴：垂直与主轴的方向。

<style>
    .flex {
        display: flex;
        flex-flow: row wrap;
        align-items: stretch;
        justify-content: stretch;
    }
    /*注意这里，一般用子代选择器*/
    .flex>div {
        flex: 1 200px;
        background-color: #9be6bd;
        padding: 10px;
    }
    .flex>div:nth-child(even){                
        background-color: #eeb2cb;
    }
</style>
<div class="flex">
    <div><b> div1：</b>
        <p>Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写</p>
    </div>
    <div>div2：</div>
    <div>div3：</div>
    <div>div4：</div>
    <div>div5：</div>
</div>

下面为基于flex布局的栅格布局，可以自动等比均分列网格，比float浮动更方便一些。

.row {
  display: flex;
}
.col {
  margin-left: 2.08333333%;
  margin-bottom: 1em;
  width: 6.25%;
  flex: 1 1 auto;
  background: rgb(255,150,150);
}

03、Grid网格布局(display:grid)

 [**grid **](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Grids)布局是一个二维布局系统，通过行列设置定义一个网格，然后子元素按照顺序排列网格，或者设置其行列坐标。一个网格通常具有许多的列（**column**）与行（**row**），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（**gutter** /ˈɡʌtər/水沟）。

repeat(auto-fill,80px minmax(200px, auto)) ; |

🔸隐式网格

通过grid-template-columns 、 grid-template-rows创建的网格为显示网格，子元素较多时会自动换行进行网格排列，这部分称为隐式网格，隐式网格的大小默认是auto（根据内容自适应），可以通过grid-auto-rows、grid-auto-columns来设置其大小。

🔸网格分割线

网格线是从头开始的，一般来说n行有n + 1根水平网格线，m列有m + 1根垂直网格线。

<style>
        .from{
                display: grid;  grid-gap: 5px;
                /* height: 300px; */
                /* 设置行列网格 */
                grid-template-columns: repeat(2,80px minmax(180px,1fr));
                grid-template-rows: repeat(3,minmax(40px,auto));
                grid-auto-rows: minmax(40px,auto);
                /* 合并的写法 */
                grid-template: repeat(3,minmax(40px,auto)) / repeat(2,80px minmax(180px,1fr));
        }
        .from label,.from input,from textarea{
                box-sizing: border-box;
                padding: 3px;   margin: 0px;
                background-color: lightyellow;
        }
        .from label{
                display: flex;  padding: 0 3px;
                align-items: center;    justify-content: right;                
        }
        .from>.form-cell{
                display: flex;  padding: 0 10px;            
                align-items: center;    background-color: lightyellow;
        }
        .from>textarea{
                grid-column: 2/5;   grid-column: 2/span 3;
        }
</style>
<div class="from">
        <label for="">姓名：</label><input type="text">
        <label for="">籍贯：</label><input type="text">
        <label for="">性别：</label>
        <div class="form-cell">
                <input type="radio"><label for="">男</label>&nbsp;&nbsp;
                <input type="radio"><label for="">女</label>
        </div>
        <label for="">生日：</label><input type="date">
        <label for="" >简介：</label><textarea name="" id="" cols="100" rows="5">1111</textarea>
</div>

🔸区域网格命名

用“名字”来划分并指定区域，用法类似网格线序号，用来做页面布局很轻松。

• 区域字符命名，行内空格分割，行间引号分割。
• 相同命名的格子自动合并单元格，且必须为一个矩形。
• 所有名字只能出现在一个连续的区域，不能在不同的位置出现。
• 使用.符号，让一个格子留空。

  <style>
        .page{
                display: grid;
                /*定义2列、3行*/
                grid-template-areas: "header header" "left right" "footer footer";
                grid-template-rows: 40px 1fr 40px;
                grid-template-columns: minmax(100px,200px) auto;
                height: 300px; margin: 10px;
        }
        .page>.header{grid-area: header;}
        .page>.left{grid-area: left;background-color: lemonchiffon;            }
        .page>.right{grid-area: right;background-color: rgb(170, 236, 238);            }
        .page>.footer{grid-area: footer;}
        .page>div{background-color: aquamarine;padding: 10px;            }
  </style>
  <div class="page">
        <div class="header">header</div>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="footer">footer</div>
  </div>

  

04、float浮动布局

float属性让素左右浮动起来，会改变元素本身和跟随他后面的（不管层级、类型）其他正常流布局元素的行为。元素从正常布局流 (normal flow) 中移除，会浮动到父容器的左侧或右侧，这时候他后面的正常布局的元素围绕该浮动元素，并填满其右侧（或左侧）的空间。

在grid网格布局支持之前，float是实现页面布局的重要手段，他也存在一广泛的问题。 :::warning

• 使用float布局必须精心计算他们的宽度，还要考虑他们的padding、border、margin，推荐启用代替IE盒模型，避免不受控的溢出。
• 而且他本质上还是一维的，不支持跨行。
• 浮动使用的越复杂，清除也会越复杂，应尽早清除，避免给后面的元素造成麻烦。推荐在浮动布局后添加一个空的清除浮动div。 ::: 下面的示例代码就是典型的传统基于float浮动实现的栅格布局，把列等分为12份，并穷举创建横跨2-12列的样式类，

  body {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
  }
  *{box-sizing: border-box;}
  /* row用来清除row之间的浮动影响 */
  .row {
  clear: both;
  }
  .col {
  float: left;
  margin-left: 2.08333333%;
  width: 6.25%;
  }
  .col.span2 { width: calc((6.25%*2) + 2.08333333%); }
  .col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
  .col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
  /*...*/
  .col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
  /* 用来作为空列的偏移*/
  .offset-by-one {
  margin-left: calc(6.25% + (2.08333333%*2));
  }

  <style>
    .form-float *{ box-sizing: border-box; }
    .form-float>.row{
        clear: both;    padding: 5px 0;
    }
    .form-float>.row>.col{
        float: left;
        background-color: antiquewhite; padding: 5px; 
    }
    .form-float>.row>.col.lab{
        width: 15%;
        text-align: right;
    }
    .form-float>.row>.col.span1{ width: 35%; }
    .form-float>.row>.col.span2{ width: 85%; }
    .clear{ clear: both; } 
  </style>
  <form class="form-float">
    <div class="row" id="r1">            
        <label for="" class="col lab" id="l1">姓名：</label>    <input type="text" class="col span1" value="杜牧">
        <label for="" class="col lab">籍贯：</label><input type="text" class="col span1" value="唐">
    </div>
    <div class="row">
        <label for="" class="col lab">性别：</label>
        <div class="col span1">
            <input type="radio"><label for="">男</label>&nbsp;&nbsp;
            <input type="radio"><label for="">女</label>
        </div>
        <label for="" class="col lab">生日：</label><input type="date" class="col span1">
    </div>
    <div class="row">
        <label for="" class="col lab">简介：</label>
        <textarea name="" id="" cols="100" rows="5" class="col span2">停车坐爱枫林晚，霜叶红于二月花</textarea>
    </div>
  </form>
  <div class="clear"></div>

  

  🔸清除浮动

  脱离正常的文档流，并不会占据文档流的位置，如果一个父元素下面都是浮动元素，则会导致父元素的高度坍塌（主要原因）。从而使得后面的正常元素布局出现不希望的情况，常见2中清除方法：

/* 恢复父元素上的BFC */
.parent {
        overflow: hidden;
}
/* 在父元素上使用清除clearfix：clear + 伪元素::after实现，附加一个空的块元素并清除 */
.clearfix::after {
        content: "";
        display: block;
        clear: both;
}

:::success 不理解float为什么要这么设计？？？😂😂😂 :::

05、position定位

position 精准设置盒子中的盒子的位置，正常布局流中，默认为 static ，使用其它值会引起元素不同的布局方式。结合偏移top, bottom, left, right使用，如果不设置偏移，则元素还是原来的位置。 :::warning ❗定位并不是一种常规的布局方式，主要用于一些特殊位置的实现。 ::: | 属性/值 | 描述 | 值 | | —- | —- | —- | | position | 设置元素定位方式 | | | static | 静态定位，就是正常文档流位置，所有元素的默认值。此时设置偏移无效 | position: static; | | relative | 相对定位 (relative /ˈrelətɪv/)，在文档流的基础上，相对于自己位置的偏移定位，位置保留。不影响其他元素，可能会和其他元素重叠。 | position: relative; | | absolute | 绝对定位 (absolute /ˈæbsəluːt/)，脱离文档流，就像单独一个图层中，完全不干扰其他元素布局。相对于最近一个非static定位的父元素（直到根元素），常用于弹出层（消息、菜单） | position: absolute; | | fixed | 固定定位，和absolute基本一样，脱离文档流，定位的对象是浏览器视口，可实现不滚动的固定内容。 | position: fixed; | | stickyIE🚫 | 粘性定位 (sticky /ˈstɪki/ 黏性的)，静态定位+固定定位 fixed的结合体，先静态定位，当元素满足预定条件时（达到相对于视口的定位），进入固定定位fixed模式。
注意：sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的父元素上 | position: sticky; | | top | 顶部偏移：元素的上外边距边界与其包含块上边界之间的偏移。只用于定位 | | | bottom | 底部偏移，只用于定位。若与top同时设置，都会生效，如有固定height则top生效 |
| | left | 左侧偏移，只用于定位 |
| | right | 右侧偏移，只用于定位 |
| | z-index | z轴坐标，用于元素上下层叠顺序控制，默认auto=0，值越大层级越高。 | z-index:-1; |

<style>
        .btn-top{
                display: block;
                width: 3em; height: 3em; line-height: 3em;
                border-radius: 1.5em;  opacity: 0.5;
                text-align: center; text-decoration: none;
                background-color: #eeb2cb;
                /* 定位 */
                position: fixed;
                bottom: 10px; right: 10px;
        }
        .btn-top:hover{
                opacity: 1; background-color: coral;
        }
</style>
 <a href="#" class="btn-top" title="回到顶部">Top</a>

06、表格布局(display:table)

和

<style>
        .form-table {
                display: table;
                width: 100%; border: 1px solid lightgray;
        }
        .form-table .trow {
                display: table-row;
                background-color: linen;
        }
        .form-table .trow>label{
                display: table-cell;
                width: 100px; line-height: 40px;
                text-align: right;
        }
        .form-table .trow>input,.form-table textarea{
                display: table-cell;
                width: 90%;
        }
</style>
<div class="form-table">
        <div class="trow">
                <label for="" id="l1">姓名：</label><input type="text" value="杜牧">
                <label for="">籍贯：</label><input type="text" value="唐">
        </div>
        <div class="trow">
                <label for="">性别：</label>
                <div>
                        <input type="radio"><label for="">男</label>&nbsp;&nbsp;
                        <input type="radio"><label for="">女</label>
                </div>
                <label for="">生日：</label><input type="date">
        </div </div>
        <div class="trow">
                <label for="">简介：</label>
                <textarea name="" id="" rows="4" colspan="3">不知道怎么实现跨行</textarea>
        </div>
</div>

07、column-count多列布局

多列布局是一种把内容按列排序的布局方式，通过column-count设置列的数量，使用column-width设置列宽，两者可都设置或值设置任意一个即可。跟flex布局有点像，不过他们的元素跨行（截断）分配方式不一样，column-count更合适文档排版（报纸的排版）。

column-count对容器里面内容的列拆分是自动进行的，容易造成一个元素被折断（跨列显示了），可以通过break-inside对特定内容进行换行方式设置。

<style>
        .mulcol{
                column-count: 2;
                column-width: auto;
                column-gap: 15px;
                column-rule: 4px double red;
                background-color: antiquewhite;
                padding: 8px 10px;
        }
        .article{
                background-color: limegreen;
                break-inside: avoid;
                /* 设置旧属性page-break-inside 增强兼容性*/
                page-break-inside: avoid;
        }
</style>
<div class="mulcol">
        <div class="article">            
                <h2>山行</h2>
                <p>远上寒山石径斜，白云深处有人家。停车左爱枫林晚，霜叶红于二月花。</p>
        </div>
        <div class="article"> 
                <h2>望庐山瀑布</h2>
                <img width="200px" src="http://n.sinaimg.cn/translate/166/w991h775/20181129/5biI-hpevhcm3526810.jpg" alt="">
                <p>日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。</p>
        </div>
</div>