Archived

This repository has been archived on 2026-05-19. You can view files and clone it. You cannot open issues or pull requests or push a commit.

Files

T

wonder f05be3890e vault backup: 2026-04-24 23:45:19

2026-04-24 23:45:19 +08:00

4.0 KiB

Raw Permalink Blame History

tags, create time

CSS 基础

概述

CSS（Cascading Style Sheets）负责网页的视觉呈现。如果说 HTML 是骨架，CSS 就是皮肤和衣服。掌握 CSS 的核心是理解三个概念：选择器（选谁）、盒模型（有多大）、布局（怎么排）。

思考题：为什么 CSS 叫做"层叠"样式表？多个规则作用于同一个元素时，浏览器如何决定用哪一个？

正文

1. CSS 引入方式

<!-- 方式一：行内样式（不推荐） -->
<p style="color: red; font-size: 16px;">红色文字</p>

<!-- 方式二：内部样式表 -->
<style>
    p { color: blue; }
</style>

<!-- 方式三：外部样式表（推荐） -->
<link rel="stylesheet" href="styles.css">

2. 选择器优先级

!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符
     10000       1000       100           10           1           0

/* 优先级实战 */
div .item { color: red; }      /* 0*1000 + 1*100 + 1*10 = 110 */
div p.item { color: blue; }    /* 0*1000 + 1*100 + 1*10 + 1*1 = 111 */
#main .item { color: green; }  /* 1*1000 + 0*100 + 1*10 = 1010 */

提问： 如果一个元素同时被 .a { color: red } 和 #b { color: blue } 选中，最终颜色是什么？为什么？

3. 盒模型（Box Model）

每个元素都是一个盒子，由四部分组成：

block-beta
    columns 1
    margin["margin 外边距\n（透明，不影响盒子大小）"]
    border["border 边框"]
    padding["padding 内边距\n（盒子内部，影响背景色）"]
    content["content 内容区\n（实际文字/图片）"]

/* 两种盒模型的区别 */
.box-content-box {
    box-sizing: content-box;   /* 默认：width = content 宽度 */
}
.box-border-box {
    box-sizing: border-box;    /* 推荐：width = content + padding + border */
}

核心要点： 实际开发中建议全局使用 box-sizing: border-box，避免尺寸计算混乱。

4. Flexbox 布局（一维布局首选）

.container {
    display: flex;
    justify-content: center;    /* 主轴居中 */
    align-items: center;        /* 交叉轴居中 */
    gap: 16px;                  /* 子元素间距 */
}

.item {
    flex: 1;                    /* 等宽分配 */
    /* 或者 flex: 0 0 200px;  固定宽度 */
}

Flexbox 常用属性速查：

属性	作用
`display: flex`	启用 flex 布局
`justify-content`	主轴对齐（center / space-between / space-around）
`align-items`	交叉轴对齐（center / flex-start / stretch）
`flex-direction`	主轴方向（row / column）
`gap`	子元素间距

提问： 什么时候用 Flexbox，什么时候用 Grid？它们的本质区别是什么？

5. Grid 布局（二维布局神器）

.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;  /* 三列：固定 + 自适应 */
    grid-template-rows: auto 1fr auto;      /* 三行：自动 + 弹性 + 自动 */
    gap: 20px;
}

/* 响应式网格 */
.grid-responsive {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

graph TD
    A["display: grid"] --> B["grid-template-columns\n定义列"]
    A --> C["grid-template-rows\n定义行"]
    A --> D["gap\n间距"]
    A --> E["justify/align\n对齐"]

6. 响应式设计

/* 媒体查询：不同屏幕尺寸应用不同样式 */
.container {
    width: 100%;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }
    .grid-layout {
        grid-template-columns: 1fr;  /* 窄屏单列 */
    }
}

关键概念： 移动端优先（Mobile First）是现代响应式设计的最佳实践——先写移动端样式，再用 min-width 媒体查询逐步增强。

关联笔记

HTML 基础 — CSS 的搭档，HTML 提供结构，CSS 提供样式
JavaScript 基础 — 通过 JS 动态修改 CSS，实现交互效果

4.0 KiB Raw Permalink Blame History Unescape Escape