[分享]css中布局模型的包括

CSS布局模型是CSS中非常重要的一部分，通过使用不同的布局模型，我们可以实现网页布局的各种效果。CSS中共有四种布局模型，分别是标准文档流模型、浮动模型、弹性布局模型和网格布局模型。 / 标准文档流...

CSS布局模型是CSS中非常重要的一部分，通过使用不同的布局模型，我们可以实现网页布局的各种效果。CSS中共有四种布局模型，分别是标准文档流模型、浮动模型、弹性布局模型和网格布局模型。

 /* 标准文档流模型 */
    div {
        width: 200px;
        height: 200px;
        background-color: yellow;
    }

    /* 浮动模型 */
    div {
        width: 200px;
        height: 200px;
        background-color: yellow;
        float: left;
    }

    /* 弹性布局模型 */
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 网格布局模型 */
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
    } 

标准文档流模型是CSS中最基础的布局模型，其中元素按照其在HTML文档中的顺序依次排列。在标准文档流模型中，元素默认由上至下，逐行排列，每个元素独占一行。

浮动模型是一种常见的布局模型，其中元素浮动到容器的一侧，以留下空白的区域。浮动元素的宽度默认由内容决定，它们会自动从左至右排列，直至容器被填满，多余的元素将被挤下去。

弹性布局模型是CSS3中新增的基于弹性盒模型的布局方法，其中元素根据所设置的属性和值，灵活地进行布局和排列。在弹性布局模型中，容器被分割成行和列，子元素沿着主轴或侧轴进行排列，可以通过justify-content和align-items等属性设置排列方式。

网格布局模型是CSS3中又一种新的布局方法，它基于一个二维的网格来排列元素，其中容器被分成了多行和多列，子元素则可以在任何位置上进行放置。网格布局模型中，可以使用grid-template-columns和grid-template-rows等属性来设置行列的宽度和高度，同时也可以使用grid-column和grid-row等属性来指定元素放置的位置。