前端实践：CSS布局汇总 | 豆包MarsCode AI刷题

阳光836
316 阅读12分钟

前端实践：CSS布局汇总

CSS布局在前端学习的第二课里面已有提及，这里做一个总结。另外笔者在之前也有发表过相关帖子文章，也可以去浏览一下。 结合课堂内容，我们来讲一下CSS布局方式大概有：

  • 浮动布局
  • 定位布局
  • 弹性布局
  • 网格布局

（其实CSS布局还有很多种类型，但是目前先总结这4个）

1.浮动布局float

浮动布局主要是在图文混排时用，可以实现文字环绕图片的效果。

它的基本逻辑是：将元素移动到容器的左侧或右侧，使其脱离正常文档流，从而实现布局。

1.1浮动布局的特点是：

  • 元素脱离文档流，不再占据空间
  • 元素可以重叠
  • 元素可以浮动到容器的左侧或右侧
  • 元素可以浮动到容器的顶部或底部
  • 元素可以浮动到容器的中间

1.2.浮动布局的实现方法：

  • 使用float属性

比如说，笔者渲染了一段图文界面，而不使用float布局，它的效果是：

f253a4b0558af9580fd3bc29247f64c.png 它的实现代码是：

<div class="container">
    <div class="image">
        <img src="image.jpg" alt="Image" width="600" height="600" >
    </div>
    <div class="text">
        <p >亚里士多德曾说：“成功是不断努力的结果，而非偶然的恩赐。”这句话在李盈身上得到了充分体现。</p>
        <p>在别人眼中，高考668分已是卓越的成绩，但对李盈而言，这仅是一分之差的遗憾。</p>
        <p>他在高考中不断努力，不断学习，不断实践，不断探索，不断创新，不断追求，不断超越，最终取得了自己的成绩。</p>
    </div>
</div>

.container {
    width: 100%;
    height: 100%;
}

如果使用了浮动布局，则效果如下：

7d822855c2fae1eef08286f396ff1ff.png （因为笔者电脑分屏了截图有点小，但是在满屏的状态下，图片和文字的位置是不会重叠的，分别在屏幕的极两端）

它的实现代码主要体现在设定CSS布局的代码上，而HTML文件的代码基本上是不用变动。

.container {
    width: 100%;
    height: 100%;
    border: 1px solid #000;
}

.image {
    float: left;
    width: 150px;
    height: 150px;
    margin: 10px;
}

.text {
    float: right;
    width: 300px;
    height: 150px;
    margin: 10px;
}

在上面这个代码里，笔者通过设定一个针对image类和text类的CSS布局，设定图片的float属性偏左，而文字的float属性偏右，从而实现了图文混排的效果（图左文右）。

2.定位布局

定位布局主要是在页面中定位元素的位置，实现元素的绝对定位或者相对定位。

2.1.什么是绝对定位和相对定位？

  • 绝对定位：将元素相对于其最近的已定位祖先元素进行定位，或者相对于浏览器窗口进行定位。
  • 相对定位：将元素相对于其正常位置进行定位。

2.2.定位布局的特点是：

  • 元素脱离文档流，不再占据空间
  • 元素可以重叠
  • 元素可以定位到容器的任意位置
  • 元素可以定位到容器的任意方向

可见，定位布局和浮动布局有一定相似性，但也有区别。它们俩的区别在于：

定位布局可以将元素相对于其正常位置进行定位，而浮动布局是将元素相对于其最近的已定位祖先元素进行定位。

2.3.position布局的实现方式：

  • 使用position属性
  • 使用top、bottom、left、right属性

我们先来看看用position布局实现的效果：

b406c7c07ee32a0195061d20e127e11.png

它的实现代码是：

<div class="container">
    <div class="image">
        <img src="image.jpg" alt="Image" width="600" height="600" >
    </div>
    <div class="text">
        <p >亚里士多德曾说：“成功是不断努力的结果，而非偶然的恩赐。”这句话在李盈身上得到了充分体现。</p>
        <p>在别人眼中，高考668分已是卓越的成绩，但对李盈而言，这仅是一分之差的遗憾。</p>
        <p>他在高考中不断努力，不断学习，不断实践，不断探索，不断创新，不断追求，不断超越，最终取得了自己的成绩。</p>
        <div class="text2">
            <p>他在高考中不断努力，不断学习，不断实践，不断探索，不断创新，不断追求，不断超越，最终取得了自己的成绩。</p>
        </div>
    </div>
</div>

.container {
    width: 100%;
    height: 100%;
    border: 1px solid #000;
}

.text {
    position: relative;   /* 相对定位 */
    top: 100px;
    left: 100px;
    width: 3000px;
    height: 1500px;
    margin: 100px;
}
.text2 {
    position: absolute;   /* 绝对定位 */
    top: 100px;
    left: 100px;
    width: 3000px;
    height: 1500px;
    margin: 100px;
}

在上面这个例子里，我们可以非常直观看出相对定位和绝对定位对元素的影响影响。

第二句“他在高考中不断努力……”会比第一句的“他在高考中不断努力……”位置更偏，这是因为第二句是受到了text2类选择器的绝对定位影响，它的定位是基于它的祖先元素（也就是第一句"他在高考中不断努力……"）的位置再进行偏移的。

但是第一句就只需要针对自己本身正常的位置进行偏移就好了。

3.弹性布局flexbox

我们先来看一个不用flexbox的例子：

02494b44bf0ffed063a216bbd36c164.png 它的代码是：

<div class="container">
    <div class="item1">红色</div>
    <div class="item2">黄色</div>
    <div class="item3">蓝色</div>
    <div class="item4">绿色</div>
    <div class="item5">紫色</div>
</div>

.container {
    width: 100%;
    height: 100%;
    border: 1px solid #FFFFFF;
}

.item1 {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:red;
}
.item2 {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:yellow;
}
.item3{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:blue;
}
.item4{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:green;
}
.item5{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:purple;
}

在这个例子里，我们可以看到，这五个颜色盒子只能一行一个展示，而不能流式展示（并排）。而如果我们想实现盒子的流式展示，我们需要通过flexbox来实现。

3.1.什么是FlexBox？

  • 一种新的排版上下文（不再遵循IFC BFC规则）
  • 可以控制子级盒子的位置和排列方式
    • 摆放流向
    • 摆放顺序
    • 盒子的宽度和高度
    • 水平和垂直方向的对齐
    • 能不能拆行
  • 引入主轴和侧轴概念的对齐方式

简单来讲，FlexBox的作用就是：让盒子在页面中可以灵活的排列，比如可以实现盒子的并排。

3.2.FlexBox的实现方式：

  • 使用display属性

所以，像上面那个例子，如果我们使用了display:flex;，就可以实现盒子的流式展示。 我们来看看FlexBox的实现效果：

d3e5c938b08f23486904caf60cd005a.png

它的实现代码是：

.container {
    display:flex;
    flex-wrap:wrap; /*盒子默认是呈列状排列，如果想设置行状排列，就需要设置flex-wrap:wrap; */
    width:100%;
    height:100%;
    border:1px solid #FFFFFF;
}
.item1 {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:red;
}
.item2 {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:yellow;
}
.item3{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:blue;
}
.item4{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:green;
}
.item5{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:purple;
}

在上面这个例子里，我们可以看到，通过设定display:flex;，我们就可以让容器内的五个盒子并排显示，而不用再去设定它们的位置。

当然，也许你会发现这里面的文字好像不太“整齐”，我们也可以使用flexbox布局里面的属性align-items: center;和justify-content: center;去调整文字到盒子的最中央处。

其中：

  • justify-content:可以控制flex上下文元素之间的对齐关系
  • align-items:给某个元素设置特殊的对齐方式

代码如下:

.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    border: 1px solid #FFFFFF;
}

.item1 {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:red;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item2 {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:yellow;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item3{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:blue;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item4{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:green;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item5{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:purple;
    display: flex;
    align-items: center;
    justify-content: center;
}

这样子，我们的文字看起来就“整齐”多了。

138f2a3951b34b9506e28aea44aec81.png

  • 应用场景： 以上这个代码的应用场景十分广泛，比如说，我们在浏览一些官网网站的时候，他们的标题导航的设计就是沿用了这种方法。

b1a68bac401736970688f025758cd0b.png

3.3.FlexBox的其他属性 flex-grow

当然，flexbox还有很多其他属性，而比如它里面的一个flex-grow属性的功能就是支持实现盒子的比例分布情况。

也就是实现让不同盒子占的位置大小不一样。

b57a37979b5f3dbafbfc5045f6bac4c.png

它的代码实现是这样的：

.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    border: 1px solid #FFFFFF;
}

.item1 {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:red;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}
.item2 {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:yellow;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 2;
}
.item3{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:blue;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 3;
}
.item4{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:green;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 4;
}
.item5{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:purple;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 5;
}

3.网格布局

3.1.什么是网格布局？

  • 一种二维的表格布局方式(而flexbox布局可看为一维的表格布局方式)
  • 允许盒子呈不规则队形排列

3.2.怎么实现网格布局？

它和flex布局有点像。我们只需要指定display=grid,就可以实现网格布局。 我们用刚刚flex布局里面的例子，笔者已经将其改动为网格布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout Example</title>
    <link rel="stylesheet" href="test4.css" />
</head>
<body>
<div class="container">
    <div class="item1">红色</div>
    <div class="item2">黄色</div>
    <div class="item3">蓝色</div>
    <div class="item4">绿色</div>
    <div class="item5">紫色</div>
</div>
</body>
</html>


.container {
    width: 100%;
    height: 100%;
    border: 1px solid #FFFFFF;
    display:grid;
    grid-template-columns: 1fr 2fr 1fr;     /*就是相当于列了3列，它们的宽度比例是1:2:1*/
    grid-template-rows: auto 1fr;   /*就是相当于有两行，他们的高度比例分别为自动调整，和剩余高度的1份*/
}

.item1 {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:red;
}
.item2 {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:yellow;
}
.item3{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:blue;
}
.item4{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:green;
}
.item5{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color:purple;
}

上面这个代码的实现效果是这样的：

9e3b5bf70fd06d53dd09cc75733ec50.png

显然，我们可以发现，在网格布局里面，主要是通过以下这两个属性操控排版样式，而它们的功能分别是：

  • grid-template-columns:控制网格容器里面列布局
  • grid-template-rows:控制网格容器里面的行布局

结合上面笔者提供的代码以及里面的注释，值得注意的是：

grid布局和flex布局类似，都是通过调整单元元素们的比例关系来实现它们占的空间。

3.3. grid布局里面的其他比较好用的方法

3.3.1.repeat()

在笔者实际操作的时候，我发现，如果我想每个元素都占一行而且让它们占的位置比例一样，我们当然可以直接grid-template-rows: 1fr 1fr 1fr 1fr 1fr这样操作。但是笔者在想：如果我们有很多个元素要处理，这样的方法实在是太低下了。

所以笔者学到了另外一种方法处理这种重复情况：使用grid-template-rows: repeat(5, 1fr); 这里的repeat(5, 1fr)指，把1fr这样的比例分布重复5次。

3.3.2.其他指定布局比例的方式

其实在上述的代码里，我们除了可以使用fr关键字去指定位置占比之外，也可以使用百分比来实现。比方说：

.container {
width: 100%;
height: 100%;
border: 1px solid #FFFFFF;
display:grid;
grid-template-columns: 20% 40% 20%;     /*就是相当于列了3列，它们的宽度比例是1:2:1*/
grid-template-rows: auto 1fr;   /*就是相当于有两行，他们的高度比例分别为自动调整，和剩余高度的1份*/
}

这样子也是可以的，一样的效果。

ab6639a9fc3114d34b7b027ba1471e2.png

  • grid布局的应用场景： 它的应用也十分常见，比如说笔者在浏览一些购物网站的时候（或者是一些新闻网站的时候），他们的图片通常都是呈比较灵活的走位排布，而不是很呆板的整整齐齐罗列。让我们用户觉得这个网站里的东西很多，很想买里面的东西。

image.png

4.总结：

其实笔者通过接触一些别的大神写的前端项目发现，上述的知识点其实发挥的可能只是很基础的作用，在一个项目中，可能只是占了几行的分量，但是不得不说，写这篇文章会让我本人也真的深刻了解了这些知识点，而不是只是简单地照抄copy来实现需求，但是又不知道是什么意思。

所以不得不说，有时候，基础的知识也是蛮重要的。

avatar
文章
阅读
粉丝