当前位置：首页 > news >正文

【css】常见布局概述

news 来源：原创 2024/10/1 1:23:53

本文将对css的常见布局方案进行概述，给大家提供系统化的布局解决方案参考。

一、流式布局

二、浮动布局

三、定位布局

四、弹性布局

五、网格布局

一、流式布局

顾名思义，该布局基于dom的文档流进行布局，是最常用、最原始的布局方式。

其主要的布局单位是块级元素和内联元素，通过内联元素在行内水平方向上的显示特点、块元素从顶部开始垂直方向显示元素的特点，布局页面内容。

🌰举个例子

<div class="box1"><p>段落一： <span>开始</span> </p><p>段落二</p>
</div>
<div class="box2"><p>尾巴段落</p>
</div>//------css------
//给box1文本段落添加边框
.box1 p {border: 2px solid green;
}
span {background-color: lightblue;
}

效果如下：

二、浮动布局

基于css属性float进行布局。元素设置完float属性后会脱离文档流，但是仍然保持部分流动性（即占据原来的文档位置，按照内联格式进行占据计算），并且其将允许其他的文本和内联元素环绕它。所以其最常用的场景是文本环绕图片、简单的多栏布局、左侧导航栏+内容布局。

🌰举个例子

<div class="container"><div class="box1"></div><span class="text">我又一个文本在这里希望围绕围绕诶扰</span><div class="box2"></div>
</div>//------css------
.container{width:250px;height:250px;border:1px solid black;
}
.box1 {width:100px;height:100px;float:left;border: 2px solid green;
}
.box2 {width:100px;height:100px;float:right;border: 2px solid green;
}.text {display:block;
}

效果如下：

如果此时text元素是个块级元素，设置clear属性（块级元素生效）可以清除浮动效果的影响，使得元素位于浮动元素所处那一行最上或者最下边框位置之外。

这里设置clear:both（左右浮动元素的效果都清除掉），效果如下：

三、定位布局

通常基于position属性的非static取值设置，来进行相对定位（relative）、绝对定位（absolute）、固定定位（fixed）、和粘性定位（sticky）。然后通过设置top、left、right、bottom设置偏移值来确定元素的位置。这些定位方式在不同场景中各有用途。常见的适用场景有：

弹出框或模态框
固定导航栏
侧边浮动工具栏
多层叠加的布局，利用定位元素下z-index生效的特性，叠加布局

四、弹性布局

基于css中的flex属性进行弹性布局。被设置了display:flex的元素成为弹性布局的容器，而其子元素变成弹性item项目，并且对于块级元素之后不再占据一整行。

适用场景：

响应式布局，利用弹性布局自动撑大、计算子元素之间的间隙的特性，来进行灵活布局
卡片布局

🌰列举一些常用的flex相关属性

可设置在弹性容器上的属性

flex-direction：可取值row（水平方向上）、column（垂直方向上），决定元素排列方向
flex-wrap：no-wrap（元素不换行，可能导致溢出flex容器）、wrap、wrap-reverse（反向）
flex-flow：上面两个属性的简写

可设置在弹性子item上的属性

flex-basis：flex 元素在主轴方向上的初始大小
flex-grow：flex 增长系数
flex-shrink：flex 缩小系数

flex:上述三者的简写属性。

/* 三值：flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

应用例子：


<div id="default-example" class="default-example"><div class="flex-el">I grow</div><div>Item Two</div><div>Item Three</div></div>//---css ----
.default-example {display: flex;//交叉轴对齐方式align-items: center;//主轴对齐方式justify-content:space-around;border: 1px solid #c5c5c5;width: 1000px;max-height: 300px;
}
.default-example div{width:200px;background-color: rgba(0, 0, 255, .2);border: 3px solid #00f;margin: 10px;
}
.flex-el{//等同于flex-grow:2flex:2;
}

效果为：

五、网格布局

基于display:grid创建的网格容器来进行布局。其涉及的属性有点多，可以根据下面链接中列出的相关属性进行一一查询：

网格布局 - CSS：层叠样式表 | MDN

*在网格布局中涉及一个单位fr，其代表取某方向上被网格划分后的几份，并且每份的计算包含了网格之间的gap宽度，比人为设置具体数值的优点是保证刚好等分网格容器不会因为忽略gap值而溢出。

常用属性：

grid-template-columns：容器被如何划分、划分为多少列
grid-template-rows：容器被如何划分、划分为多少行
grid-column：网格容器中的元素列上哪行到哪行（取值范围为grid-column-start到grid-column-end），用 / 分割
grid-row：功能如上一条
gap属性：设置水平/垂直方向上的网格间距

🌰举个栗子

下面为一个行高100px、列分为等分3列的网格容器【其他颜色和边框样式未给出】

<div class="wrapper"><div class="one">One</div><div class="two">Two</div><div class="three">Three</div><div class="four">Four</div><div class="five">Five</div><div class="six">Six</div>
</div>//-----css------
.wrapper {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px;grid-auto-rows: minmax(100px, auto);
}
.one {grid-column: 1 / 3;grid-row: 1;
}
.two {grid-column: 2 / 4;grid-row: 1 / 3;
}
.three {grid-row: 2 / 5;grid-column: 1;
}
.four {grid-column: 3;grid-row: 3;
}
.five {grid-column: 2 / span 2;grid-row: 4;
}

效果如下：

⚠️从上述应用可以得出几点注意！

grid-column/row设置的起始号 / 结束号，如果超出范围，会取到最后一列的范围截止
如果对grid-column/row中的 / 后一个数字添加关键字span，代表跨越覆盖的行/列数。
如果没有特地对某个元素比如上文的 six元素设置行列范围，则其值为auto，自动填补到网格容器中的空隙中。

六、多列布局

基于column-count这一css属性展开的布局，划分的列数具有弹性宽度（浏览器自动计算）。

参考链接：

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout

一、流式布局

二、浮动布局

三、定位布局

四、弹性布局

五、网格布局

六、多列布局

相关文章：