CSS3的Columns

今天药忘吃喽~ 2022-03-12 13:56 173阅读 0赞

大家都看过报纸，报纸的内容大都是按列排布的。那在前端布局中该怎么实现类似报纸一列一列布局的效果呢？

### 文章目录 ###

*  columns
 *  \`column-width\`和\`column-count\`

# columns #

首先要祭出的就是CSS3中新增的`columns`。`columns`是一个复合属性，由`column-width`和`column-count`组成。字面意思可以看出，一个是**列宽**，一个是**列数**。

语法格式就像是这样

columns: 200px 3;

举个例子来看一下：

<!DOCTYPE html>
    <html>
      <head>
        <meta charset='utf-8'>
        <title>Test</title>
        <style>
          .one{
         
            width: 700px;
            columns: 200px 3;
            margin-bottom: 20px;
          }
        </style>
      </head>
      <body>
        <div class='one'>
          一、去年成就
    
    国内生产总值增长6.6%，总量突破90万亿元。
    ....
        </div>
      </body>
    </html>

那么效果就会是这个样子

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]

# `column-width`和`column-count` #

虽然说`column-width`在`columns`这个复合属性中写在第一个，但是这却是个不折不扣的“二等公民”，因为在`column-width`和`column-count`同时都指定了的情况下。浏览器是先考虑`column-count`再考虑`column-width`的。

也就是说，浏览器是优先考虑列数，再考虑宽度的。看下面这个例子：

<!DOCTYPE html>
    <html>
      <head>
        <meta charset='utf-8'>
        <title>Test</title>
        <style>
          .one{
         
            width: 700px;
            columns: 200px 3;
            margin-bottom: 20px;
          }
          .two{
         
              columns: 200px 3;
          }
        </style>
      </head>
      <body>
        <div class='one'>
          一、去年成就
    
    国内生产总值增长6.6%，总量突破90万亿元。
    ....
        </div>
        <div class='two'>
          一、去年成就
    
    国内生产总值增长6.6%，总量突破90万亿元。
    ....
        </div>
      </body>
    </html>

在这个例子中，两个容器的区别在于一个有指定宽度，而另一个没有（即宽度为一行宽度）。效果如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 1]  
很显然，在宽度只有`700px`的容器中放入宽度均等的三列，每一列的宽度是不可能达到我们所指定的`200px`的。而下方那个未显式指定宽度的容器，很显然每列的宽度是不止`200px`的。这都说明了浏览器是优先考虑列数。

而如果我们把下方`columns`属性的列数去掉，效果如下：  
![在这里插入图片描述][20190306100143639.png]  
仅有在容器宽度足够且仅指定了列宽的时候，浏览器才会根据你所指定的宽度来分配列数（即每列宽度都是你所指定的）。

但是如果容器宽度不够，浏览器依然还是会先考虑列数。例如我把第一个容器的宽度设为`800px`，并只设置列宽为`300px;`，列数为3。浏览器会先考虑“三列，每列300px宽度，那么所需容器宽度就为900px”，但是因为容器宽度仅为`800px`，所以浏览器会把列数定为2，同时再适当拉伸每列宽度。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]: /images/20220312/fb071d9cd079457e99dffeeb342fa9ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 1]: /images/20220312/90602532e49445a8b56c9489eef4faca.png
[20190306100143639.png]: /images/20220312/151b286b53fd4f9b926a9fa8bfb1c6e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70 2]: /images/20220312/a0530b73ce4c481ba290a393bb006dc5.png