从 HTML 到 CSS：开启网页样式之旅（四）—— 长度单位与显示模式全解析
前言
- 在前面的博客中，我们探讨了 CSS 的三大特性以及诸多常用属性，这些知识为我们塑造网页的样式奠定了坚实的基础
- 而今天，我们将踏入 CSS 长度单位与显示模式的奇妙世界，让网页的布局更加美观和合理
一、CSS 长度单位
- px
px 是最常见的长度单位，它代表像素
- 例如，当我们设置一个元素的宽度为 200px，那么它在该设备的屏幕上就会占据 200 个像素的宽度
- em
em 是一个相对长度单位，它是相对于元素自身的 font-size（字体大小）的倍数
- 例如，若设置元素的内边距为 0.5em，而该元素字体大小为 16px，则内边距实际为 8px（16 * 0.5）
- rem
rem 同样是相对长度单位，不过它是相对于根元素（通常是标签）的字体大小来计算的
- 比如根元素字体大小设置为 16px，那么 1rem 就始终等于 16px，无论在哪个元素内部使用 rem 设置属性，都是基于这个根元素的字体大小进行计算
- %（百分比）
百分比作为长度单位时，是相对父元素进行计算的。
- 例如，若一个元素设置宽度为 50%，则它的宽度会是其父元素宽度的一半。
二、元素的显示模式
1.块元素（block）
又称块级元素，具有以下特点：
- 1.在页面中独占一行，
-
不会与任何元素共用一行，是从上到下依次排列的。比如我们常见的
<div>、<p>等元素，它们在页面呈现时会单独占据一行空间 - 2.默认宽度：
-
会自动撑满父元素的宽度。这意味着如果父元素宽度为 800px，一个未设置宽度的块级元素将会扩展到 800px 的宽度
- 3.默认高度：
-
如果块级元素内部没有设置高度且内容较少，它会根据内容的实际高度来呈现；若内容较多且超出了默认的可视范围，可能会出现滚动条或者内容溢出的情况，这取决于我们后续设置的相关样式。
- 4.可以通过 CSS 方便地设置宽高。
-
我们可以根据具体的设计需求，使用相应的 CSS 属性为块级元素指定特定的宽度和高度值
2.行内元素（inline）
又称内联元素，其特点如下：
- 1.在页面中不独占一行，
一行中不能容纳下的行内元素，会在下一行继续从左到右排列。例如，像
<a>、<em>等行内元素，它们会在一行内依次排列，直到该行空间不足时才换行
- 2.默认宽度：
-
行内元素本身不会有一个固定的默认宽度，而是根据其中的文本、图像等内容的实际宽度来确定自身的宽度
- 3.默认高度：
-
其高度也是依据内部内容的实际高度来决定，比如一段文本的行高或者一张图片的高度等
- 4.无法通过 CSS 直接设置宽高
3.行内块元素（inline-block）
又称内联块元素，具有以下特点：
- 1.在页面中不独占一行，
-
一行中不能容纳下的行内元素，会在下一行继续从左到右排列
- 2.默认宽度：
- 3.默认高度：
- 4.无法通过 CSS 直接设置宽高。
4.总结各元素的显示模式
- 为了更清晰地理解不同元素显示模式的特点和应用场景，我们对常见的几种元素显示模式进行如下总结：
块元素（block）
行内元素（inline）
行内块元素（inline-block）
三、修改元素的显示模式
- 在 CSS 中，我们可以通过display属性来修改元素的默认显示模式
display属性有一些常用的值，每个值对应不同的显示效果，如下所示：
| 下面来详细降解一下各部分 |
1.none
- 当我们将元素的display属性设置为none时，该元素会被隐藏
div {
display: none;
}
举例说明一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display None Example</title>
<style>
.hidden-element {
display: none;
}
</style>
</head>
<body>
<div class="visible-element">
这个div元素是可见的。
</div>
<div class="hidden-element">
这个div元素被设置了display: none，所以它是不可见的，并且不占据页面空间。
</div>
<div class="visible-element">
另一个可见的div元素。
</div>
</body>
</html>
2. block
- 将元素的display属性设置为block时，该元素会被强制显示为块级元素的模式
a {
display: block;
}
例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Block Example</title>
<style>
a {
display: block;
width: 200px;
height: 50px;
background-color: lightblue;
text-align: center;
line-height: 50px;
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<a href="#">
原本这是一个行内元素（a标签），现在被设置为块级元素模式，它会独占一行，并且可以设置宽高以及其他样式，比如这里设置了背景色、文本对齐等样式。
</a>
<p>这是一个普通的段落元素，用于对比展示。</p>
</body>
</html>
3.inline
- 当设置display属性为inline时，元素会被显示为行内元素的模式
原本可能是块级元素或者其他显示模式的元素，在设置此值后，会像行内元素一样在页面中不独占一行，并且其宽高会由内容决定
div {
display: inline;
}
举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Inline Example</title>
<style>
div {
display: inline;
background-color: lightgreen;
padding: 10px;
}
</style>
</head>
<body>
<div>
这个div元素原本是块级元素，现在被设置为行内元素模式，它不会独占一行，宽高由内容决定，这里设置了背景色和内边距以便观察效果。
</div>
<div>
另一个同样被设置为行内元素模式的div元素，两个div元素会在一行内排列（如果空间足够）。
</div>
<span>这是一个普通的span行内元素，用于对比展示。</span>
</body>
</html>
4. inline-block
- 设置display属性为inline-block时，元素会被显示为行内块元素的模式
这样一来，元素既能像行内元素一样在一行内排列，又能像块级元素一样通过 CSS 设置其宽高。
img {
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Inline-Block Example</title>
<style>
img {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<img src="your_image_path.jpg" alt="示例图片">
<img src="your_image_path.jpg" alt="示例图片">
<span>这是一个普通的span行内元素，用于对比展示。</span>
</body>
</html>
| 非常感谢您的阅读，喜欢的话记得三连哦 |
