块级元素 (Block Elements)

概念

块级元素是 HTML 中最基本的元素类型之一，它们在页面布局中占据重要的地位。

块级元素特点

1. 独占一行

不能并排显示
默认使用流体布局
每个块级元素会自动换行

2. 可以设置宽高

支持设置 width 和 height 属性
可以通过 CSS 完全控制元素尺寸

3. 宽度默认撑满父元素

在不设置宽度的情况下，默认宽度为父元素内容区宽度
这是块级元素的默认行为

4. 可以包含任意类型元素

块级元素内部可以包含其他块级元素
也可以包含行内元素和行内块元素

常见的块级元素

元素	用途
`<div>`	通用容器，最常用的块级元素
`<h1>` - `<h6>`	标题元素
`<p>`	段落
`<ul>`、`<ol>`	列表
`<li>`	列表项
`<table>`	表格
`<form>`	表单
`<header>`、`<footer>`	语义化头部和底部
`<section>`、`<article>`	语义化内容区域

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级元素示例</title>
    <style>
        h2 {
            background-color: pink;
            padding: 10px;
        }

        .box1 {
            width: 300px;
            height: 50px;
            background-color: skyblue;
            margin: 10px 0;
        }

        .box2 {
            width: 300px;
            height: 50px;
            background-color: gold;
            margin: 10px 0;
        }

        .box3 {
            /* 不设置宽度，默认撑满父元素 */
            height: 50px;
            background-color: lightgreen;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h2>块级元素特点演示</h2>

    <!-- 每个div独占一行 -->
    <div class="box1">盒子 1 (width: 300px)</div>
    <div class="box2">盒子 2 (width: 300px)</div>
    <div class="box3">盒子 3 (未设置width，默认撑满)</div>

    <h2>块级元素嵌套</h2>
    <div style="background: #f0f0f0; padding: 20px;">
        <p>这是一个段落</p>
        <div style="background: #ddd; padding: 10px;">
            这是嵌套在div中的div
        </div>
        <p>另一个段落</p>
    </div>
</body>
</html>

重要提示

布局基础: 块级元素是网页布局的基础，理解其特性对于布局至关重要
流体布局: 块级元素的默认宽度行为构成了 CSS 的流体布局系统
嵌套规则: 块级元素可以相互嵌套，但某些元素有特定的嵌套规则（如 p 元素内不能包含块级元素）
转换: 可以使用 display: inline 将块级元素转换为行内元素

实际应用场景

/* 页面容器 */
.container {
    width: 1200px;
    margin: 0 auto;
}

/* 内容区域 */
.content {
    padding: 20px;
    background: white;
}

/* 按钮容器（转换为块级） */
.button-container a {
    display: block;
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

学习笔记：块级元素是 CSS 布局的基石，理解其特性对于掌握网页布局至关重要。

css学习