AI 摘要

文章系统梳理了前端布局核心：先回顾标准文档流与 display 属性，再深入 float 浮动机制、clear 清除、overflow 处理及父级塌陷的四种解决方案；对比 inline-block 与 float 差异后，全面解析 position 四种定位方式，并演示 z-index 层叠与 opacity 透明控制，帮助开发者精准掌控页面元素排列与视觉层级。

此摘要根据文章内容自动生成，仅用于文章内容的解释与总结

网页基本布局

常见网页组成部分

网页的组成部分：

  • 网站导航：一般包括品牌 logo、导航菜单及一些其他信息等。
  • 网页主体：一般包括网页呈现给浏览者的内容。
  • 网页底部：一般包括网站声明、版权信息和相关链接等。
  • 侧边栏：一般包括分类菜单及一些次要信息等。

每一个网页的组成部分都有着重要的作用，一起协作布局，就能给呈现出一个完整的网页。

标准文档流

标准文档流是指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。

  • 块级元素（block）：h1~h6、p、div、li 等。
  • 内联元素（inline）：span、a、img、strong 等。
  • 内联标签可以包含于块级标签中，成为它的子元素。

元素布局属性

display 属性

display 属性用于指定 HTML 标签的显示方式。

display 属性的基本用法：

display: 显示方式;

显示方式：

名称描述
block元素被显示为块元素
inline元素被显示为行内元素
inline-block元素被显示为行内块元素，可以控制元素排到一行
元素既具有行内元素的特性，也具有块元素的特性
none元素不会被显示

示例：display

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            border: black solid 5px;
            display: inline-block;
        }
        span {
            border: black solid 5px;
        }
    </style>
</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
</body>
</html>

示例效果：

浮动

float 属性

float 属性用于定义网页元素在哪个方向浮动。

  • 设置为浮动后，元素会脱离文档流。
  • 没有设置浮动的文字会浮动在浮动元素周围显示，这是浮动的特殊情况。
  • 浮动的文字段落在没有设置宽度的情况下会占满一行。

float 属性的基本用法：

float: 浮动方向;

浮动方向：

名称描述
left元素向左浮动
right元素向右浮动
none（默认值）元素不浮动

示例：float

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 800px;
            height: 400px;
            border: black solid 5px;
        }
        .item1 {
            width: 200px;
            height: 100px;
            border: red solid 5px;
            float: right;
        }
        .item2 {
            width: 200px;
            height: 50px;
            border: red solid 5px;
            float: left;
        }
        .item3 {
            float: left;
            border: red solid 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1">item（右浮动）</div>
        <div class="item2">item（左浮动）</div>
        <div>（没有浮动的文本环绕浮动元素）这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这</div>
        <div class="item3">（浮动的文本没有设置宽度会占满一行）这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段</div>
    </div>
</body>
</html>

示例效果：

clear 属性

clear 属性用于规定哪一侧不允许其他元素浮动，用于清除浮动。

清除浮动的本质是清除浮动元素造成的影响。

  • 可能会产生内边距、外边距显示错误的问题。
  • 可能会影响背景图片的正常显示。
  • 可能会影响排版问题。

clear 属性的基本用法：

clear: 清除方向;

清除方向：

清除方向描述
left元素左边不允许存在浮动元素
right元素右边不允许存在浮动元素
both元素左右两边不允许存在浮动元素
none（默认值）允许浮动元素出现在元素两侧

示例：clear

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 800px;
            height: 400px;
            border: black solid 5px;
        }
        .item1 {
            width: 200px;
            height: 100px;
            border: red solid 5px;
            float: right;
        }
        .item2 {
            width: 200px;
            height: 50px;
            border: red solid 5px;
            float: left;
        }
        .item3 {
            float: left;
            border: red solid 5px;
        }
        .item4 {
            clear: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1">item（右浮动）</div>
        <div class="item2">item（左浮动）</div>
        <div class="item4">（没有浮动的文本环绕浮动元素）这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这</div>
        <div class="item3">（浮动的文本没有设置宽度会占满一行）这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段</div>
    </div>
</body>
</html>

示例效果：

overflow 属性

overflow 属性用于规定当内容溢出盒子时发生的事情，如隐藏溢出部分等。

overflow 属性基本用法：

overflow: 溢出处理方式;

溢出处理方式：

名称描述
visible（默认值）溢出的内容不会被修剪，呈现在盒子外面
hidden溢出的内容会被修剪，且不可见
scroll溢出的内容会被修剪，且会显示滚动条以便查看其余内容
auto如果内容被修剪，浏览器会显示滚动条以便查看其余内容

示例：overflow

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: black solid 5px;
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="box">
    这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本
</div>
</body>
</html>

示例效果：

解决父级边框塌陷

当父盒子内的子元素为浮动、且父盒子没有固定高度时，子元素脱离文档流浮动已经无法撑起来父盒子的边框，父盒子的边框会出现塌陷情况。

解决父级边框塌陷的方案：

  • 设置父元素的高度。该方案简单，但限定了父元素的高度不具备弹性效果。
  • 在浮动元素后添加空 div，结合 clear 属性清除浮动。该方案会造成 HTML 代码冗余。
  • 在父元素中添加 overflow 属性。该方案在有下拉列表框的场景中失效。
  • 在父元素中添加 after 伪类。该方案写法复杂，但没有副作用。

示例：设置父元素高度以解决父级边框塌陷问题

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 800px;
            height: 100px;
            border: black solid 5px;
        }
        .item1 {
            width: 200px;
            height: 100px;
            border: red solid 5px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1">item（左浮动）</div>
    </div>
</body>
</html>

示例效果：

示例：使用空 div + clear 属性以解决父级边框塌陷问题

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 800px;
            border: black solid 5px;
        }
        .item1 {
            width: 200px;
            height: 100px;
            border: red solid 5px;
            float: left;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1">item（左浮动）</div>
        <div class="clear"></div>
    </div>
</body>
</html>

示例效果：

示例：在父元素中添加 overflow 属性以解决父级边框塌陷问题

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 800px;
            border: black solid 5px;
            overflow: hidden;
        }
        .item1 {
            width: 200px;
            height: 100px;
            border: red solid 5px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1">item（左浮动）</div>
    </div>
</body>
</html>

示例效果：

示例：在父元素中添加 after 伪类以解决父级边框塌陷问题

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 800px;
            border: black solid 5px;
        }
        .box:after {
            /** 在父元素后设置空内容、设置块元素，并清除浮动 **/
            content: "";
            display: block;
            clear: both;
        }
        .item1 {
            width: 200px;
            height: 100px;
            border: red solid 5px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item1">item（左浮动）</div>
    </div>
</body>
</html>

示例效果：

inline-block 与 float 的区别

inline-block 属性的特点：

  • inline-block 属性可以让元素排在一行，且支持宽度和高度，添加该属性的元素在标准文档流中。
  • inline-block 位置方向不可控制，元素和元素之间会解析空格。

float 的特点：

  • float 浮动可以让元素排在一行且支持宽度和高度，可以决定排列的方向。
  • float 浮动以后元素脱离文档流，会对周围元素产生影响。

定位

position 属性

position 属性用于设置盒子的位置（即定位）。

position 属性的基本用法：

position: 定位方式;

定位方式：

名称描述
static（默认值）没有定位，元素按标准文档流进行布局
relative相对定位
absolute绝对定位
fixed固定定位

静态定位

static 定位方式为默认值，表示盒子保持在原本应该在的位置，没有任何移动效果。

示例：静态定位

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 600px;
            border: black solid 5px;
        }
        .item1 {
            height: 100px;
            background-color: red;
            border: black dashed 2px;
        }
        .item2 {
            height: 100px;
            background-color: blue;
            border: black dashed 2px;
        }
        .item3 {
            height: 100px;
            background-color: green;
            border: black dashed 2px;
        }
        div {
            margin: 20px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
</div>
</body>
</html>

示例效果：

相对定位

relative 定位方式表示盒子相对于它在标准文档流中的默认位置为基准进行位置偏移。

  • 设置相对定位的盒子会相对它原来的位置，通过指定偏移到达新位置。
  • 设置相对定位的盒子仍在标准文档流中，它对父盒子和相邻盒子都没有任何影响。
  • 设置相对定位的盒子原来的位置会被保留下来。
  • 相对定位一般很少自己单独使用，会配合绝对定位使用。

相对定位的基本用法：

position: relative;
top: 偏移量;
bottom: 偏移量;
left: 偏移量;
right: 偏移量;

偏移量：

取值描述
偏移量>0top 向下偏移，left 向右偏移
偏移量<0top 向上偏移，left 向左偏移

示例：相对定位

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 600px;
            border: black solid 5px;
        }
        .item1 {
            height: 100px;
            background-color: red;
            border: black dashed 2px;
            position: relative;
            top: -40px;
            left: 200px;
        }
        .item2 {
            height: 100px;
            background-color: blue;
            border: black dashed 2px;
        }
        .item3 {
            height: 100px;
            background-color: green;
            border: black dashed 2px;
        }
        div {
            margin: 20px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
</div>
</body>
</html>

示例效果：

绝对定位

absolute 定位方式表示盒子以它最近的一个已经定位的祖先元素为基准进行位置偏移。

  • 已经定位：position 属性被设置且属性值非 static。
  • 祖先元素：从标准文档流的任意节点开始，走到跟节点，经过的所有节点都是它的祖先。
  • 设置绝对定位的盒子会脱离标准文档流，宽度也变为仅能容纳里面的文本宽度。
  • 设置绝对定位的盒子可以设置外边距，且不会与其他边距合并。
  • 设置绝对定位的盒子没有设置偏移量，那么它将保持在原来的位置。
  • 一般情况下，绝对定位用在下拉菜单、弹窗等场景。

示例：绝对定位

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 600px;
            border: black solid 5px;
            position: relative;
        }
        .item1 {
            height: 100px;
            background-color: red;
            border: black dashed 2px;
            position: absolute;
            top: -10px;
            left: 200px;
        }
        .item2 {
            height: 100px;
            background-color: blue;
            border: black dashed 2px;
        }
        .item3 {
            height: 100px;
            background-color: green;
            border: black dashed 2px;
        }
        div {
            margin: 20px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
</div>
</body>
</html>

示例效果：

固定定位

fixed 定位方式表示盒子以浏览器窗口为基准进行位置偏移。

  • 偏移量不会随着滚动条的移动而移动。
  • 固定定位一般用于网页两边的固定广告、返回顶部图标、吸顶导航栏等场景。

示例：固定定位

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 600px;
            border: black solid 5px;
        }
        .item1 {
            height: 100px;
            background-color: red;
            border: black dashed 2px;
            position: fixed;
            top: 0px;
            left: 200px;
        }
        .item2 {
            height: 100px;
            background-color: blue;
            border: black dashed 2px;
        }
        .item3 {
            height: 100px;
            background-color: green;
            border: black dashed 2px;
        }
        div {
            margin: 20px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
</div>
</body>
</html>

示例效果：

重叠层样式

z-index 属性

z-index 属性用于调整元素定位时重叠层的上下位置。

示例：z-index

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            background-color: green;
            position: relative;
            z-index: 999;
        }
        .box2 {
            width: 500px;
            height: 500px;
            background-color: red;
            position: absolute;
            top: 100px;
            left: 100px;
        }

    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>

示例效果：

网页元素透明度

opacity 属性和 filter 属性用于设置网页元素的透明度。

网页元素透明度的基本用法：

opacity: a;

filter: alpha(opacity=b);

网页元素透明度：

名称描述
aa 的取值范围为 0~1，a 越小越透明
bb 的取值范围为 0~100，b 越小越透明

示例：opacity

入口页面（index.html）：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            background-color: green;
            opacity: 0.7;
            position: relative;
            z-index: 999;
        }
        .box2 {
            width: 500px;
            height: 500px;
            background-color: red;
            position: absolute;
            top: 100px;
            left: 100px;
        }

    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>

示例效果：