前端实践—CSS布局技巧| 豆包MarsCode AI刷题

用户436786637470
109 阅读8分钟

css布局技巧

网页布局方式有以下五种：

标准流（普通流、文档流）：网页按照元素的书写顺序依次排列

浮动

定位

Flexbox和Grid（自适应布局）

标准流就是块级占一行，行内元素一行放好多个元素。

首先介绍一下盒子模型

盒子模型

盒子模型（Box Model）是Web布局的核心概念，所有的HTML元素都可以视为一个矩形的框（盒子），由四个部分组成：内容区、内边距、边框和外边距。下面是盒子模型的各个组成部分的详细介绍：

1. 盒子模型组成部分

  • 内容区 (Content) ：这是盒子的实际内容，例如文本、图片等。内容的宽度和高度是通过width和height属性定义的。
  • 内边距 (Padding) ：内容与边框之间的空白区域，内边距的大小可以通过padding属性设置，这部分是透明的，可以为每一侧设置不同的值，例如padding-top、padding-right、padding-bottom和padding-left。
  • 边框 (Border) ：围绕内容和内边距的线，可以通过border属性设置边框宽度、样式和颜色。例如，border-width、border-style和border-color。
  • 外边距 (Margin) ：盒子与其他元素之间的空白区域，外边距的大小可以通过margin属性设置，可以设定四个方向的外边距。

2. 盒子模型的计算

盒子模型的尺寸总宽度和高度可以通过以下公式计算：

  • 总宽度：

    总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度 + 左外边距 + 右外边距

    CopyInsert

  • 总高度：

    总高度 = 内容高度 + 上内边距 + 下内边距 + 上边框高度 + 下边框高度 + 上外边距 + 下外边距

    CopyInsert

3. 盒子模型的标准和替代模型

在CSS中，盒子模型有两种不同的处理方式：

  • 标准盒子模型（Content Box） ：这是默认的盒子模型，计算总宽度和总高度时只考虑内容的width和height，内边距和边框会被加到该宽度和高度上。
  • 替代盒子模型（Border Box） ：通过设置box-sizing: border-box; 可以让内容、内边距和边框的宽度和高度被包含在width和height之内，这样可以更容易地控制盒子的大小。

代码实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型</title>
    <style>
      .demo{
            background-color: #f2f2f2;
            display: inline-block;
            border: 5px solid yellowgreen;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="demo">这是一个盒子</div>
</body>
</html>
​

image-20241127105147334.png

在AI练中学中实践运行，可以通过改变边框和填充，改变盒子样式。

image-20241127105324235.png

标准流

标准流（Normal Flow）是指在网页布局中，元素按照文档源代码中的顺序自然排列的方式。它是 HTML/CSS 布局的默认行为，主要适用于块级元素和行内元素的布局特点。

标准流的特点

  1. 块级元素：

    • 块级元素会占据其所在行的整个宽度，并在前后创建换行。常见的块级元素有<div>、<p>、<h1>至<h6>、<ul>、<ol>等。
    • 当多个块级元素相继出现时，每个元素都会在新的一行开始。
    <div>块级元素 1</div>
<div>块级元素 2</div>

    CopyInsert

    上述代码会呈现为：

    块级元素 1
块级元素 2

    CopyInsert

  2. 行内元素：

    • 行内元素只占据其内容的宽度，并与后续的行内元素或文本在同一行显示。常见的行内元素有<span>、<a>、<strong>、<em>等。
    • 行内元素不会在上下创建换行。
    <span>行内元素 1</span>
<span>行内元素 2</span>

    CopyInsert

    上述代码会呈现为：

    行内元素 1行内元素 2

    CopyInsert

  3. 混合使用：

    • 当在标准流中混合使用块级元素和行内元素时，块级元素依然会占据整行，而行内元素会在其内部排列。

      <div>块级元素
    <span>行内元素 1</span>
    <span>行内元素 2</span>
</div>

代码实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .block {
            background-color: lightblue; /* 设置背景色 */
            padding: 10px; /* 设置内边距 */
            margin: 10px 0; /* 设置外边距，创建上下间隔 */
        }
​
        .inline {
            color: darkblue; /* 设置文本颜色 */
            font-weight: bold; /* 加粗文字 */
        }
​
    </style>
</head>
<body>
    <h1 style="font: 50px Arial, sans-serif;">标准流</h1>
    <p style="line-height: normal;">标准流就是块级占一行，行内元素一行放好多个元素。</p>
    <div class="block">这是一个块级元素</div>
    <span class="inline">这是一个行内元素</span>
    <span class="inline">这也是一个行内元素</span>
    <div class="block">混合了块级和行内元素
        <span class="inline">
            这是一个块级元素，里面包含了一个行内元素。
            块级元素会独占一行，而行内元素会在一行内排列。
        </span>
        <span class="inline">
            这是一个行内元素，它会在块级元素的内部排列。
        </span>
    </div>
</body>
</html>
​
​

image-20241127111250642.png

浮动

浮动（Float）是CSS中的一种布局方式，主要用于让元素在网页中脱离标准流并向左或向右对齐。它最初的设计目的是为了让文本环绕图像，但在现代开发中也用于创建多列布局和响应式设计。

浮动的基本用法

  1. 设置浮动：

    • 在CSS中，可以通过 float 属性来设置浮动元素的方向。
    • 常用的值有 left（向左浮动）、right（向右浮动）和 none（不浮动）。
    .float-left {
    float: left; /* 向左浮动 */
}
​
.float-right {
    float: right; /* 向右浮动 */
}

    CopyInsert

  2. 浮动效果：

    • 当一个元素被设置为浮动时，它会从标准流中脱离，其他元素会围绕它排列。浮动元素的顶部边缘处理与其父元素的边缘相同。

浮动属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。相对于父元素浮动，只会在父元素的内部移动。

三大特性：

脱标、一行显示，顶部对齐、具备行内块元素特性。

代码实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            background-color: aquamarine;
            border: 3px solid black;
            overflow: hidden; /* 解决浮动问题 */
        }
        .left-son {
            float: left;
            width: 200px;
            height: 100px;
            background-color: yellow;
        }    
        .right-son {
            float: right;
            width: 200px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
    </div>
    <p>这是一段文字，下面是另一个浮动元素。</p>
</body>
</html>
​

image-20241127111917194.png

image-20241127111933770.png

当然，可以限制浮动

只要加上一行代码

overflow: hidden; /* 解决浮动问题 */

image-20241127112013981.png

定位

在CSS中，定位是控制元素位置的重要机制。通过定位，可以将元素放置在页面的特定位置，利用不同的定位方式实现自定义的布局效果。主要有四种定位方式：静态定位、相对定位、绝对定位和固定定位。

1. 静态定位（Static）

  • 默认行为：所有元素默认采用静态定位。静态元素遵循标准流，按文档中的顺序排列。

  • 特点：无法使用 top、right、bottom 和 left 来调整位置。

  • 示例

    ：

    .static {
    position: static; /* 默认 */
}

    CopyInsert

2. 相对定位（Relative）

  • 相对其正常位置定位：设置 position: relative; 的元素相对于其正常位置进行偏移。

  • 特点

    ：

    • 使用 top、right、bottom、left 属性可进行位置调整。
    • 仍然保留在标准流中，周围元素的布局不会受到影响（会留下原来的空间）。

  • 示例

    ：

    .relative {
    position: relative;
    top: 20px; /* 向下移动20px */
    left: 10px; /* 向右移动10px */
}

    CopyInsert

3. 绝对定位（Absolute）

  • 相对于最近的定位祖先元素：设置 position: absolute; 的元素相对于包含它的最近的一个具有定位属性的元素（不是静态的）。

  • 特点

    ：

    • 脱离标准流，周围元素不会受到影响（不会保留空间）。
    • 使用 top、right、bottom、left 可以精确控制位置。
    • 如果没有定位的祖先元素，则相对于<html>元素（根元素）进行定位。

  • 示例

    ：

    .absolute {
    position: absolute;
    top: 50px; /* 距离上方50px */
    left: 50px; /* 距离左侧50px */
}

    CopyInsert

4. 固定定位（Fixed）

  • 相对于视口：设置 position: fixed; 的元素固定在视口的特定位置，即使页面滚动也不会移动。

  • 特点

    ：

    • 脱离标准流，周围元素不会受到影响。
    • 使用 top、right、bottom、left 可以精确控制位置。

  • 示例

    ：

    .fixed {
    position: fixed;
    top: 10px; /* 距离视口上方10px */
    right: 10px; /* 距离视口右侧10px */
}

    CopyInsert

5. 粘滞定位（Sticky）

  • 结合相对定位和固定定位：设置 position: sticky; 的元素在一定条件下（通常是滚动到一定位置时）保持在视口的特定位置。

  • 特点

    ：

    • 最初表现为相对定位，一旦滚动超过该元素的位置，将其固定在视口的指定位置。

  • 示例

    ：

    .sticky {
    position: sticky;
    top: 0; /* 当滚动到上方时固定 */
}

代码实践

<!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 {
            border: 1px solid black;
            height: 200px;
            position: relative; /* 这是相对定位元素 */
        }
        .relative {
            position: relative;
            top: 20px;
            left: 20px;
            background: lightblue;
            padding: 10px;
        }
        .absolute {
            position: absolute;
            top: 50px;
            left: 50px;
            background: lightcoral;
            padding: 10px;
        }
        .fixed {
            position: fixed;
            top: 10px;
            right: 10px;
            background: lightgreen;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="fixed">我是固定定位</div>
    <div class="container">
        <div class="relative">我是相对定位</div>
        <div class="absolute">我是绝对定位</div>
    </div>
    <p>这是一些文本内容。</p>
</body>
</html>
​

image-20241127112532657.png

image-20241127112546201.png 通过在AI练中学中的代码实践，对css的布局技巧有了更好的掌握。

avatar
文章
阅读
粉丝