小菜鸟

java菜鸟号正在起航

0%

CSS简单使用

发表于 更新于 分类于 阅读次数： 29 Valine： 0
本文字数： 9k 阅读时长 ≈ 8 分钟

CSS 基础使用与元素显示模式详解

CSS（层叠样式表）是控制网页布局和样式的核心技术，而理解 HTML 元素的显示模式（块状、行内、行内块状）是掌握 CSS 布局的基础。本文将从 “元素显示模式分类→核心样式用法→实战场景” 三个维度，详解块状元素、行内元素、行内块状元素的特性与应用，并结合 overflow、list-style 等基础样式，帮助你建立 CSS 布局的核心概念。

CSS 基础样式快速入门

在深入元素显示模式前，先掌握两个实用 CSS 样式的具体用法和场景：

1. overflow: hidden：控制内容溢出

当元素内容超出其指定尺寸（宽度 / 高度）时，overflow: hidden 会隐藏超出部分，避免内容 “溢出” 到其他元素区域，破坏布局。

核心作用：
  • 裁剪超出元素边界的内容（文字、图片等）；
  • 清除浮动（float）带来的父元素高度塌陷问题（经典布局技巧）。
示例：防止文字溢出
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  .box {
    width: 150px;
    height: 80px;
    border: 1px solid #ccc;
    /* 隐藏超出的内容 */
    overflow: hidden;
  }
</style>

<div class="box">
  这是一段超长的文字内容，用于演示 overflow: hidden 的效果。当内容超过元素的宽度和高度时，超出部分会被隐藏。
</div>
效果：

文字仅显示在 150×80px 的盒子内，超出部分被裁剪（不显示滚动条）。

其他常用取值：
  • overflow: auto：内容溢出时显示滚动条，未溢出时不显示；
  • overflow: scroll：强制显示滚动条（无论内容是否溢出）；
  • overflow-x/overflow-y：单独控制水平 / 垂直方向的溢出行为（如 overflow-y: auto）。

2. list-style: none：清除列表默认样式

浏览器会为 <ul>/<ol> 列表添加默认标记（如圆点、数字）和缩进，list-style: none 可清除这些默认样式，让列表呈现 “无标记、无缩进” 的状态，便于自定义列表样式（如导航菜单）。

示例：清除列表默认样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
  .custom-list {
    /* 清除默认标记和缩进 */
    list-style: none;
    padding-left: 0; /* 清除默认左缩进（浏览器默认有 40px 左右的 padding） */
  }
  .custom-list li {
    background-color: #f5f5f5;
    padding: 8px 12px;
    margin: 5px 0;
    border-radius: 4px;
  }
</style>

<ul class="custom-list">
  <li>首页</li>
  <li>产品中心</li>
  <li>关于我们</li>
</ul>
效果：

列表项前无圆点标记，无默认缩进，背景为浅灰色，适合作为简易导航菜单。

HTML 元素的显示模式（核心概念）

HTML 元素按默认显示行为分为块状元素、行内元素、行内块状元素三类，它们的布局特性直接影响页面结构，是 CSS 布局的基础。

1. 块状元素（Block-level Elements）

块状元素是页面布局的 “骨架”，默认占据一行空间，适合作为容器包裹其他元素。

核心特性：
  • 独占一行：每个块状元素会自动从新行开始，后续元素另起一行（如 <div>、<p>）；
  • 可设置尺寸：width（宽度）、height（高度）、margin（外边距）、padding（内边距）均可自定义；
  • 默认宽度：不设置 width 时，默认占满父元素的宽度（100% 父元素宽度）；
  • 可嵌套：能包含其他块状元素、行内元素或混合内容（注意：<p> 不能嵌套 <div> 等块状元素，属于语义限制）。
常见块状元素：
1
2
<div>、<p>、<h1>~<h6>、<ol>、<ul>、<li>、<dl>、<dt>、<dd>、
<table>、<form>、<header>、<footer>、<section>、<article>

（注：HTML5 新增的语义化标签如 <header>、<section> 均为块状元素）

示例：块状元素特性演示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
  .block-demo {
    /* 自定义尺寸和边距 */
    width: 200px;
    height: 100px;
    margin: 10px;
    padding: 15px;
    background-color: #e3f2fd;
    border: 1px solid #bbdefb;
  }
</style>

<!-- 块状元素自动换行，宽度可自定义 -->
<div class="block-demo">div 1（200px 宽）</div>
<div class="block-demo">div 2（200px 宽）</div>
<p class="block-demo">p 标签（块状元素）</p>
效果：

三个元素各占一行，宽度均为 200px，有间距和背景色，体现块状元素的布局特性。

2. 行内元素（Inline Elements）

行内元素用于包裹文本或小范围内容，默认与其他元素在同一行显示，不破坏行内布局。

核心特性：
  • 同行显示：与其他行内元素在同一行排列，不会自动换行；
  • 尺寸限制：width、height 无法自定义（由内容撑开）；
  • 边距限制：margin-top、margin-bottom 无效（margin-left、margin-right 有效）；padding-top、padding-bottom 虽然设置有效，但不会影响其他元素的布局（可能覆盖其他内容）；
  • 嵌套限制：一般只能包含行内元素或文本（如 <a> 可嵌套块状元素，但需谨慎使用）。
常见行内元素：
1
2
<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<code>、
<br>、<small>、<big>、<sup>（上标）、<sub>（下标）
示例：行内元素特性演示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  .inline-demo {
    /* 尝试设置宽度和高度（无效） */
    width: 200px;
    height: 50px;
    /* 左右外边距有效，上下无效 */
    margin: 20px; /* 实际只有左右 20px 生效 */
    /* 上下内边距会显示，但不影响其他元素布局 */
    padding: 10px;
    background-color: #fff3e0;
  }
</style>

<!-- 行内元素同行显示，尺寸由内容决定 -->
<span class="inline-demo">span 1</span>
<a href="#" class="inline-demo">链接</a>
<i class="inline-demo">斜体文本</i>
效果：

三个元素在同一行显示，宽度由内容撑开（设置的 width: 200px 无效），上下 margin 不生效，padding 生效但可能覆盖周围内容。

3. 行内块状元素（Inline-block Elements）

行内块状元素是 “块状元素” 和 “行内元素” 的混合体，兼具 “同行显示” 和 “可自定义尺寸” 的特性，是布局中常用的 “中间态” 元素。

核心特性：
  • 同行显示：与其他行内 / 行内块状元素在同一行排列（类似行内元素）；
  • 可设置尺寸：width、height、margin、padding 均可自定义（类似块状元素）；
  • 默认宽度：由内容撑开（类似行内元素）；
  • 无自动换行：内容不换行，超出父元素宽度时可能溢出（需配合 white-space 等属性处理）。
常见行内块状元素：
1
<img>、<input>、<button>、<select>、<textarea>
示例：行内块状元素特性演示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
  .inline-block-demo {
    display: inline-block; /* 将普通元素转为行内块状 */
    width: 120px;
    height: 60px;
    margin: 10px;
    padding: 10px;
    background-color: #e8f5e9;
    text-align: center;
  }
</style>

<!-- 行内块状元素同行显示，且可自定义尺寸 -->
<div class="inline-block-demo">div（转为行内块状）</div>
<span class="inline-block-demo">span（转为行内块状）</span>
<img src="icon.png" alt="图标" width="60" height="60" style="margin: 10px;"> <!-- 原生行内块状 -->
效果：

三个元素在同一行显示，div 和 span 被转为行内块状后可自定义宽高和边距，与原生行内块状元素 <img> 布局一致。

元素显示模式的转换（display 属性）

通过 CSS 的 display 属性，可强制改变元素的默认显示模式，这是实现灵活布局的核心技巧。

常用 display 取值与转换效果：

display 取值 转换效果 适用场景
block 将元素转为块状元素（独占一行，可设宽高） 让行内元素（如 <a>）作为按钮 / 容器使用
inline 将元素转为行内元素（同行显示，不可设宽高） 让块状元素（如 <div>）在行内文本中穿插
inline-block 将元素转为行内块状元素（同行显示，可设宽高） 横向排列的卡片、导航项、按钮组
none 隐藏元素（完全移除，不占据页面空间） 条件性显示 / 隐藏内容（如弹窗、下拉菜单）
示例：显示模式转换实战
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<style>
  /* 1. 行内元素 <a> 转为块状元素：作为全屏按钮 */
  .block-link {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px; /* 垂直居中文字 */
    background-color: #2196f3;
    color: white;
    text-align: center;
    text-decoration: none;
    margin: 10px 0;
  }

  /* 2. 块状元素 <div> 转为行内元素：在行内文本中显示 */
  .inline-div {
    display: inline;
    color: #e91e63;
    font-weight: bold;
  }

  /* 3. 普通元素转为行内块状：横向排列的标签 */
  .tag {
    display: inline-block;
    padding: 3px 8px;
    margin: 0 5px;
    background-color: #f0f4c3;
    border-radius: 4px;
    font-size: 14px;
  }
</style>

<!-- 1. 块状链接 -->
<a href="#" class="block-link">点击查看详情（块状按钮）</a>

<!-- 2. 行内 div -->
<p>这是一段文本，<div class="inline-div">中间的 div 被转为行内元素</div>，与其他文字在同一行。</p>

<!-- 3. 行内块状标签 -->
<div>热门标签：
  <span class="tag">前端</span>
  <span class="tag">CSS</span>
  <span class="tag">布局</span>
</div>

实战场景：元素显示模式的典型应用

场景 1：横向导航菜单（inline-block 实现）

导航菜单需要 “横向排列” 且 “可自定义尺寸”，适合用 inline-block 转换：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
  .nav {
    list-style: none; /* 清除列表默认样式 */
    padding: 0;
    margin: 0;
    background-color: #333;
  }
  .nav li {
    display: inline-block; /* 列表项横向排列 */
  }
  .nav a {
    display: block; /* 链接占满列表项，点击区域更大 */
    padding: 12px 20px;
    color: white;
    text-decoration: none;
  }
  .nav a:hover {
    background-color: #555;
  }
</style>

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">新闻</a></li>
  <li><a href="#">关于</a></li>
</ul>
原理：
  • <li> 转为 inline-block 后横向排列；
  • <a> 转为 block 后可设置 padding，扩大点击区域（用户体验优化）。

场景 2：图片 + 文字组合布局（inline-block 垂直对齐）

行内块状元素默认基线对齐，通过 vertical-align 调整垂直位置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
  .img-text {
    width: 400px;
    border: 1px solid #eee;
    padding: 15px;
  }
  .img-text img {
    width: 100px;
    height: 100px;
    display: inline-block; /* 确保与文字垂直对齐（img 原生是行内块状，可省略） */
    vertical-align: middle; /* 与文字垂直居中对齐 */
    margin-right: 15px;
  }
  .img-text .text {
    display: inline-block;
    width: 250px; /* 固定宽度，避免换行混乱 */
    vertical-align: middle; /* 与图片垂直居中对齐 */
  }
</style>

<div class="img-text">
  <img src="product.jpg" alt="产品图片">
  <div class="text">这是产品的详细描述文字，通过 inline-block 实现图片与文字的水平排列和垂直居中对齐。</div>
</div>
关键：
  • vertical-align: middle 确保图片和文字在垂直方向居中对齐（解决默认基线对齐导致的视觉错位）。

场景 3：隐藏 / 显示元素（display: none 与 visibility 对比）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
  .hidden-display {
    display: none; /* 完全隐藏，不占空间 */
  }
  .hidden-visibility {
    visibility: hidden; /* 隐藏，但保留元素空间 */
  }
  .box {
    width: 100px;
    height: 50px;
    background-color: #ffcdd2;
    margin: 10px 0;
  }
</style>

<div class="box">正常显示</div>
<div class="box hidden-display">display: none（完全隐藏）</div>
<div class="box hidden-visibility">visibility: hidden（保留空间）</div>
<div class="box">正常显示</div>
区别：
  • display: none：元素从文档流中完全移除，不占据任何空间；
  • visibility: hidden：元素隐藏，但仍占据原有空间（布局不受影响）。

常见问题与解决方案

1. 行内块状元素之间的间隙问题

多个 inline-block 元素之间会出现默认间隙（由 HTML 中的换行 / 空格导致），影响布局精度：

解决方案：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 方法1：父元素设置 font-size: 0，子元素重置 font-size -->
<style>
  .container {
    font-size: 0; /* 消除间隙 */
  }
  .item {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: #b2ebf2;
    font-size: 16px; /* 重置字体大小 */
  }
</style>
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<!-- 方法2：HTML 不换行（不推荐，影响可读性） -->
<div class="container">
  <div class="item"></div><div class="item"></div><div class="item"></div>
</div>

2. 块状元素水平居中问题

块状元素默认宽度为 100%，需设置固定宽度后才能通过 margin: 0 auto 水平居中：

1
2
3
4
5
.center-block {
  width: 300px; /* 必须设置固定宽度 */
  margin: 0 auto; /* 水平居中（上下外边距为 0，左右自动） */
  background-color: #c8e6c9;
}

3. 行内元素垂直居中问题

行内元素（文字、图片）可通过 line-height 与父元素高度一致实现垂直居中：

1
2
3
4
5
.parent {
  height: 60px; /* 父元素固定高度 */
  line-height: 60px; /* 行高 = 父元素高度，文字垂直居中 */
  background-color: #fff3e0;
}

总结

理解元素的显示模式是掌握 CSS 布局的基石，核心要点如下：

  1. 三类元素特性：
    • 块状元素：独占一行，可设宽高，适合做容器；
    • 行内元素：同行显示，尺寸由内容决定，适合包裹文本；
    • 行内块状元素：同行显示 + 可设宽高，适合横向排列的独立单元。
  2. 灵活转换：通过 display 属性（block/inline/inline-block）打破元素默认行为，实现复杂布局。
  3. 实用样式：overflow: hidden 处理内容溢出和清除浮动，list-style: none 清除列表默认样式，是布局中的高频工具
相关文章

欢迎关注我的其它发布渠道

表情 | 预览
快来做第一个评论的人吧~
Powered By Valine
v1.3.10