【前端(四)】CSS 知识梳理：显示模式与盒子模型

文章目录

[1. 元素的显示模式（display）](#1. 元素的显示模式（display）)
- [1.1 三类显示模式对比](#1.1 三类显示模式对比)
- [1.2 总结常见元素显示模式](#1.2 总结常见元素显示模式)
- [1.3 修改元素的显示模式：display 属性](#1.3 修改元素的显示模式：display 属性)
[2. 盒子模型（Box Model）](#2. 盒子模型（Box Model）)
[3. 盒子模型的各属性详解](#3. 盒子模型的各属性详解)
- [3.1 内容区（content）](#3.1 内容区（content）)
- - [3.1.1 默认宽高](#3.1.1 默认宽高)
  - [3.1.2 宽高相关属性](#3.1.2 宽高相关属性)
- [3.2 内边距（padding）](#3.2 内边距（padding）)
- - [3.2.1 行内元素的特殊性](#3.2.1 行内元素的特殊性)
  - [3.2.2 属性列表](#3.2.2 属性列表)
- [3.3 边框（border）](#3.3 边框（border）)
- - [3.3.1 基本属性](#3.3.1 基本属性)
- [3.4 外边距（margin）](#3.4 外边距（margin）)
- - [3.4.1 行内元素的特殊性](#3.4.1 行内元素的特殊性)
  - [3.4.2 属性列表](#3.4.2 属性列表)
  - [与 padding 的两个重要区别](#与 padding 的两个重要区别)
[4. 外边距的特殊问题](#4. 外边距的特殊问题)
- [4.1 父子 margin 塌陷（Collapse）](#4.1 父子 margin 塌陷（Collapse）)
- [4.2 兄弟 margin 合并问题](#4.2 兄弟 margin 合并问题)
[5. 内容溢出处理：overflow](#5. 内容溢出处理：overflow)
[6. 默认样式与重置](#6. 默认样式与重置)
[7. 布局小技巧（居中）](#7. 布局小技巧（居中）)
- [7.1 水平居中](#7.1 水平居中)
- [7.2 垂直居中](#7.2 垂直居中)

1. 元素的显示模式（display）

在 CSS 中，元素根据其默认的显示特性分为三类：块级元素 、行内元素 、行内块元素。理解它们的区别是掌握布局的基础。

1.1 三类显示模式对比

特性	块级元素（block）	行内元素（inline）	行内块元素（inline-block）
是否独占一行	是	否（同行可多个）	否（同行可多个）
默认宽度	撑满父元素	由内容撑开	由内容撑开
默认高度	由内容撑开	由内容撑开	由内容撑开
能否设置宽高	能	不能	能
能否设置上下margin	能	不能（无效）	能

📌 历史补充：元素早期只分为：行内元素、块级元素，区分条件也只有一条："是否独占一行"，如果按照这种分类方式，行内块元素应该算作行内元素。inline-block 是后来引入的混合模式。它让元素既能同行排列，又能像块级一样控制宽高。

1.2 总结常见元素显示模式

🔲 块级元素（block）

结构根：<html> <body>
排版：<div> <h1>~<h6> <p> <hr> <pre>
列表：<ul> <ol> <li> <dl> <dt> <dd>
表格容器：<table> <thead> <tbody> <tfoot> <tr> <caption>
表单容器：<form> <option>

📝行内元素（inline）

文本语义：<span> <br> <em> <strong> <sup> <sub> <del> <ins>
链接与标签：<a> <label>

🖼️行内块元素（inline-block）

多媒体：<img> <video> <audio>
表单控件：<input> <textarea> <select>
表格单元格：<td> <th>
嵌入内容：<iframe>

🖼️ 行内块元素 inline-block
🖼️ 图像多媒体

<img>
🧩 表格单元格

<td> <th>
🎛️ 表单控件

<input> <textarea> <select> <button>
🖥️ 嵌入框架

<br> <em> <strong> <sup> <sub> <del> <ins>
🔗 链接与标签

<a> <label>
🔲 块级元素 block
🏗️ 主体结构

<html> <body>
✍️ 排版标签

<h1>~<h6> <hr> <p> <pre> <div>
📋 列表标签

<ul> <ol> <li> <dl> <dt> <dd>
📊 表格相关

<table> <tbody> <thead> <tfoot> <tr> <caption>
📝 表单容器

<form> <option>
📄 HTML 元素显示模式
核心分类与标签体系

1.3 修改元素的显示模式：display 属性

通过 CSS 的 display 属性可以改变元素的默认显示行为：

属性值	效果
`block`	转为块级元素（独占一行，可设宽高）
`inline`	转为行内元素（同行排列，不可设宽高，上下margin无效）
`inline-block`	转为行内块元素（同行排列，可设宽高）
`none`	隐藏元素，不占任何空间（如同不存在）

⚠️ 与 visibility: hidden 的区别：

visibility: hidden 会隐藏元素，但仍然占据原来的位置（保留占位元素的大小依然保持），而 display: none 彻底消失。不但看不见，也不占用任何位置，没有大小宽高。

2. 盒子模型（Box Model）

CSS 将每个元素视为一个矩形的"盒子"，由内向外依次为：

content：内容区域（文字、图片、子元素）
padding：内边距，内容与边框之间的空白
border：边框，包裹 padding 和 content
margin：外边距，盒子与其他元素的距离

✅ 关键点：margin 不影响盒子本身的可见大小（只影响位置），而 border + padding + content 共同决定了盒子的实际占地大小。

3. 盒子模型的各属性详解

3.1 内容区（content）

3.1.1 默认宽高

元素类型	宽高默认行为
块级元素	宽度默认 `auto` （填满父元素 content 区）高度由内容撑开
行内元素	宽高均由内容撑开，无法设置 `width` / `height`
行内块元素	宽高均由内容撑开，可以设置 `width` / `height`

3.1.2 宽高相关属性

CSS 属性名	功能	属性值
width	设置内容区域宽度	长度
max-width	设置内容区域的最大宽度	长度
min-width	设置内容区域的最小宽度	长度
height	设置内容区域的高度	长度
max-height	设置内容区域的最大高度	长度
min-height	设置内容区域的最小高度	长度

📌 注意：width / height 默认设置的是 content 的宽高，不包含 padding / border / margin。

3.2 内边距（padding）

padding 用于在内容与边框之间创造空白。

3.2.1 行内元素的特殊性

行内元素可以设置左右 padding，效果正常。
行内元素也可以设置上下 padding（背景会扩大），但不会撑大父元素的行高，可能造成与其他元素重叠。因此一般说"上下 padding 无效"指的是不影响周围布局，但并非完全不能设置。

3.2.2 属性列表

CSS 属性名	功能	属性值
padding-top	上内边距	长度
padding-right	右内边距	长度
padding-bottom	下内边距	长度
padding-left	左内边距	长度
padding	复合属性	长度，可以设置 1~4 个值

padding 复合属性的使用规则

padding: 10px; → 四边均为 10px
padding: 10px 20px; → 上下10px，左右20px
padding: 10px 20px 30px; → 上10px，左右20px，下30px
padding: 10px 20px 30px 40px; → 上右下左（顺时针）

3.3 边框（border）

边框可以设置在块级、行内、行内块元素上，效果一致。

3.3.1 基本属性

CSS 属性名	功能	属性值
`border-width`	边框宽度	CSS 中可用的长度值
`border-color`	边框颜色	CSS 中可用的颜色值
`border-style`	边框风格	solid（实线）、dashed（虚线）、dotted（点线）、double（双实线）默认值为 none，因此必须设置 border-style 边框才能显示
`border`	边框复合属性	复合属性，无顺序要求，如 border: 1px solid red;

可以四个方向的单独控制

border-top / border-right / border-bottom / border-left
以及更细粒度的：border-top-style、border-top-width、border-top-color 等。

3.4 外边距（margin）

margin 用于控制盒子之间的间距。

3.4.1 行内元素的特殊性

行内元素左右 margin 有效（会推开相邻行内元素）
行内元素上下 margin 无效（不会改变行高，也不会推开上下元素）

3.4.2 属性列表

CSS 属性名	功能	属性值
margin-top	上外边距	长度
margin-right	右外边距	长度
margin-bottom	下外边距	长度
margin-left	左外边距	长度
margin	复合属性	长度，可以设置 1~4 个值

margin 复合属性的使用规则：

规则与 padding 相同，按照顺时针方向（上、右、下、左）设置：

margin: 10px; → 四个方向外边距都是 10px。
margin: 10px 20px; → 上下外边距为 10px，左右外边距为 20px。
margin: 10px 20px 30px; → 上外边距 10px，左右外边距 20px，下外边距 30px。
margin: 10px 20px 30px 40px; → 上外边距 10px，右外边距 20px，下外边距 30px，左外边距 40px。

与 padding 的两个重要区别

特性	margin	padding
能否为负值	可以（如 `margin-left: -10px;`）	不可以
能否使用 `auto`	可以（用于水平居中）	不可以

✅ margin: 0 auto; 可以让块级元素 在其父容器内水平居中。注意：垂直方向 margin: auto 0; 无效（除非使用 flex 等布局）。

4. 外边距的特殊问题

4.1 父子 margin 塌陷（Collapse）

现象：当父元素没有 border/padding，且第一个子元素有 margin-top（或最后一个子元素有 margin-bottom）时，这个 margin 会"穿透"父元素，作用在父元素的外部。

出现这个问题的两个点：1. 父子元素 2.子元素的 margin-top 或 margin-bottom "穿透"父元素，与父元素外部的 margin 合并。

html 复制代码

<style>
	.box{
		background-color: #ddd;
  }
	.box1{
		background-color: greenyellow;
		margin: 110px;
	}
</style>
<body>
    <div class="box">
        <div class="box1">盒子1</div>
    </div>
</body>

解决方案：

方案一：给父元素设置不为 0 的 padding 。
方案二：给父元素设置宽度不为 0 的 border 。
方案三：给父元素设置 css 样式 overflow:hidden。

💡 为什么有效：padding / border 作为父元素的边界，将子元素的 margin 与父元素外部隔开。这三种方法都让父元素成为一个独立的块级格式化上下文（BFC），BFC 内部的 margin 不会与外部的 margin 合并。

塌陷问题只发生在块级元素之间。如果你把子元素设为 inline-block 或 float，则不会发生塌陷。

html 复制代码

<!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>
        form{
            background-color: blueviolet;
        }
        #rel{
            margin: 100px;
        }
    </style>
</head>
<body>
    <form action="#">
        name<input type="text" name="姓名"> password<input type="password" name="密码" id="rel">
    </form>
</body>
</html>

4.2 兄弟 margin 合并问题

现象：上下相邻 的两个块级元素 ，上元素的 margin-bottom 与下元素的 margin-top 会合并，取两者中的较大值，而不是相加。

html 复制代码

<style>
  .box1 { margin-bottom: 30px; }
  .box2 { margin-top: 20px; }
</style>
<div class="box1">A</div>
<div class="box2">B</div>
<!-- 实际间距为 30px，不是 50px -->

出现这个问题的关键点：1. 相邻兄弟元素 2. 上下margin设置
注意：左右 margin 不会合并，会直接相加。

合并只发生在块级元素。如果两个元素都是 inline-block，则上下 margin 会正常相加。

html 复制代码

<!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>
        .box{
            background-color: orange;
            height: 222px;
            width: 222px;
            border: 7px dotted pink;
            margin: 17px;
        }
        .box1,.box2{
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="box box1">盒子1</div>
    <div class="box box2">盒子2</div>
    <div class="box box3">盒子3</div>
</body>
</html>

而复原为块级，则取最大值。

5. 内容溢出处理：overflow

当子元素尺寸超过父元素时，可以使用 overflow 控制溢出内容的显示。

CSS 属性名	功能	属性值
overflow	溢出内容的处理方式	`visible`：显示，默认值 `hidden`：隐藏 `scroll`：显示滚动条，不论内容是否溢出 `auto`：自动显示滚动条，内容不溢出不显示
overflow-x	水平方向溢出内容的处理方式	同 `overflow`
overflow-y	垂直方向溢出内容的处理方式	同 `overflow`

scroll无论是否溢出始终显示滚动条，而auto只有溢出的时候显示滚动条，所以我们常用的是auto和hidden。

✅ overflow: hidden 除了裁剪溢出内容，还能触发 BFC，解决 margin 塌陷问题（前面已提到）。

6. 默认样式与重置

浏览器会给某些元素施加默认样式，例如：

<a>：下划线、蓝色、鼠标小手
<h1>~<h6>：加粗、特定字号、上下外边距
<p>：上下外边距
<ul> / <ol>：左内边距（或左边距）
<body>：默认有 8px 外边距（四个方向）
...

注意：对于优先级：元素的默认样式 > 继承的样式，因此要覆盖默认样式，必须直接选中该元素（而不是通过父元素继承）。

实际开发中常用 reset.css 或 normalize.css 来统一不同浏览器的默认样式，例如：

css 复制代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

7. 布局小技巧（居中）

7.1 水平居中

子元素类型	方法
块级元素	给子元素设置 `margin: 0 auto;`
行内元素 / 行内块元素	给父元素设置 `text-align: center;`

行内元素、行内块元素，可以被父元素当做文本处理。可以利用父元素的文本属性控制行内/行内块子元素的排列对齐，但不要滥用。

7.2 垂直居中

子元素类型	方法
块级元素（父元素高度固定）	给子元素设置 `margin-top` ，值为：(父元素 content －子元素盒子总高) / 2。
行内元素 / 行内块元素（单行）	给父元素设置 `height = line-height`

⚠️ 如果一行内有多个行内/行内块元素，它们的基线对齐可能导致整体不是严格居中。解决方案：给父元素设置 font-size: 0; 消除基线影响，然后子元素单独设置需要的 font-size。

以上为个人学习总结，旨在梳理个人理解。如有疏漏或不当之处，欢迎指正与交流。