深入CSS2-青训营笔记深入CSS2-青训营笔记 CSS 的核心之一是理解元素的显示方式及布局规则。本篇将从块级与行级

深入CSS2-青训营笔记

CSS 的核心之一是理解元素的显示方式及布局规则。本篇将从 块级与行级元素的摆放规则、display 属性、排版上下文、Flexbox和Grid 布局，以及 position 属性等方面深入解析这些概念。

一、块级元素 vs 行级元素

1. 块级元素

特点：独占一行，宽度默认填满父容器。
常见标签：div、p、h1~h6、section 等。

摆放规则

从上到下依次排列，垂直方向有间距（由 margin决定）。

2. 行级元素

特点：与其他行级元素在同一行排布，仅占据自身内容的宽度。
常见标签：span、a、img、strong 等。

摆放规则

内容超出一行时会自动换行（受 white-space控制）。
不支持直接设置宽高（需要 display 改变为块级）。

示例代码

<style>
    .block {
        background: #e0f7fa;
        margin: 10px 0;
    }

    .inline {
        background: #ffcc80;
        margin: 5px;
    }
</style>
<div class="block">我是块级元素</div>
<span class="inline">我是行级元素</span>
<span class="inline">我在同一行</span>

二、display 属性

display 定义元素的显示方式，常见取值：

block：块级元素。
inline：行级元素。
inline-block：行级显示，但可以设置宽高。
none：隐藏元素，不占据空间。
flex 和 grid：用于高级布局。

示例代码

<style>
    .inline-block {
        display: inline-block;
        width: 100px;
        height: 50px;
        background: #81c784;
        margin: 5px;
    }
</style>
<span class="inline-block">Inline Block</span>
<span class="inline-block">第二个盒子</span>

三、排版上下文

1. 块级排版上下文（Block Formatting Context, BFC）

BFC 是页面布局的一个独立区域，具有以下特点：

内部的块级盒子从上到下排列。
不与浮动元素重叠。
清除浮动时可用。

创建 BFC 的方法

使用 overflow 设置为 hidden、auto或 scroll。
设置 display 为 flex 或 grid。

2. 行级排版上下文

行内元素在一行中按照从左到右的顺序排列，宽度由内容决定。

四、Flexbox 布局

Flexbox 是一种高效的一维布局方式，核心概念：

容器属性
- flex-direction：主轴方向。
- justify-content：主轴对齐方式。
- align-items：交叉轴对齐方式。
子项属性
- flex-grow：放大比例。
- flex-shrink：缩小比例。

示例代码

<style>
    .flex-container {
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: #e8eaf6;
        padding: 10px;
    }

    .flex-item {
        width: 100px;
        height: 50px;
        background: #7986cb;
        text-align: center;
        line-height: 50px;
    }
</style>
<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
</div>

五、Grid 布局

Grid 是一种二维布局方式，允许同时控制行和列。

1. 核心概念

网格线：行列之间的边界，用索引标记。
网格区域：由网格线围成的空间。

2. 属性

grid-template-columns：定义列数及宽度。
grid-template-rows：定义行数及高度。
grid-gap：行列之间的间距。

示例代码

<style>
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: auto 100px;
        grid-gap: 10px;
        background: #e3f2fd;
        padding: 10px;
    }

    .grid-item {
        background: #90caf9;
        text-align: center;
        padding: 10px;
    }
</style>
<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>

六、position属性

控制元素在页面中的定位方式。

static：默认值，按普通文档流排列。
relative：相对自身正常位置偏移。
absolute：相对最近的定位父元素偏移。
fixed：相对视口定位，随滚动保持固定。
sticky：介于 relative 和 fixed 之间。

示例代码

<style>
    .relative {
        position: relative;
        top: 10px;
        left: 20px;
        background: #ffcc80;
        padding: 10px;
    }

    .fixed {
        position: fixed;
        bottom: 10px;
        right: 10px;
        background: #ffab91;
        padding: 10px;
    }
</style>
<div class="relative">相对定位</div>
<div class="fixed">固定定位</div>

通过对 块级与行级元素、排版规则、Flexbox、Grid 和 position 属性 的理解和实践，可以更高效地构建复杂布局并提升网页的可用性。