【css】常见布局概述

🕗 发布于 2024-09-26 14:25 css 前端

本文将对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:2
   flex: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

【css】常见布局概述

一、流式布局

二、浮动布局

三、定位布局

四、弹性布局

五、网格布局

六、多列布局

相关文章