当前位置：首页 > article >正文

CSS基础（盒子模型的组成、内容溢出、隐藏元素的方式、样式的继承、元素的默认样式、布局技巧、元素之间的空白问题、行内块元素的幽灵空白问题）

article 2025/2/24 5:20:34

文章目录

1. 盒子模型的组成
- 1.1 内容区
- 1.2 默认宽度
- 1.3 内边距
- - 1.3.1 内边距属性
  - 1.3.2 复合属性
  - 1.3.3 单位
  - 1.3.4 注意事项
- 1.4 边框
- - 1.4.1 边框属性
  - 1.4.2 复合属性
  - 1.4.3 单方向边框
  - 1.4.4 边框样式
  - 1.4.5 注意事项
- 1.5 外边距
- - 1.5.1 外边距属性
  - 1.5.2 复合属性
  - 1.5.3 注意事项
- 1.6 外边距塌陷问题
- - 1.6.1 发生外边距塌陷的条件
  - 1.6.2 外边距塌陷的规则
  - 1.6.3 如何避免外边距塌陷
2. 内容溢出
- 2.1 内容溢出的情景
- 2.2 处理内容溢出的CSS属性
- - 2.2.1 overflow
  - 2.2.2 overflow-x和overflow-y
- 2.3 与内容溢出相关的其它属性
- - 2.3.1 text-overflow
  - 2.3.2 resize
3. 隐藏元素的方式
- 3.1 display: none;
- 3.2 visibility: hidden;
- 3.3 opacity: 0;
- 3.4 height: 0; width: 0; overflow: hidden;
4. 样式的继承
- 4.1 继承的属性
- 4.2 继承的规则
- 4.3 控制继承
5. 扩展：浏览器控制台中Elements栏目中各个区域的含义
6. 元素的默认样式
7. 布局技巧
- 7.1 行内元素、行内块元素可以被父元素当作文本处理
- 7.2 如何让子元素在父元素中水平居中
- 7.3 如何让子元素在父元素中垂直居中
8. 元素之间的空白问题
- 8.1 空白产生的原因
- 8.2 解决方案
9. 行内块元素的幽灵空白问题
- 9.1 问题呈现
- 9.2 问题产生的原因
- 9.3 解决方案

视频教程： 117_CSS_盒子模型的组成部分

1. 盒子模型的组成

在这里插入图片描述

在CSS中，盒子模型是理解布局的关键概念，它描述了如何计算一个元素的总宽度和高度。一个盒子的组成部分包括：

内容（Content）：
- 这是盒子模型的中心部分，包括元素的内容，如文本、图片等
- width 和 height 属性设置内容区域的宽度和高度
内边距（Padding）：
- 内边距是内容周围的空白区域，位于内容和边框之间
- 可以使用 padding 属性来设置，该属性可以接受一到四个值（上、右、下、左）
- 也可以单独设置 padding-top、padding-right、padding-bottom、padding-left
边框（Border）：
- 边框位于内边距的外围，它包裹着内边距和内容
- 可以使用 border 属性来设置边框的宽度、样式和颜色
- 也可以单独设置 border-width、border-style、border-color，或者更具体地设置 border-top、border-right、border-bottom、border-left
外边距（Margin）：
- 外边距是盒子与其他元素之间的空白区域
- 可以使用 margin 属性来设置，与内边距类似，可以接受一到四个值
- 也可以单独设置 margin-top、margin-right、margin-bottom、margin-left

1.1 内容区

在CSS盒子模型中，内容区（Content Area）是指盒子模型的核心部分，它包含了元素的实际内容，例如文本、图像或视频。以下是关于内容区的几个关键点：

尺寸：
- 内容区的宽度（Width）和高度（Height）可以通过CSS的 width 和 height 属性来设置
- 如果没有显式设置这些属性，内容区的大小将根据其内容的自然大小来决定
定位：
- 内容区位于内边距（Padding）内部，如果有设置的话
- 它被内边距、边框（Border）和外边距（Margin）所包围
背景：
- 内容区的背景可以通过 background-color、background-image、background-repeat、background-position 和 background-size 等属性来设置
- 默认情况下，背景延伸到内容区，但可以通过 background-clip 属性来改变这一行为
溢出：
- 如果内容超出了内容区所设定的尺寸，可以使用 overflow 属性来控制如何处理溢出的内容。可用的值包括 visible（默认值，内容不会被裁剪，呈现在盒子外）、hidden（溢出的内容会被裁剪，不显示）、scroll（提供滚动条以便查看所有内容）和 auto（根据需要提供滚动条）
盒子大小：
- 在标准盒模型中，width 和 height 属性只定义内容区的尺寸，不包括内边距、边框或外边距
- 使用 box-sizing 属性可以改变这种行为。例如，box-sizing: border-box; 会使得 width 和 height 属性包括了内容区、内边距和边框的尺寸

1.2 默认宽度

默认宽度指的是不设置 width 属性时，元素所呈现出来的宽度
总宽度 = 父元素的 content - 自身的左右 margin
内容区的宽度 = 父元素的 content - 自身的左右margin - 自身的左右 border - 自身的左右 padding

在CSS中，大多数元素的默认宽度并不是固定的，而是由其内容的大小决定的。这意味着如果没有显式设置宽度（width）属性，元素的宽度将根据以下因素自动调整：

内容的宽度：元素的宽度会扩展到足以容纳其所有内容。如果内容是一行文本，那么元素的宽度将至少与这行文本一样宽
内边距（Padding）：如果设置了内边距，元素的宽度将包括内容的宽度加上左右内边距
边框（Border）：如果设置了边框，元素的宽度还将包括边框的宽度
外边距（Margin）：外边距不计算在元素的宽度内，但它会影响元素在页面上的布局

对于块级元素（如<div>、<p>、<h1>-<h6>等），如果没有设置宽度，它们通常会扩展到填满其父元素的宽度（减去任何内边距、边框和外边距）。这就是为什么块级元素默认会占据整个可用水平空间，除非它们被设置了宽度或者被浮动、定位等

1.3 内边距

在CSS盒子模型中，内边距（Padding）是指盒子内容区与盒子边框之间的空间。内边距用于增加内容与边框之间的距离，从而提高内容的可读性和美观性。以下是关于内边距的一些关键点：

1.3.1 内边距属性

padding-top
padding-right
padding-bottom
padding-left

1.3.2 复合属性

内边距属性可以单独设置，也可以使用复合属性 padding 一次性设置所有四个方向的内边距

padding 可以接受以下几种值：

一个值：同时设置上、右、下、左四个方向的内边距
两个值：第一个值设置上下内边距，第二个值设置左右内边距
三个值：第一个值设置上内边距，第二个值设置左右内边距，第三个值设置下内边距
四个值：按照顺时针顺序分别设置上、右、下、左四个方向的内边距

1.3.3 单位

内边距可以使用多种长度单位来设置，如像素（px）、百分比（%）、em、rem 等

1.3.4 注意事项

内边距是透明的，并且会显示元素的背景颜色或背景图像
内边距会影响元素的总宽度和高度。在标准盒模型中，元素的 width 和 height 属性只包括内容区，不包括内边距和边框。但在 box-sizing: border-box; 模式下，width 和 height 属性包括了内容区、内边距和边框
内边距不能为负值

1.4 边框

在CSS盒子模型中，边框（Border）是围绕在元素内容和内边距外围的线条。边框可以用来分隔不同的元素，增加视觉效果，或者强调某个元素。以下是关于边框的一些关键点：

1.4.1 边框属性

border-width：设置边框的宽度
border-style：设置边框的样式（如实线、虚线、点线等）
border-color：设置边框的颜色

1.4.2 复合属性

边框属性可以单独设置，也可以使用简写属性 border 一次性设置所有四个边框的宽度、样式和颜色

border 可以接受以下几种值：

一个值：同时设置所有四个边框的样式和颜色，宽度默认为中等（medium）
两个值：第一个值设置宽度，第二个值设置样式和颜色
三个值：第一个值设置宽度，第二个值设置样式，第三个值设置颜色

1.4.3 单方向边框

也可以单独设置每个方向的边框：

border-top
border-right
border-bottom
border-left

这些属性同样可以接受一个、两个或三个值

1.4.4 边框样式

边框样式可以设置为以下几种值：

none：无边框
hidden：与 none 相同，但在表格中可能有所不同
dotted：点线边框
dashed：虚线边框
solid：实线边框
double：双线边框

1.4.5 注意事项

边框的宽度会影响元素的总宽度和高度。在标准盒模型中，边框宽度加上元素的 width 和 height 以及内边距和外边距，共同决定了元素在页面上的实际大小
边框的颜色默认与元素文本颜色相同，除非另外指定
边框样式不能继承，必须显式设置

1.5 外边距

在CSS盒子模型中，外边距（Margin）是围绕在元素边框边缘的空白区域。外边距用于控制元素之间的空间，以及元素与包含块（如父元素或页面边缘）之间的空间。以下是关于外边距的一些关键点：

1.5.1 外边距属性

margin-top：设置元素顶部的外边距
margin-right：设置元素右侧的外边距
margin-bottom：设置元素底部的外边距
margin-left：设置元素左侧的外边距

1.5.2 复合属性

外边距属性可以单独设置，也可以使用复合属性 margin 一次性设置所有四个方向的外边距

margin 可以接受以下几种值：

一个值：同时设置所有四个方向的外边距。
两个值：第一个值设置顶部和底部的外边距，第二个值设置右侧和左侧的外边距
三个值：第一个值设置顶部的外边距，第二个值设置左右两侧的外边距，第三个值设置底部的外边距
四个值：按照顺时针顺序分别设置顶部、右侧、底部和左侧的外边距

1.5.3 注意事项

外边距可以是负值，这会导致元素重叠
外边距的单位可以是像素（px）、百分比（%）或其他CSS长度单位
上下方向的外边距对于行内元素（inline elements）不起作用，除非将其设置为 display: inline-block; 或 `display: block;
外边距不会影响元素的内部空间，只影响元素与其他元素之间的空间
在某些情况下使用 margin: auto; 可以实现水平居中布局

1.6 外边距塌陷问题

在CSS中，外边距塌陷（Margin Collapse）是指相邻的垂直外边距（margin）会合并为一个外边距，这个合并后的外边距等于两个相邻外边距中的较大者。这种现象只会发生在垂直方向上，即 margin-top 与 margin-bottom 之间。以下是关于外边距塌陷的一些详细说明：

1.6.1 发生外边距塌陷的条件

常规流中的块级盒子：只有处于常规文档流中的块级盒子（不包括浮动和绝对定位的元素）才会发生外边距塌陷
相邻元素：垂直方向上相邻的元素之间会发生外边距塌陷。这里的“相邻”可以是兄弟元素之间，也可以是父子元素之间
没有内容分隔：如果两个元素之间没有内容、边框或内边距分隔，它们的外边距会塌陷

1.6.2 外边距塌陷的规则

正边距：如果两个相邻的外边距都是正数，那么塌陷后的外边距等于两个外边距中的较大者
一正一负：如果两个相邻的外边距一正一负，塌陷后的外边距是两个外边距的和
都是负边距：如果两个相邻的外边距都是负数，塌陷后的外边距等于两个外边距中的较小者（绝对值较大者）

1.6.3 如何避免外边距塌陷

使用边框或内边距：在元素之间添加边框（border）或内边距（padding）可以阻止外边距塌陷
创建BFC：通过创建块级格式化上下文（BFC），可以阻止外边距塌陷。例如，设置元素的 overflow 属性为非 visible 值（如 hidden、scroll 或 auto）可以创建一个新的BFC
浮动和定位：浮动元素（float）和绝对定位元素（position: absolute 或 position: fixed）不会与其他元素发生外边距塌陷

2. 内容溢出

在CSS中，内容溢出（Content Overflow）是指当元素的内容超出了为其分配的尺寸（宽度或高度）时发生的情况。以下是一些关于内容溢出的关键点以及如何处理它：

2.1 内容溢出的情景

宽度溢出：当元素的宽度不足以容纳其所有内容时，内容会从元素的右侧溢出
高度溢出：当元素的高度不足以容纳其所有内容时，内容会从元素的底部溢出

2.2 处理内容溢出的CSS属性

2.2.1 overflow

overflow 属性定义了如果内容溢出元素框时应该发生的事情，有以下几个值：

visible：默认值，内容会溢出元素框，不剪切也不添加滚动条
hidden：内容会被剪切，并且不会显示溢出的部分
scroll：内容会被剪切，但浏览器会添加滚动条以便查看溢出的内容
auto：如果内容溢出，浏览器会添加滚动条；如果没有溢出，则不添加滚动条

2.2.2 overflow-x和overflow-y

overflow-x 和 overflow-y 属性分别控制元素在水平方向和垂直方向上的内容溢出行为

2.3 与内容溢出相关的其它属性

2.3.1 text-overflow

当文本溢出包含元素时，这个属性可以指定如何显示省略符号（…）。通常与 white-space: nowrap; 和 overflow: hidden; 一起使用

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2.3.2 resize

resize 属性允许用户通过拖动来调整元素的尺寸，但仅在 overflow 属性不为 visible 时有效

.element {
  overflow: auto;
  resize: both; /* 或者 horizontal, vertical */
}

3. 隐藏元素的方式

在CSS中，有多种方法可以用来隐藏元素，每种方法都有其特定的用途和效果。以下是一些常用的方法：

3.1 display: none;

元素会被完全从文档流中移除，不占据任何空间，也不会响应任何事件

.hidden {
  display: none;
}

3.2 visibility: hidden;

元素会保持其空间，但不会显示，也不会响应任何事件

.hidden {
  visibility: hidden;
}

3.3 opacity: 0;

元素会变得完全透明，但仍然占据空间，并且可以响应事件

.hidden {
  opacity: 0;
}

3.4 height: 0; width: 0; overflow: hidden;

将元素的高度和宽度设置为0，并隐藏溢出的内容

.hidden {
  height: 0;
  width: 0;
  overflow: hidden;
}

4. 样式的继承

能继承的属性一般都是不影响布局的，也就是和盒子模型无关的属性

在CSS中，样式继承是指某些CSS属性值可以从父元素传递到子元素。继承是CSS的一个基本特性，它允许开发者避免重复编写相同的样式规则

4.1 继承的属性

不是所有的CSS属性都是可继承的。以下是一些常见的可继承属性：

字体相关的属性：font-family, font-size, font-style, font-variant, font-weight, font, line-height
文本相关的属性：color, text-align, text-indent, text-transform, white-space, word-spacing
列表相关的属性：list-style, list-style-type, list-style-position, list-style-image
表格相关的属性：border-collapse, border-spacing
其他属性：visibility, cursor

4.2 继承的规则

直接继承：子元素直接继承父元素的样式
无继承的属性：有些属性默认是不可继承的，例如border, margin, padding, background等
继承的覆盖：如果子元素有自己的样式规则，它会覆盖继承来的样式

4.3 控制继承

inherit：可以将不可继承的属性设置为继承自父元素

.child {
  color: inherit; /* 强制继承父元素的color属性 */
}

initial：可以将属性设置为它的初始值，忽略继承

.child {
  color: initial; /* 使用color属性的默认值 */
}

unset：如果属性是可继承的，则unset等同于inherit；如果属性是不可继承的，则unset等同于initial

.child {
  color: unset; /* 如果color可继承，则继承父元素；否则使用默认值 */
}

revert：将属性重置为浏览器的默认样式，而不是CSS规范定义的默认值

5. 扩展：浏览器控制台中Elements栏目中各个区域的含义

视频教程：128_CSS_样式的继承

打开浏览器的控制台时，在 Elements 栏目中可以看到几个区域，各个区域的含义如下：

element.style：元素的内联样式，也就是直接在元素上写的样式，例如<div style="background-color: white"></div>
#d3-index.css：通过外部 CSS 文件引入的样式
#d3-html：在源 HTML 文件中书写的样式
user agent stylesheet：浏览器为元素赋予的默认样式
inherited from div#2：从祖先元素继承下来的样式

在这里插入图片描述

6. 元素的默认样式

优先级：元素的默认样式 > 继承的样式
如果要重置元素的默认样式，选择器需要直接选择器到该元素

浏览器为不同的HTML标签提供了一套基础的样式规则，例如：

body 标签通常会有一定的外边距（margin），这使得页面内容不会紧贴浏览器窗口的边缘
p 标签（段落）通常会有一些上下外边距（margin-top 和 margin-bottom），以便段落之间有一定的间距
列表项（如 ul, ol）会有项目符号或编号，并且列表项本身也会有内边距（padding）和外边距（margin）
表格元素（如 table, th, td）会有一定的边框、填充以及可能的间距设置
h1 到 h6 标题标签会有较大的字体大小以及额外的外边距

7. 布局技巧

视频教程：130_CSS_布局小技巧

7.1 行内元素、行内块元素可以被父元素当作文本处理

可以像处理文本对齐一样，去处理行内元素、行内块在父元素中的对齐

例如 text-align、line-height、text-indent 等

7.2 如何让子元素在父元素中水平居中

若子元素为块元素，给子元素加上：margin:0 auto;
若子元素为行内元素、行内块元素，给父元素加上：text-align:center

7.3 如何让子元素在父元素中垂直居中

若子元素为块元素，给子元素加上: margin-top，具体的值为：(父元素 content - 子元素盒子总高）/ 2
若子元素为行内元素、行内块元素
- 让父元素的 height = line-height，每个子元素都加上：vertical-align:middle;
- 若想绝对垂直居中，设置父元素的 font-size 属性为 0

8. 元素之间的空白问题

在HTML和CSS中，元素之间的空白问题通常指的是元素之间出现的额外空间，这可能是由于HTML源代码中的空白字符（如空格、制表符、换行符）造成的。以下是一些关于CSS元素之间空白问题的常见情况和解决方案：

8.1 空白产生的原因

在 HTML 中将几个行内元素（如<span>、<a>、<img>）写在一起，并在它们之间或周围放置空格或换行时，浏览器会在这些元素之间渲染出空白间隙

8.2 解决方案

将父元素的font-size设置为0，然后在子元素中重新设置字体大小。这会消除内联元素之间的空白，因为空白字符的宽度会变成0

9. 行内块元素的幽灵空白问题

视频教程：132_CSS_行内块的幽灵空白问题

9.1 问题呈现

图片底部和容器底部之间有空白

在这里插入图片描述

9.2 问题产生的原因

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间有一定距离

9.3 解决方案

给行内块元素设置 vertical-align ，值不为 baseline 即可，设置为 middle、bottom、top 均可
若父元素中只有一张图片，设置图片为 display:block
给父元素设置 font-size:0，如果该行内块内部还有文本，需要针对文本设置 font-size 属性

查看全文

http://www.kler.cn/a/558484.html

利用 AI 大模型驱动企业智能化转型：Cherry Studio 与 Anything LLM 的应用探索

海康威视摄像头ISUP(原EHOME协议) 摄像头实时预览springboot 版本java实现，并可以在浏览器vue前端播放(附带源码)

deepseek云端部署及结合本地知识库（结合api调用）可视化界面应用

【拓展】二进制的原码、补码、反码及相互转换方式

Linux系统管理与编程01：准备工作

深度学习（3）-TensorFlow入门（梯度带）

`pip freeze ＞ requirements.txt` 命令

Python 错误和异常处理

正则表达式特殊字符

腾讯SQL面试题解析：如何找出连续5天涨幅超过5%的股票

LSTM 与随机森林的对比

LeetCode216

Python 的 Lambda 函数及应用场景

Stm32中SysTick 定时器的使用

Ubuntu 下 nginx-1.24.0 源码分析 - ngx_array_init 函数

深度学习课程作业（Week1）

Websocket——心跳检测

【愚公系列】《Python网络爬虫从入门到精通》027-初识Pandas和Series对象

【Bert】自然语言（Language Model）入门之---Bert

C++学习笔记第一天（vs工程创建+基本知识）

文章目录

1. 盒子模型的组成

1.1 内容区

1.2 默认宽度

1.3 内边距

1.3.1 内边距属性

1.3.2 复合属性

1.3.3 单位

1.3.4 注意事项

1.4 边框

1.4.1 边框属性

1.4.2 复合属性

1.4.3 单方向边框

1.4.4 边框样式

1.4.5 注意事项

1.5 外边距

1.5.1 外边距属性

1.5.2 复合属性

1.5.3 注意事项

1.6 外边距塌陷问题

1.6.1 发生外边距塌陷的条件

1.6.2 外边距塌陷的规则

1.6.3 如何避免外边距塌陷

2. 内容溢出

2.1 内容溢出的情景

2.2 处理内容溢出的CSS属性

2.2.1 overflow

2.2.2 overflow-x和overflow-y

2.3 与内容溢出相关的其它属性

2.3.1 text-overflow

2.3.2 resize

3. 隐藏元素的方式

3.1 display: none;

3.2 visibility: hidden;

3.3 opacity: 0;

3.4 height: 0; width: 0; overflow: hidden;

4. 样式的继承

4.1 继承的属性

4.2 继承的规则

4.3 控制继承

5. 扩展：浏览器控制台中Elements栏目中各个区域的含义

6. 元素的默认样式

7. 布局技巧

7.1 行内元素、行内块元素可以被父元素当作文本处理

7.2 如何让子元素在父元素中水平居中

7.3 如何让子元素在父元素中垂直居中

8. 元素之间的空白问题

8.1 空白产生的原因

8.2 解决方案

9. 行内块元素的幽灵空白问题

9.1 问题呈现

9.2 问题产生的原因

9.3 解决方案

相关文章：