CSS布局技巧 | 豆包Marscode AI刷题

三无酒
59 阅读7分钟

CSS 布局技巧有很多种，每种布局方法都有其独特的特点和适用场景。基本提供了三种传统布局方式:

  • 普通流（标准流）：标签按照规定好默认方式排列，是最基本的布局方式。
    • 块级元素会独占一行，从上向下顺字排列。常用元素： div 、 hr 、 p 、h1~h6、 ul 、 ol 、 dl 、 form 、 table
    • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素： span 、 a 、 i 、 em 等
  • 浮动
  • 定位

本文将汇总包括这几种常用的CSS布局技巧。

浮动布局

应用场景：

多个块级元素实现同一行显示比较难，他们之间会有大的空白缝隙，很难控制。此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。 float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

设置了浮动的元素最重要特性：

  1. 脱离标准普通流的控制移动到指定位置。
  2. 浮动的盒子不再保留原先的位置。如果父盒子top不给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。这时候就需要清除浮动。

清除浮动的本质是清除浮动元素造成的影响。如果父盒子本身有高度，则不需要清除浮动。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。一般只用clear : both ;。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮动布局</title>
  <style>
    .container {
      width: 100%;
    }
    .left {
      width: 40%;
      float: left;
      background-color: lightblue;
    }
    .right {
      width: 40%;
      float: left;
      background-color: lightgreen;
    }
    /* 清除浮动 */
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
    .bottom {
      width: 100%;
      float: left;
      background-color: rgb(151, 94, 141);
    }
  </style>
</head>
<body>

<div class="container clearfix">
  <div class="left">左侧内容</div>
  <div class="right">右侧内容</div>
</div>
<div class="bottom">下侧内容</div>
</body>
</html>

image.png

定位布局

应用场景：

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。定位＝定位模式＋边偏移。

  1. 定位模式：通过 CSS 的 position 属性来设置，其值可以分为5个：static静态定位（默认）、relative相对定位、absolute绝对定位、fixed固定定位、sticky粘性定位。
  2. 边偏移：定位的盒子移动到最终位置。有 top、bottom、left和right 4个属性。
  • 相对定位 relative：元素在移动位置的时候，是相对于它原来的位置来说的。
  • 绝对定位 absolute：元素在移动位置的时候，是相对于它祖先元素来说的。如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（ Document 文档）。如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
    • “子绝父相”: 子级是绝对定位的话，父级要用相对定位。因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。
  • 固定定位 fixed：元素固定于浏览器可视区的位置，在浏览器页面滚动时元素的位置不会改变。常用于提示、导航。
    • 定位叠放次序z-index :在使用定位布局时，可能会出现盒子重重的情况。可以使用 z - index 来控制盒子的前后次序, 数值越大，盒子越靠上。
  • 粘性定位 sticky: 使元素在页面滚动时表现得像是 relative 定位，当它的父元素滚动到某个位置时，它会变成 fixed 定位，并固定在浏览器视口内，直到其父元素的边界到达视口的另一端。常用于导航。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定位方式展示</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    /* 父容器 */
    .container {
      width: 100%;
      height: 2000px;
      background-color: #f0f0f0;
      position: relative; 
    }

    /* 静态定位 (默认) */
    .static {
      width: 200px;
      height: 100px;
      background-color: lightcoral;
      margin: 20px;
    }

    /* 相对定位 */
    .relative {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      margin: 0 20px;
      position: relative;
      top: 50px; /* 向下偏移 50px */
    }

    /* 绝对定位 */
    .absolute {
      width: 200px;
      height: 100px;
      background-color: lightgreen;
      position: absolute;
      top: 50px;
      left: 50px; /* 距离父元素左边 50px */
    }

    /* 固定定位 */
    .fixed {
      width: 200px;
      height: 100px;
      background-color: lightgoldenrodyellow;
      position: fixed;
      top: 50px; /* 距离视口顶部 50px */
      right: 20px; /* 距离视口右边 20px */
    }

    /* 粘性定位 */
    .sticky {
      width: 200px;
      height: 100px;
      background-color: lightpink;
      position: sticky;
      top: 0; /* 当滚动时，粘性定位元素在视口顶部 */
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="static">静态定位 (static)</div>
    <div class="relative">相对定位 (relative)</div>
    <div class="absolute">绝对定位 (absolute)</div>
    <div class="sticky">粘性定位 (sticky)</div>
  </div>
  
  <div class="fixed">固定定位 (fixed)</div>

</body>
</html>

image.png

Flexbox 布局

应用场景：

Flexbox 是现代 CSS 布局的强大工具，广泛应用于各种响应式设计中，适用于水平或垂直对齐、分布空间等，是现代 Web 开发中常用的布局方式。常用于简单的单行或多行布局，特别适合动态元素的布局需求，如导航条、卡片布局等。

  • display: flex; 激活 Flexbox 布局，子元素将按行或列布局。
  • justify-content 控制水平轴上的子元素间距。
    • flex-start：所有项目将对齐到主轴的起点（默认情况下是左边，如果是纵向布局则是顶部）。
    • flex-end：所有项目将对齐到主轴的终点（如果是纵向布局则是底部）。
    • center：所有项目将在主轴上居中对齐。
    • space-between：项目将在主轴上分布，首个项目位于起始位置，最后一个项目位于终点，其他项目在它们之间平均分布。
    • space-around：项目将在主轴上分布，每个项目的两侧有相同的间距，间距是项目之间的间距的一半。
    • space-evenly：项目将在主轴上分布，所有项目之间的间距相等。
  • align-items 控制垂直对齐。
    • flex-start：所有项目将对齐到容器的交叉轴起点（上边或左边）。
    • flex-end：所有项目将对齐到容器的交叉轴终点（下边或右边）。
    • center：所有项目将居中对齐于交叉轴。
    • baseline：所有项目的基线对齐，通常是文本的基线（例如在多行文本时对齐文本的基线）。
    • stretch（默认值）：项目将会拉伸以填充交叉轴的空间。如果项目没有设置固定高度（在默认情况下，项目的高度是 auto），它们会拉伸到容器的最大高度。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox布局</title>
  <style>
    .container {
      display: flex;
      justify-content: space-between; /* 子元素之间的间距 */
      align-items: center; /* 垂直居中对齐 */
      height: 100px;
      background-color: lightgray;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="box">Item 1</div>
  <div class="box">Item 2</div>
  <div class="box">Item 3</div>
</div>

</body>
</html>

image.png

Grid 布局

应用场景：

用于更复杂的二维布局，能够精确控制行和列的排布。常用于大范围的页面布局，如博客、产品页面、仪表板等。

  • display: grid; 激活 Grid 布局。
  • grid-template-columns: repeat(3, 1fr); 设置 3 列，1fr 表示每列占据相同的宽度。
  • grid-gap: 20px; 控制格子之间的间距。

代码示例：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  grid-gap: 20px; 
}

多列布局

应用场景：

常用于文本流式布局，类似于报纸的列布局。对于需要分多列显示内容（如新闻页面）的情况很有用。

  • column-count: 3; 表示将内容分成 3 列。
  • column-gap: 20px; 设置列之间的间距。

代码示例：

.container {
  column-count: 3; /* 设置列数 */
  column-gap: 20px; /* 列之间的间距 */
}
</html>

总结

我们主要介绍了五种常见的布局技巧：

  • 浮动布局：用于多列布局，但需要清除浮动。
  • 定位布局：用于精确定位元素，适合模态框等场景。
  • Flexbox 布局：适合一维布局，尤其用于响应式设计。
  • Grid 布局：适合二维布局，强大且灵活。
  • 多列布局：适合文本流式布局，如文章分栏。

根据需求选择最适合的布局方式。

avatar
文章
阅读
粉丝