盒模型（怪异，弹性盒模型）多列布局

最新推荐文章于 2022-04-30 12:58:18 发布

原创最新推荐文章于 2022-04-30 12:58:18 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

本文深入解析了CSS中的盒模型概念，包括常规盒模型和怪异盒模型（IE盒模型），并详细阐述了如何通过box-sizing属性来触发不同类型的盒模型。此外，文章还介绍了多列布局的实现方式，涵盖了列数、列间距、列分割线等关键属性，以及如何控制列高和跨列显示。

怪异盒模型：

box-sizing:
属性值：
box-sizing:content-box; 常规盒模型
box-sizing:border-box: 怪异盒模型（IE盒模型）

怪异盒模型：
    触发怪异盒模型：
        box-sizing:border-box;


    怪异盒模型特点：padding和border都会在元素的宽高的内部，不会把盒子撑大。

弹性盒模型：

box-sizing:
属性值：
box-sizing:content-box; 常规盒模型
box-sizing:border-box: 怪异盒模型（IE盒模型）

怪异盒模型：
    触发怪异盒模型：
        box-sizing:border-box;


    怪异盒模型特点：padding和border都会在元素的宽高的内部，不会把盒子撑大。
    <!DOCTYPE html>

Document

### 多列布局：多列属性：

    1：列数：
        column-count:;

    2:列间距：
        column-gap:;

    3:列分割线：
        column-rule:

    4:控制每一列的列的高度是否统一：
        column-fill:;
            auto     列高度自适应内容
            balance  有列的高度以其中最高的一列统一

    5:跨列：
        column-span:all;

    6:列宽
        column-width:  

    7:columns: 7 
        column-count 和 column-width  简写