CSS 常见布局方式学习及总结-孤勇者社区

关于很多前端er 来说，CSS 规划应该是日常工作中碰到最多的东西之一。一个好的规划不只能够减少代码的书写量，而且有助于我们了解页面构造，更好地完成多种页面效果。而普通状况下我们对页面规划最常用到的当属float、display、position 这三个属性了，本文将对这三个属性做简单的阐明并给出几种常见的规划方式。

float、display、position 根本学问点

float——控制元素浮动

none ：元素不浮动；
left ：元素左浮动；
right ：元素右浮动。

display——控制元素生成的框的类型

none ：元素不显现；
inline ：内联显现；
inline-block ：行内块元素；
block ：块元素；
flex ：弹性盒子，响应式地完成页面规划，-webkit-flex；inline-flex。

position——控制元素定位方式

static ：默许值，没有定位。
relative ：相对定位，相对其正常位置定位；
absolute ：绝对定位，相关于其第一个非 static 定位的父元素；
fixed ：绝对定位，相关于可视窗口定位。

常规规划方式

要了解页面常规规划，首先我们要晓得：

一切的 HTML 元素默许都是不浮动的；
一切的 HTML 元素默许分为内联元素和块元素；
一切的 HTML 元素默许定位方式是跟随文档流的。

如上图所示，普通状况下我们会选择运用块元素 (display: block;) 固定好规划的大致框架，灰色局部，然后在其内添加内联元素 (display: inline;)，绿色局部，由于内联元素无法控制宽高等属性，关于一些特殊的需求可能需求将其转换为行内块元素 (display: inline-block;) 停止操作，橘色局部。关于需求左右排列的，我们普通会运用 float 属性控制其左右浮动。普通我们不会修正元素的 position 属性，而关于一些特殊请求，比方侧栏固定，底部广告条，蓝色局部。可能需求修正 position 为 fixed 或其他值使其相关于其定位参照偏移一定位置停止定位。

特殊规划方式

常规的规划方式能够对付大局部的日常工作，关于一些略微学习过前端的同窗应该问题不大，而且常规的规划方式普通固定页面大小，无法做到有效自顺应。针关于此，这里主要引见几种特殊的规划方式。

Flex 弹性规划

flex 规划是一种弹性规划，每一个 Flex 容器默许存在两根轴：程度的主轴和垂直的穿插轴。其内部元素依据这两条轴停止排列，运用 Flex 规划除了要设置 display: flex; 或者 display: inline-flex; 将其转换为 Flex 规划外，还需求留意一下几个属性：

父容器属性

flex-direction：控制主轴（元素排列）方向，row (→)| row-reverse (←)| column (↓)| column-reverse (↑) ；
flex-wrap：控制元素能否换行，nowrap (不换行)| wrap (换行)| wrap-reverse (首行在下) ；
flex-flow：flex-direction 和 flex-wrap 的简写方式，默许 row nowrap ；
justify-content：控制项目在主轴上的对齐方式，flex-start (起点对齐)| flex-end (终点对齐)| center (居中对齐)| space-between (两端对齐，项目距离)| space-around(两端对齐，周围距离) ；
align-items：控制穿插轴上的对齐方式，flex-start (起点对齐)| flex-end (终点对齐)| center (居中对齐)| baseline (基线对齐)| stretch(占满容器) ；
align-content：控制多根轴线的对齐方式，flex-start (起点对齐)| flex-end (终点对齐)| center (居中对齐)| space-between (两端对齐，项目距离)| space-around(两端对齐，周围距离)| stretch(占满容器) ；

子项目属性

order：控制项目的排列次第，整数；
flex-grow：控制项目的放大比例，设置比例可控制不同项目空间占比；
flex-shrink：控制项目的减少比例，设置比例可控制不同项目空间占比；
flex-basis：控制分配多余空间之前，项目占领的主轴空间；
flex：flex-grow, flex-shrink 和 flex-basis的简写；
align-self：控制当前项目有与其他项目不一样的对齐方式；

实例-自顺应平均排布

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flex 实例-自顺应平均排布</title>
        <style>
            body{
                max-width: 1000px;
                height: auto;
                margin: auto;
                border: 0;
                padding: 0;
            }
            .adaptive-box{
                display: inline-flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-around;
                align-content: flex-start;
                align-items: center;
                width: 100%;
                height: 40px;
                line-height: 40px;
                background-color: #eee;
            }
            .adaptive-item{
                width: 100%;
                height: 100%;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>Flex 实例-自顺应平均排布</h1>
        <div class="adaptive-box">
            <div class="adaptive-item" style="background: #20B2AA;">项目名</div>
            <div class="adaptive-item" style="background: #ffaaff;">项目名</div>
            <div class="adaptive-item" style="background: #55aaff;">项目名</div>
            <div class="adaptive-item" style="background: #ffff7f;">项目名</div>
            <div class="adaptive-item" style="background: #aaff00;">项目名</div>
            <div class="adaptive-item" style="background: #ffaa00;">项目名</div>
        </div>
    </body>
</html>

demo地址：https://demo.zibuyu.life/frontend/html-css-js/css-layout/css-flex-layout.html

实例-圣杯规划

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flex 实例-圣杯规划</title>
        <style>
            body{
                max-width: 1000px;
                height: auto;
                margin: auto;
                border: 0;
                padding: 0;
            }
            .grail-box{
                display: flex;
                flex-direction: row;
            }
            .grail-left{
                order: -1;
                flex-basis: 120px;
                height: 360px;
                background: lightseagreen;
            }
            .grail-content{
                flex-grow: 1;
                height: 1000px;
                background: lightcoral;
            }
           .grail-right{
                flex-basis: 120px;
                height: 360px;
                background: lightgreen;
            }       
        </style>
    </head>
    <body>
        <h1>Flex 实例-圣杯规划</h1>
        <div class="grail-box">
            <div class="grail-left"></div>
            <div class="grail-content"></div>
            <div class="grail-right"></div>
        </div>
    </body>
</html>

demo地址：https://demo.zibuyu.life/frontend/html-css-js/css-layout/css-flex-layout-2.html

实例-程度等高瀑布流规划

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flex 实例-程度等高瀑布流规划</title>
        <style>
            body{
                width: 800px;
                height: auto;
                margin: auto;
                border: 0;
                padding: 0;
            }
            .waterfall-box{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                width: auto;
                margin: auto;
                border: 0;
                padding: 15px;
                background-color: #eee;
            }
            .waterfall-box::after{
                content: "";
                flex-grow: 99999;
            }
            .waterfall-item{
                flex-grow: 1; /* 让图片一直填满一整行 */
                margin: 5px;
            }
            .waterfall-item img{
                display: block;
                width: auto;
                height: 150px;
                object-fit: cover; /* 图片顺应容器并且不裁切 */
                min-width: 100%;
            }
        </style>
    </head>
    <body>
        <h1>Flex 实例-程度等高瀑布流规划</h1>
        <div class="waterfall-box">
            <div class="waterfall-item">
                <img src="img/1.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/2.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/3.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/4.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/1.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/1.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/2.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/3.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/2.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/4.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/2.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/3.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/2.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/3.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/2.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/4.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/2.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/3.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/2.jpg" >
            </div>
            <div class="waterfall-item">
                <img src="img/4.jpg" >
            </div>
        </div>
    </body>
</html>

demo地址：https://demo.zibuyu.life/frontend/html-css-js/css-layout/css-flex-layout-3.html

Grid 网格规划

Grid 规划是一种网格规划，它将网页划分红一个个网格，能够恣意组合不同的网格，做出各种各样的规划。不过目前该规划方式兼容性存在一定问题，慎用！同样的，处置定义父容器 display: grid; 或者 display: inline-grid; 将其转换为 Grid 规划方式外，我们还需求理解如下属性：

父容器属性

grid-template-columns：控制网格的列宽，px、%、fr、repeat()、auto-fill、minmax()、auto、[]；
grid-template-rows：控制网格的行高，px、%、fr、repeat()、auto-fill、minmax()、auto、[]；
grid-row-gap：控制网格的行间距；
grid-column-gap：控制网格的列间距；
grid-gap：grid-column-gap和grid-row-gap的简写；
grid-template-areas：定义区域，一个区域由单个或多个单元格组成；
grid-auto-flow：控制单元格排列次第，row (按行)| column (按列)| row dense (行稠密)| column dense (列稠密)；
justify-items：控制单元格内容的程度位置，start | end | center | stretch ；
align-items：控制单元格内容的垂直位置，start | end | center | stretch ；
place-items：align-items 和 justify-items 的简写；
justify-content：控制整个内容区域在容器里面的程度位置，start | end | center | stretch | space-around | space-between | space-evenly ；
align-content：控制整个内容区域在容器里面的垂直位置，start | end | center | stretch | space-around | space-between | space-evenly ；
place-content：align-content 和 justify-content 的简写；
grid-auto-columns：控制阅读器自动创立的多余网格的列宽；
grid-auto-rows：控制阅读器自动创立的多余网格的行高；
grid-template：grid-template-columns、grid-template-rows 和 grid-template-areas的简写；
grid：grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 的简写。

子项目属性

grid-column-start：指定单元格列的起始位置网格线（左）；
grid-column-end：指定单元格列的终止位置网格线（右）；
grid-row-start：指定单元格行的起始位置网格线（上）；
grid-row-end：指定单元格行的终止位置网格线（下）；
grid-column：grid-column-start 和 grid-column-end 的简写；
grid-row：grid-row-start 和 grid-row-end 的简写；
grid-area：指定项目放在哪一个区域，还可用作 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的简写；
justify-self：控制当前单元格内容的程度位置，start | end | center | stretch ；
align-self：控制当前单元格内容的垂直位置，start | end | center | stretch ；
place-self：align-self 和 justify-self 的简写。

实例-嵌套盒子规划

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Grid 实例-嵌套盒子规划</title>
        <style>
            body{
                width: 1000px;
                height: 800px;
                margin: auto;
                border: 0;
                padding: 0;
            }
            .grid-container{
                display: grid;
                grid-template-columns: 2fr 1fr 1fr;
                grid-template-rows: 2fr 1fr 1fr;
                grid-gap: 10px;
                grid-auto-flow: row dense;
                place-items: stretch stretch;
                place-content: stretch stretch;
                width: 800px;
                height: 400px;
                margin: auto;
                border: 5px solid #f00;
            }
            .grid-item{
                display: block;
                height: 100%;
                width: 100%;
                font-size: 30px;
                text-align: center;
            }
            .item-1{
                grid-column: 1/2;
                grid-row: 1/4;
                background-color: #20B2AA;
            }

            .item-2{
                grid-column: 2/4;
                grid-row: 1/2;
                background-color: #ffaa00;
            }
            .item-3{
                grid-column: 2/3;
                grid-row: 2/4;
                background-color: #55aaff;
            }
            .item-4{
                grid-column: 3/4;
                grid-row: 2/3;
                background-color: #ff557f;
            }
            .item-5{
                grid-column: 3/4;
                grid-row: 3/4;
                background-color: #55ff00;
            }
        </style>
    </head>
    <body>
        <h1>实例-嵌套盒子规划</h1>
        <div class="grid-container">
            <div class="grid-item item-1">1</div>
            <div class="grid-item item-2">2</div>
            <div class="grid-item item-3">3</div>
            <div class="grid-item item-4">4</div>
            <div class="grid-item item-5">5</div>
        </div>
    </body>
</html>

demo地址：https://demo.zibuyu.life/frontend/html-css-js/css-layout/css-grid-layout.html

Multi-column 多列规划

Multi-column 多列规划是 CSS3 中新呈现的一种规划方式，它能轻松的让文本呈现多列显现，就像报纸上的新闻排版一样。与 Flex 及 Grid 不同的是，Multi-column 规划不会影响子元素在其文档流中的正常显现方式，最后 Muti-column 需求理解的属性有：

column-count：控制列的数量；
column-width：控制列的宽度，最小宽度；
columns：column-count 和 column-width 的简写；
column-gap：控制列与列之间的间隙；
column-rule-color：控制列与列之间的边框颜色；
column-rule-style：控制列与列之间的边框款式；
column-rule-width：控制列与列之间的边框宽度；
column-rule：column-rule-color 、column-rule-style 和 column-rule-width 的简写；
column-span：控制对象元素能否横跨一切列，可应用于子项目；
column-fill：控制内容是如何分割成列；

实例-垂直等宽瀑布流规划

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Multi-column 实例-垂直等高瀑布流规划</title>
        <style>
            body{
                width: 800px;
                height: auto;
                margin: auto;
                border: 0;
                padding: 0;
            }
            .waterfall-box{
                column-count: 3;
                column-width: auto;
                column-gap: 20px;
                column-rule-color: #f00;
                column-rule-style: dashed;
                column-rule-width: 10px;
                background-color: #eee;
            }

            .waterfall-item{
                column-span: none;
            }

            .waterfall-item img{
                display: block;
                width: 100%;
                height: auto;
                margin: 0 auto 10px;
                object-fit: cover; /* 图片顺应容器并且不裁切 */
            }
        </style>
    </head>
    <body>
        <h1>Multi-column 实例-垂直等高瀑布流规划</h1>
        <div class="waterfall-box">
            <div class="waterfall-item item-1">
                <img src="img/1.jpg" >
            </div>
            <div class="waterfall-item item-2">
                <img src="img/2.jpg" >
            </div>
            <div class="waterfall-item item-3">
                <img src="img/3.jpg" >
            </div>
            <div class="waterfall-item item-4">
                <img src="img/4.jpg" >
            </div>
            <div class="waterfall-item item-5">
                <img src="img/1.jpg" >
            </div>
            <div class="waterfall-item item-6">
                <img src="img/1.jpg" >
            </div>
            <div class="waterfall-item item-7">
                <img src="img/2.jpg" >
            </div>
            <div class="waterfall-item item-8">
                <img src="img/3.jpg" >
            </div>
            <div class="waterfall-item item-9">
                <img src="img/2.jpg" >
            </div>
            <div class="waterfall-item item-10">
                <img src="img/4.jpg" >
            </div>
            <div class="waterfall-item item-11">
                <img src="img/2.jpg" >
            </div>
            <div class="waterfall-item item-12">
                <img src="img/3.jpg" >
            </div>
            <div class="waterfall-item item-13">
                <img src="img/2.jpg" >
            </div>
            <div class="waterfall-item item-14">
                <img src="img/3.jpg" >
            </div>
            <div class="waterfall-item item-15">
                <img src="img/2.jpg" >
            </div>
            <div class="waterfall-item item-16">
                <img src="img/4.jpg" >
            </div>
            <div class="waterfall-item item-17">
                <img src="img/2.jpg" >
            </div>
            <div class="waterfall-item item-18">
                <img src="img/3.jpg" >
            </div>
            <div class="waterfall-item item-19">
                <img src="img/2.jpg" >
            </div>
            <div class="waterfall-item item-20">
                <img src="img/4.jpg" >
            </div>
            <div class="waterfall-item item-21">
                <img src="img/1.jpg" >
            </div>
            <div class="waterfall-item item-22">
                <img src="img/3.jpg" >
            </div>
            <div class="waterfall-item item-23">
                <img src="img/2.jpg" >
            </div>
        </div>
    </body>
</html>

demo地址：https://demo.zibuyu.life/frontend/html-css-js/css-layout/css-multi-column-layout.html

以上。

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

本站网络名称： 孤勇者社区

本站永久网址： https://www.gyzsq.com

网站侵权说明：本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ324470778删除处理。
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END