元素显示模式（控制元素排列方式）

10.1 三大核心显示模式

块级元素（block）

特点：

独占一行
可以设置宽高
宽度默认占满父元素

常见块级元素：

<div>、<p>、<h1>-<h6>、<ul>、<li>、<section>、<article>

示例：

css

.block-element {
  display: block;
  width: 300px;
  height: 100px;
  background-color: #e3f2fd;
}

行内元素（inline）

特点：

不独占一行，与其他行内元素并排显示
不能设置宽高
宽高由内容决定

常见行内元素：

<span>、<a>、<strong>、<em>、<i>、<b>

示例：

css

.inline-element {
  display: inline;
  background-color: #fff3e0;
  padding: 5px 10px;
}

行内块元素（inline-block）

特点：

不独占一行，与其他元素并排显示
可以设置宽高
兼具行内元素和块级元素的特点

常见行内块元素：

<img>、<input>、<button>、<textarea>

示例：

css

.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: #e8f5e8;
}

10.2 显示模式转换（display属性）

display属性值

css

/* 块级元素 */
display: block;

/* 行内元素 */
display: inline;

/* 行内块元素 */
display: inline-block;

/* 隐藏元素 */
display: none;

/* 弹性盒子 */
display: flex;

/* 网格布局 */
display: grid;

示例

css

/* 将a标签转换为块级元素 */
.nav-link {
  display: block;
  padding: 10px 20px;
}

/* 将div转换为行内元素 */
.inline-div {
  display: inline;
}

/* 将span转换为行内块元素 */
.inline-block-span {
  display: inline-block;
  width: 100px;
  height: 30px;
}

/* 隐藏元素 */
.hidden {
  display: none;
}

10.3 新手避坑：行内元素之间的空隙问题

问题描述

当多个行内元素或行内块元素并排显示时，元素之间会出现空隙。

原因

HTML代码中的换行符和空格会被浏览器解析为空格。

解决方案

删除HTML代码中的换行符

html

<!-- 有间隙 -->
<span>元素1</span>
<span>元素2</span>

<!-- 无间隙 -->
<span>元素1</span><span>元素2</span>

设置父元素的font-size为0

css

.parent {
  font-size: 0;
}

.child {
  font-size: 16px; /* 子元素重新设置字体大小 */
}

使用负margin

css

.inline-element {
  margin-right: -4px;
}

使用flex布局

css

.parent {
  display: flex;
}

10.4 实战：用显示模式布局导航栏、表单元素

实战目标

使用不同的显示模式创建导航栏和表单布局。

实战步骤

创建HTML文件：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS显示模式实战</title>
  <style>
    /* 在这里添加CSS样式 */
  </style>
</head>
<body>
  <div class="container">
    <h1>CSS显示模式实战</h1>
    
    <!-- 导航栏 -->
    <nav class="navbar">
      <a href="#" class="nav-brand">Logo</a>
      <ul class="nav-menu">
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">联系</a></li>
      </ul>
    </nav>
    
    <!-- 表单 -->
    <form class="form">
      <h2>用户注册</h2>
      <div class="form-group">
        <label>用户名</label>
        <input type="text" placeholder="请输入用户名">
      </div>
      <div class="form-group">
        <label>邮箱</label>
        <input type="email" placeholder="请输入邮箱">
      </div>
      <div class="form-group">
        <label>密码</label>
        <input type="password" placeholder="请输入密码">
      </div>
      <button type="submit" class="btn">注册</button>
    </form>
    
    <!-- 标签示例 -->
    <div class="tags">
      <h2>标签云</h2>
      <span class="tag">CSS</span>
      <span class="tag">HTML</span>
      <span class="tag">JavaScript</span>
      <span class="tag">前端</span>
      <span class="tag">Web开发</span>
    </div>
  </div>
</body>
</html>

添加CSS样式：

css

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background-color: #f5f5f5;
  padding: 50px 20px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 40px;
}

h2 {
  color: #555;
  margin-bottom: 20px;
}

/* 导航栏样式 */
.navbar {
  background-color: #333;
  padding: 15px 30px;
  margin-bottom: 40px;
  border-radius: 8px;
}

.nav-brand {
  display: inline-block;
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  margin-right: 30px;
}

.nav-menu {
  display: inline-block;
  list-style: none;
}

.nav-menu li {
  display: inline-block;
  margin-right: 20px;
}

.nav-menu a {
  color: white;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-menu a:hover {
  background-color: #555;
}

/* 表单样式 */
.form {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #555;
  font-weight: bold;
}

.form-group input {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.form-group input:focus {
  outline: none;
  border-color: #3498db;
}

.btn {
  display: inline-block;
  padding: 12px 30px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #2980b9;
}

/* 标签样式 */
.tags {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.tag {
  display: inline-block;
  padding: 8px 16px;
  margin: 5px;
  background-color: #e3f2fd;
  color: #1976d2;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.tag:hover {
  background-color: #1976d2;
  color: white;
}

运行页面：在浏览器中打开文件，观察效果

预期效果

导航栏：使用inline-block实现水平排列
表单：使用block实现垂直排列
标签：使用inline-block实现标签云效果

元素显示模式（控制元素排列方式） ​

10.1 三大核心显示模式 ​

块级元素（block） ​

行内元素（inline） ​

行内块元素（inline-block） ​

10.2 显示模式转换（display属性） ​

display属性值 ​

示例 ​

10.3 新手避坑：行内元素之间的空隙问题 ​

问题描述 ​

原因 ​

解决方案 ​

10.4 实战：用显示模式布局导航栏、表单元素 ​

实战目标 ​

实战步骤 ​

预期效果 ​

元素显示模式（控制元素排列方式）

10.1 三大核心显示模式

块级元素（block）

行内元素（inline）

行内块元素（inline-block）

10.2 显示模式转换（display属性）

display属性值

示例

10.3 新手避坑：行内元素之间的空隙问题

问题描述

原因

解决方案

10.4 实战：用显示模式布局导航栏、表单元素

实战目标

实战步骤

预期效果