CSS布局技巧 ｜ 青训营

湖边的奥利奥
127 阅读3分钟

1. CSS布局

CSS布局是网页设计中的关键概念，用于控制网页上各个元素的位置、大小和相互关系。通过CSS布局，开发者可以实现各种各样的页面结构和外观，创造出各种各样的视觉效果和用户体验，从而实现与用户互动的丰富网页内容。

2. 标准流布局

CSS标准流布局是指在网页中，元素按照其在HTML文档中出现的顺序，自上而下，从左到右进行排列布局的方式。这种布局方式是默认的，当没有其他CSS布局属性干扰时，HTML元素会根据标准流布局进行排列。

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 960px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background-color: #f2f2f2;
            padding: 10px;
        }

        .main-content {
            background-color: #ffffff;
            padding: 20px;
        }

        .footer {
            background-color: #f2f2f2;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>网页标题</h1>
        </div>
        <div class="main-content">
            <p>这是网页的主要内容。</p>
        </div>
        <div class="footer">
            <p>版权信息 © 2023</p>
        </div>
    </div>
</body>

</html>

1.png

3. 浮动布局

浮动布局用于将元素从正常的文档流中脱离，使其向左或向右浮动，从而实现多列布局、文字环绕效果以及其他一些排列需求。浮动最初是为了实现图文混排效果而引入的，但后来被广泛应用于网页设计中。浮动布局的基本思想是，将一个或多个元素移动到其所在容器的左侧或右侧，让其他内容紧随其后。通过浮动，元素可以在同一行上并排显示，或者在一定宽度内自动换行。这种技术对于创建多列布局、侧边栏、瀑布流式排列等场景非常有用。

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 960px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background-color: #f2f2f2;
            padding: 10px;
        }

        .main-content {
            background-color: #ffffff;
            padding: 20px;
            float: left;
            /* 左浮动 */
            width: 70%;
        }

        .sidebar {
            background-color: #f2f2f2;
            padding: 20px;
            float: right;
            /* 右浮动 */
            width: 30%;
        }

        .footer {
            clear: both;
            background-color: #f2f2f2;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>网页标题</h1>
        </div>
        <div class="main-content">
            <p>这是网页的主要内容。</p>
        </div>
        <div class="sidebar">
            <h2>侧边栏</h2>
            <p>这是侧边栏的内容。</p>
        </div>
        <div class="footer">
            <p>版权信息 © 2023</p>
        </div>
    </div>
</body>

</html>

2.png

在浮动布局中，使用 `float` 属性来指定元素的浮动方向。常见的取值包括：
  • float: left;：将元素向左浮动，使其在容器中靠左显示。
  • float: right;：将元素向右浮动，使其在容器中靠右显示。

浮动的元素会影响其后续元素的位置，未浮动的元素会环绕在浮动元素的周围。但是，浮动元素脱离了正常文档流，可能会导致一些布局问题，如父元素的高度塌陷等。为了解决这些问题，通常需要使用清除浮动的技术，比如在容器的末尾使用 clear: both; 或者在容器内部使用伪元素 ::after 来清除浮动。

4. 定位布局

定位布局通过指定元素相对于其父元素或文档视口的位置来控制元素的摆放。定位布局可以让元素脱离标准流布局，以更精确的方式摆放在页面上。这种技术通常用于实现特定的布局效果，如居中、重叠、悬浮提示框等。

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 960px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background-color: #f2f2f2;
            padding: 10px;
        }

        .main-content {
            background-color: #ffffff;
            padding: 20px;
            float: left;
            width: 70%;
        }

        .sidebar {
            background-color: #f2f2f2;
            padding: 20px;
            float: right;
            width: 30%;
        }

        .footer {
            position: absolute;
            /* 绝对定位 */
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background-color: #f2f2f2;
            padding: 10px;
            width: 100%;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>网页标题</h1>
        </div>
        <div class="main-content">
            <p>这是网页的主要内容。</p>
        </div>
        <div class="sidebar">
            <h2>侧边栏</h2>
            <p>这是侧边栏的内容。</p>
        </div>
        <div class="footer">
            <p>版权信息 © 2023</p>
        </div>
    </div>
</body>

</html>

3.png

在定位布局中，使用 `position` 属性来定义元素的定位方式，常见的取值包括：
  1. position: static;：默认值，元素按照标准流布局排列，不受定位影响。
  2. position: relative;：相对定位，元素相对于其原始位置进行偏移。使用 top、right、bottom 和 left 属性可以调整元素的位置。
  3. position: absolute;：绝对定位，元素相对于最近的已定位（非position: static;）的祖先元素进行定位。如果没有已定位的祖先元素，则相对于文档视口进行定位。
  4. position: fixed;：固定定位，元素相对于文档视口进行定位，不会随着页面滚动而改变位置。

除了 position 属性外，还可以使用其他属性来进一步控制定位布局：

  • top、right、bottom、left：用于相对或绝对定位元素的偏移距离。
  • z-index：定义元素在堆叠上下文中的层级关系，用于控制元素的叠放顺序。
avatar
文章
阅读
粉丝