CSS3 布局 - display 属性

核心知识点

display 属性的基本语法和作用
不同类型的取值方式（基本值、盒模型值、弹性布局值、网格布局值等）
与其他布局属性的配合使用
浏览器兼容性和最佳实践

学习目标

掌握 display 属性的完整语法
能够使用不同的 display 值控制元素的显示类型
理解各种 display 值的布局行为和应用场景
学会在不同布局需求下选择合适的 display 值
了解 display 属性的常见应用场景和解决方案

什么是 display 属性？

display 属性用于设置元素的显示类型，它决定了元素如何在页面中布局和显示。

语法

display: [值];

取值方式

1. 基本值

值	描述
`none`	元素不显示，也不占用空间
`block`	块级元素，独占一行，可设置宽高
`inline`	行内元素，不独占一行，不可设置宽高
`inline-block`	行内块元素，不独占一行，可设置宽高

2. 盒模型值

值	描述
`flow`	默认值，按照文档流布局
`flow-root`	创建一个新的块格式化上下文
`table`	表格布局
`flex`	弹性布局
`grid`	网格布局

3. 其他值

值	描述
`list-item`	列表项
`table-row`	表格行
`table-cell`	表格单元格
`run-in`	根据上下文显示为块级或行内元素
`contents`	元素本身不产生盒子，但其子元素正常显示
`inline-flex`	行内弹性布局
`inline-grid`	行内网格布局

取值详解

1. none

元素不显示在页面上
不占用任何空间
子元素也不会显示
常用于通过 JavaScript 控制元素的显示和隐藏

2. block

块级元素，独占一行
可以设置宽高、内外边距
默认宽度为父元素的 100%
常见的块级元素：div、p、h1-h6、ul、ol、li、form 等

3. inline

行内元素，不独占一行
不能设置宽高、上下内外边距
宽度由内容决定
常见的行内元素：span、a、strong、em、img 等

4. inline-block

行内块元素，不独占一行
可以设置宽高、内外边距
宽度由内容或设置决定
常用于需要在一行显示且需要设置宽高的元素

5. flex

弹性布局
子元素可以灵活排列
一维布局系统
适用于各种复杂的布局需求

6. grid

网格布局
子元素可以在二维网格中排列
二维布局系统
适用于需要精确控制行列的布局需求

代码示例

示例 1：基本值

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display 属性基本值示例</title>
    <style>
        .box {
            padding: 10px;
            margin: 5px;
            border: 1px solid #333;
        }
        
        .block {
            display: block;
            background-color: #f0f0f0;
        }
        
        .inline {
            display: inline;
            background-color: #e0e0e0;
        }
        
        .inline-block {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: #d0d0d0;
        }
        
        .none {
            display: none;
            background-color: #c0c0c0;
        }
    </style>
</head>
<body>
    <h1>display 属性基本值示例</h1>
    
    <h2>block</h2>
    <div class="box block">块级元素 1</div>
    <div class="box block">块级元素 2</div>
    
    <h2>inline</h2>
    <span class="box inline">行内元素 1</span>
    <span class="box inline">行内元素 2</span>
    <span class="box inline">行内元素 3</span>
    
    <h2>inline-block</h2>
    <div class="box inline-block">行内块元素 1</div>
    <div class="box inline-block">行内块元素 2</div>
    <div class="box inline-block">行内块元素 3</div>
    
    <h2>none</h2>
    <div class="box none">这个元素不会显示</div>
    <p>上面的元素设置了 display: none，所以你看不到它。</p>
</body>
</html>

示例 2：flex 布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display: flex 示例</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            background-color: #f0f0f0;
            padding: 20px;
            margin: 20px 0;
        }
        
        .flex-item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            margin: 0 10px;
        }
        
        .flex-column {
            flex-direction: column;
            height: 300px;
        }
    </style>
</head>
<body>
    <h1>display: flex 示例</h1>
    
    <h2>水平排列</h2>
    <div class="flex-container">
        <div class="flex-item">项目 1</div>
        <div class="flex-item">项目 2</div>
        <div class="flex-item">项目 3</div>
    </div>
    
    <h2>垂直排列</h2>
    <div class="flex-container flex-column">
        <div class="flex-item">项目 1</div>
        <div class="flex-item">项目 2</div>
        <div class="flex-item">项目 3</div>
    </div>
</body>
</html>

示例 3：grid 布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display: grid 示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 100px 100px;
            grid-gap: 10px;
            background-color: #f0f0f0;
            padding: 20px;
            margin: 20px 0;
        }
        
        .grid-item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <h1>display: grid 示例</h1>
    
    <div class="grid-container">
        <div class="grid-item">项目 1</div>
        <div class="grid-item">项目 2</div>
        <div class="grid-item">项目 3</div>
        <div class="grid-item">项目 4</div>
        <div class="grid-item">项目 5</div>
        <div class="grid-item">项目 6</div>
    </div>
</body>
</html>

常见应用场景

1. 隐藏元素

.hidden {
    display: none;
}

2. 导航菜单

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-item {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}

3. 卡片布局

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
}

.card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

4. 响应式布局

.container {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex: 1 1 300px;
    margin: 10px;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

浏览器兼容性

浏览器	支持情况
Chrome	✅
Firefox	✅
Safari	✅
Edge	✅
IE	部分支持（IE 10+ 支持 flex，IE 11+ 支持 grid）

最佳实践

选择合适的 display 值：根据布局需求选择合适的 display 值
合理使用 flex 和 grid：现代布局优先使用 flex 和 grid
注意兼容性：为不支持现代布局的浏览器提供 fallback 方案
避免过度嵌套：减少不必要的嵌套，提高性能
使用语义化元素：结合语义化 HTML 元素使用合适的 display 值

练习

创建一个使用 flex 布局的导航菜单
实现一个使用 grid 布局的卡片网格
设计一个响应式布局，在不同屏幕尺寸下使用不同的 display 值
尝试使用 display: none 和 JavaScript 实现元素的显示/隐藏效果
比较不同 display 值的布局行为，理解它们的差异

小结

display 属性是 CSS 中最基础也是最重要的属性之一，它控制着元素的显示类型和布局行为。通过灵活使用不同的 display 值，你可以实现各种复杂的布局需求。

现代 CSS 布局中，flex 和 grid 已经成为主流选择，它们提供了更强大、更灵活的布局能力。但传统的 block、inline 和 inline-block 仍然在某些场景下发挥着重要作用。

记住，在实际应用中，应该根据具体的布局需求选择合适的 display 值，并考虑浏览器兼容性和性能问题。