CSS布局技巧：汇总CSS布局技巧以及相应例子 ｜ 青训营

飘尘
123 阅读5分钟

在前端开发中，CSS可谓是最为重要的部分之一。任何页面，如果没有CSS，就会丧失掉其美感，变得非常丑陋。在具体的CSS书写过程中，最重要与最基础的部分就是CSS布局，它是绘制页面的基础，合理的布局可以大幅减轻页面绘制的难度，并且使你的页面更具设计感与美感。下面，我汇总了几个常用的CSS布局技巧以及相应的例子，供大家参考。

一、浮动

1. 概述

浮动布局是CSS中最常见的布局技巧之一。它最开始被设计出来的目的是为了实现在文字中嵌入图片，使文字环绕在图片周围。通过设置元素的浮动(float)属性为left或right，可以使元素脱离文档流，并实现元素的横向排列，比如将原本为块级元素的div放在同一排进行排列，就可以使用浮动来实现。浮动布局适用于实现多列布局、图文混排等场景。

2. 例子

实现div的同行排布：

实现效果：

QQ截图20230728200614.png

示例代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #root{
    height: 100%;
    padding: 10px;
  }

  #root div{
    float: left; /*开启浮动*/
    width: 150px;
    height: 150px;
    background-color: burlywood;
    margin-right: 10px;
    margin-top: 10px;
    color: white;
    font-weight: 700;
    text-align: center;
    line-height: 150px;
    font-size: 24px;
  }
</style>
<body>
  <div id="root">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</body>
</html>

浮动起来的元素不像绝对定位，设置了定位之后会发生重叠的情况，被设置了浮动的元素会挨个从左到右排好，一行不够之后会换行排布。 QQ截图20230728201028.png

同样的，由于浮动会脱离标准文档流（脱标），会导致塌陷问题。相当于本来被浮动元素占着的位置突然没人了，于是下面的元素就自发的挤到那个空位置里去了，比如这样子： 添加浮动前： QQ截图20230728205609.png 添加浮动后：

QQ截图20230728205621.png

并且由于脱离了标准流，A盒子也失去了自己继承的100%的宽度，只靠内容撑大了。而当一个盒子没有设置高度或者宽度，大小仅仅依靠其中的内容来撑大的时候，一旦其中的内容脱离了标准流（被设置为浮动或者绝对定位），这个盒子就有可能会塌陷，大小就会被改变，甚至可能高度为0或者宽度为0。 为了解决这件事情，我们可以清除浮动，使用clear: both; 属性可以清除浮动。

一般而言，清除浮动的方式有两种，一种是添加一个空div，设置其行内样式为clear: both;，另一种则是在浮动元素的父元素后添加伪元素，设置其样式为clear: both;。第二种方式更为常用一些。

清除浮动代码：（当父元素中还其他元素的时候，清除浮动好像不生效，这个不知道为什么🙁）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #root{
    padding: 10px;
    border: 1px solid black;
  }

  .a{
    float: left;
    height: 100px;
    border: 2px solid black;
    margin-bottom: 10px;
  }

  .clearfix::after{
    content: '';
    display: block;
    clear: both;
    /*visibility 属性规定元素是否可见,即使不可见的元素也会占据页面上的空间
    如果创建不占据页面空间的不可见元素，使用 "display" 属性*/
  }

  .b{
    height: 100px;
    background-color: burlywood;
  }

  .word{
    text-align: center;
    line-height: 100px;
    font-weight: 700;
    font-size: 36px;
  }
</style>
<body>
  <div id="root" class="">
   <div class="a word">A盒子</div>
   <!-- <div class="b word">B盒子</div> -->
  </div>
</body>
</html>

清除前后：

QQ截图20230728210435.png

QQ截图20230728210402.png

二、定位

1. 概述

定位布局是通过设置元素的定位属性，如position: absolute或position: relative，来控制元素的位置。使用定位进行布局的时候，要遵循子绝父相的原则，即子元素使用绝对定位，父元素添加相对定位。添加相对定位不会导致元素脱标，但是绝对定位会使当前元素脱标，因此在使用的时候记得给定宽高。绝对定位是相对于最近的(嵌套层级关系上，比如父子)添加了定位的元素进行定位。使用绝对定位配合CSS的transform属性可以非常便捷的是一个元素垂直居中或者水平居中。

定位有四个属性，分别为top，left，bottom和right。他们的意思都是相对于某个地方，向远离这个地方的方向偏移多少。比如top: 5px;就是相对于顶部，向下偏移5像素。

2. 例子

使用定位实现布局的方法很简单，下面是一个简单的示例：

效果： QQ截图20230728212245.png

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  *{
    padding: 0;
    margin: 0;
  }

  body, html{
    width: 100%;
    height: 100%;
  }

  #root{
    width: 100%;
    height: 100%;
    position: relative;
  }

  .a{
    position: absolute;
    top: 0;
    width: 100%;
    height: 60px;
    background-color: bisque;
  }

  .b{
    position: absolute;
    top: 120px;
    left: 0;
    height: 500px;
    width: 200px;
    background-color: bisque;
  }

  .c{
    position: absolute;
    top: 120px;
    right: 0;
    height: 500px;
    width: 200px;
    background-color: bisque;
  }

  .d{
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 500px;
    background-color: bisque;
  }

  .e{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: bisque;
  }


</style>
<body>
  <div id="root">
   <div class="a">A盒子</div>
   <div class="b">B盒子</div>
   <div class="c">C盒子</div>
   <div class="d">D盒子</div>
   <div class="e">E盒子</div>
  </div>
</body>
</html>

定位很好用，但是使用起来一旦出了些什么问题还是不太好找的，另外在缩放或者页面没有最大化的情况时，页面容易出现展示问题，使用时要注意规避。

三、flex布局

1. 概述

flex布局是CSS3中引入的一种弹性布局技术。通过设置父级容器的display属性为flex，可以实现元素的自适应布局，适用于实现等高布局、水平居中等场景。

常用属性以及相关属性值比较多，总结最为常用的就是justify-content，align-items，flex-wrap，align-content等。具体详情请参见MDN文档：flex 布局的基本概念 - CSS：层叠样式表 | MDN (mozilla.org)

2. 例子

实现效果： QQ截图20230728222322.png

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
*{
  padding: 0;
  margin: 0;
}

body, html{
  width: 100%;
  height: 100%;
}

#root{
  width: 100%;
  height: 100%;
  display: flex; /* 设置为flex容器 */
  flex-direction: column; /* 设置主轴方向为垂直方向 */
}

.a{
  height: 60px; /* 设置高度 */
  background-color: bisque;
}

.b{
  width: 200px; /* 设置宽度 */
  height: 500px;
  background-color: bisque;
}

.c{
  width: 200px; /* 设置宽度 */
  height: 500px;
  background-color: bisque;
}

.d{
  width: 700px; /* 设置宽度 */
  height: 500px;
  background-color: bisque;
}

.e{
  height: 60px; /* 设置高度 */
  background-color: bisque;
}

.content {
  display: flex; /* 设置为flex容器 */
  flex-grow: 1; /* 设置弹性增长系数为1，占据剩余空间 */
  justify-content: space-between; /* 设置主轴上的对齐方式为两端对齐 */
  align-items: center; /* 设置交叉轴上的对齐方式为居中对齐 */
}
</style>
<body>
  <div id="root">
    <div class="a">A盒子</div>
    <div class="content">
      <div class="b">B盒子</div>
      <div class="d">D盒子</div>
      <div class="c">C盒子</div>
    </div>
    <div class="e">E盒子</div>
  </div>
</body>
</html>

四、grid布局

1. 概述

grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。常常被用来实现一些复杂的页面布局，比如网格状的图片墙，多栏的新闻网站，响应式的仪表盘等等。grid布局的优势在于它可以同时处理行和列，可以灵活地指定项目所在的单元格，可以创建不规则的网格区域，可以对齐和分配空间等等。grid布局也可以和flex布局结合使用，比如在一个网格单元格中使用flex布局来排列项目。

同样的，对于它具体的属性，还是参加文档比较好：网格布局 - CSS：层叠样式表 | MDN (mozilla.org)

指定容器的位置可以使用网格线来指定，通过线的编号来去指定某一条线。

QQ截图20230728174610.png

grid是目前来说最为强大的一种布局方式，一旦理解使用起来会非常舒服。

2. 例子

实现效果： QQ截图20230728223607.png

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
*{
  padding: 0;
  margin: 0;
}

body, html{
  width: 100%;
  height: 100%;
}

#root{
  width: 100%;
  height: 100%;
  display: grid; /* 设置为grid容器 */
  grid-template-columns: 200px auto 200px; /* 设置三列，第一列和第三列宽度为200px，第二列为自动 */
  grid-template-rows: 60px auto 60px; /* 设置三行，第一行和第三行高度为60px，第二行为自动 */
  grid-template-areas: /* 设置网格区域 */
  "a a a"
  "b d c"
  "e e e";
  grid-gap: 20px; /* 设置网格行和网格列之间的间隙为20px */
}

.a{
  grid-area: a; /* 指定区域为a */
  background-color: bisque;
}

.b{
  grid-area: b; /* 指定区域为b */
  background-color: bisque;
}

.c{
  grid-area: c; /* 指定区域为c */
  background-color: bisque;
}

.d{
  grid-area: d; /* 指定区域为d */
  background-color: bisque;
}

.e{
  grid-area: e; /* 指定区域为e */
  background-color: bisque;
}
</style>
<body>
  <div id="root">
    <div class="a">A盒子</div>
    <div class="b">B盒子</div>
    <div class="c">C盒子</div>
    <div class="d">D盒子</div>
    <div class="e">E盒子</div>
  </div>
</body>
</html>
avatar
文章
阅读
粉丝