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

最新推荐文章于 2023-02-13 15:26:01 发布

Adolph,

最新推荐文章于 2023-02-13 15:26:01 发布

阅读量208

点赞数

本文链接：https://blog.csdn.net/Addolp/article/details/105518358

版权

怪异盒模型：

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  简写