从 HTML 到 CSS：开启网页样式之旅（六）------ 深入探究样式细节、布局与空白处理
- 前言
- 一、样式的继承
-
- 1.继承规则
- [2.会继承的 CSS 属性](#2.会继承的 CSS 属性)
- [3.不会继承的 css 属性](#3.不会继承的 css 属性)
- 二、元素的默认样式
- 三、元素之间的空白问题
- 四、行内块的幽灵空白问题
-
- （一）产生原因
- （二）解决方案
-
- [1. 方案一：给行内块设置 vertical-align，值不为 baseline 即可，设置为 middel、top 均可](#1. 方案一：给行内块设置 vertical-align，值不为 baseline 即可，设置为 middel、top 均可)
- [2. 方案二：若父元素中只有一张图片（通常图片默认是行内块元素），设置图片为 display:block](#2. 方案二：若父元素中只有一张图片（通常图片默认是行内块元素），设置图片为 display:block)
- [3. 方案三：给父元素设置 line-height: 0、font-size: 0。如果该行内块内部还有文本，则需单独设置 font-size](#3. 方案三：给父元素设置 line-height: 0、font-size: 0。如果该行内块内部还有文本，则需单独设置 font-size)
前言
-
在之前的博客中，我们深入了解了 CSS 的长度单位与元素的各种显示模式，以及 CSS 盒子模型的基本组成部分，这些知识对于我们构建网页样式起到了重要的铺垫作用。
-
而今天，我们要在已有的基础上，进一步探索 CSS 盒子模型相关的一些细节内容
-
比如元素的默认样式、布局小技巧、元素间空白问题以及行内块的幽灵空白问题等
一、样式的继承
- 什么是继承？
举个小例子 太爷爷赚了钱，我们也能花。这就是继承
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 定义body元素的文本颜色样式 */
body {
color: blue;
}
</style>
</head>
<body>
<p>这是一个段落内容，它会继承body设置的文本颜色。</p>
<div>
<span>这里面的文字在span标签中，也同样继承了来自body的文本颜色样式</span>
</div>
</body>
</html>
1.继承规则
1.1优先使用自身设置的样式
当一个元素本身明确设置了某个样式属性时，无论其祖先元素是否对该属性有定义，浏览器都会优先应用元素自身所设置的样式
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
color: blue; /* body 元素设置文本颜色为蓝色 */
}
p {
color: red; /* p 元素自身设置文本颜色为红色 */
}
</style>
</head>
<body>
<p>这是一个段落内容。</p>
</body>
</html>
在这个例子中，尽管 body 元素已经将文本颜色设置为了蓝色，但是
<p>元素自身又重新定义了 color 属性为 red，所以最终段落中的文字会显示为红色，这体现了元素自身样式设置的优先级高于继承而来的样式。
1.2从父元素开始一级一级继承（优先继承离得近的祖先元素）
如果一个元素没设置某个样式属性，就会从父元素获取，查找和继承按 DOM 树结构，从离它最近的父元素开始往上找。而且，越靠近该元素的祖先元素设置的可继承样式，会优先被它继承。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif; /* body 元素设置字体族 */
}
div {
font-size: 18px; /* div 元素设置字体大小 */
}
p {
/* p 元素没有设置字体族和字体大小相关样式，会从父元素继承 */
}
</style>
</head>
<body>
<div>
<p>这是一个段落内容，它会先从离它最近的父元素 div 那里继承字体大小为 18px 的样式，再从更上级的 body 元素继承字体族为 Arial, sans-serif 的样式。</p>
</div>
</body>
</html>
2.会继承的 CSS 属性
- 在众多的 CSS 属性中，有一部分是可以被继承的，常见的如下：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
text-align: center; /* body 元素设置文本居中对齐 */
color: red; /* 设置文本颜色红色 */
line-height: 1.6; /* 设置行高为 1.6 倍字体大小 */
}
p{
/* p 元素未设置上述文本相关属性，会继承 body 的设置 */
}
</style>
</head>
<body>
<p>这是一个段落内容，由于没有自己设置文本对齐、颜色和行高相关属性，所以会继承 body 元素所定义的样式，文本会居中对齐，颜色为红色，并且按照 1.6 倍字体大小的行高来显示。</p>
</body>
</html>
3.不会继承的 css 属性
二、元素的默认样式
- 元素一般都有一些默认的样式，例如：
<a>元素：
- 带有下划线、有特定的字体颜色，并且鼠标悬停时会变成小手的样式。这是浏览器为了让用户能直观地识别出可点击的链接元素而设置的默认样式
<h1> - <h6>元素：
- 字会自动加粗，有不同的文字大小设置，并且上下还存在外边距。这些默认样式使得标题元素在页面上能够突出显示，方便用户快速区分不同级别的标题内容
<p>元素：
- 下具有外边距，这样在段落与段落之间会有一定的间隔，使文本内容的排版更加清晰易读
<ul>、<ol>元素：
- 认设置了左内边距，用于给列表项留出一定的缩进空间，让列表的层次结构更加明显
body元素：
- 在四个方向都有 8px 的外边距，这为整个页面内容提供了一定的边界空间，避免内容直接紧贴浏览器窗口边缘
三、元素之间的空白问题
（一）产生的原因
在 HTML 文档中，当我们使用行内元素或者行内块元素进行布局时，彼此之间如果存在换行操作（也就是在代码中这些元素是分行书写的），浏览器在解析的时候会将这些换行视为一个空白字符。
- 例如以下代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
border: 1px solid black;
}
span {
background-color: lightblue;
}
</style>
</head>
<body>
<div>
<span>元素一</span>
<span>元素二</span>
</div>
</body>
</html>
在上述代码中，两个 <span> 元素之间存在换行，最终在浏览器中显示时，两个带有浅蓝色背景的 <span> 元素之间会出现一个空白间隔，这就是因为浏览器把代码里的换行解析成了空白字符导致的。
（二）解决方案
1. 方案一：去掉换行和空格（不推荐）
我们可以将相关的行内或行内块元素代码写在同一行，不出现换行，这样浏览器就不会解析出额外的空白字符了。
- 这种方式会让代码的可读性变得很差，尤其是当页面结构较为复杂、元素众多的时候，代码会显得非常凌乱，不利于后续的维护和修改，所以一般不推荐使用这种方法。
- 例如：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
border: 1px solid black;
}
span {
background-color: lightblue;
}
</style>
</head>
<body>
<div><span>元素一</span><span>元素二</span></div>
</body>
</html>
2. 方案二：给父元素设置 font-size:0，再给需要显示文字的元素，单独设置字体大小（推荐）
通过给包含这些行内或行内块元素的父元素设置 font-size 为 0，可以消除浏览器解析换行产生的空白间隔。不过这样做的话，父元素内部原本所有文字的大小都会变成 0，所以需要对那些要正常显示文字的子元素单独设置合适的字体大小。
- 以下是示例代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
border: 1px solid black;
font-size: 0; /* 给父元素 div 设置 font-size 为 0 */
}
span {
background-color: lightblue;
font-size: 16px; /* 单独给 span 元素设置字体大小，使其文字能正常显示 */
}
</style>
</head>
<body>
<div>
<span>元素一</span>
<span>元素二</span>
</div>
</body>
</html>
这样，既解决了元素之间出现空白的问题，又保证了代码具有较好的可读性和可维护性，所以这种方案是比较推荐的做法。
四、行内块的幽灵空白问题
（一）产生原因
行内块元素在默认情况下是与文本的基线对齐的，而文本的基线和文本最底端之间是存在一定距离的。这个距离就导致了在视觉上好像出现了一个空白间隙，也就是所谓的 "幽灵空白"。比如当我们在行内块元素旁边放置文本，或者多个行内块元素排列在一起时，就很容易发现这个空白的存在，影响页面布局的美观度和精确性。
（二）解决方案
1. 方案一：给行内块设置 vertical-align，值不为 baseline 即可，设置为 middel、top 均可
通过修改行内块元素的 vertical-align 属性值，改变其垂直对齐方式，使其不再按照基线对齐，就能消除这个幽灵空白。例如将其设置为 middle 时，行内块元素会以垂直居中的方式对齐，空白就不会出现了。以下是代码示例：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
border: 1px solid black;
}
span {
display: inline-block;
width: 50px;
height: 50px;
background-color: lightblue;
vertical-align: middle; /* 将 vertical-align 设置为 middle */
}
</style>
</head>
<body>
<div>
<span></span>
这里是一些文本内容
</div>
</body>
</html>
2. 方案二：若父元素中只有一张图片（通常图片默认是行内块元素），设置图片为 display:block
当父元素中只有一张图片这种行内块元素时，我们可以直接将图片的 display 属性设置为 block，使其变为块元素。块元素在布局时不会出现行内块那种基于基线对齐产生的空白问题，从而消除幽灵空白。示例如下：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
border: 1px solid black;
}
img {
display: block; /* 将图片设置为块元素 */
}
</style>
</head>
<body>
<div>
<img src="your_image_path.jpg" alt="示例图片">
</div>
</body>
</html>
3. 方案三：给父元素设置 line-height: 0、font-size: 0。如果该行内块内部还有文本，则需单独设置 font-size
给父元素设置 line-height 为 0 和 font-size 为 0，可以改变行内块元素所处的文本排版环境，从根源上避免因文本基线等因素导致的空白出现。不过要是行内块内部还有需要正常显示的文本，那么就得单独为这些文本所在元素重新设置合适的 font-size，保证文字能够正常展示出来。代码示例如下：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
border: 1px solid black;
line-height: 0;
font-size: 0;
}
span {
display: inline-block;
width: 50px;
height: 50px;
background-color: lightblue;
font-size: 16px; /* 因为父元素 font-size 为 0，这里单独给 span 设置字体大小让文字能显示 */
}
</style>
</head>
<body>
<div>
<span>元素内容</span>
</div>
</body>
</html>
通过上述这些方案，我们可以有效地解决行内块元素的幽灵空白问题，让网页的布局更加精准和美观，提升用户的浏览体验。
|--------------------|
| 非常感谢您的阅读，喜欢的话记得三连哦 |
