CSS 基础 - HTML & CSS

01. CSS 选择器——找准你要「化妆」的元素

CSS 给 HTML 穿衣服化妆，选择器告诉它「给谁化」。常用选择器：元素选择器——直接写标签名，p 选所有段落类选择器——点号开头，.container 选所有 class="container" 的（最常用！） ID 选择器——井号开头，#header 选 id="header" 的元素后代选择器——空格隔开，.nav a 选导航里所有链接伪类——冒号开头，:hover 鼠标悬停，:focus 输入框获焦点

css

/* 元素选择器 */
p { color: #333; line-height: 1.6; }

/* 类选择器（最常用） */
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }

/* ID 选择器 */
#header { background: #1a1a1a; color: white; }

/* 后代选择器 */
.nav a { text-decoration: none; color: inherit; }

/* 伪类 */
.button:hover { background: #0066cc; transform: translateY(-1px); }
input:focus { outline: 2px solid #0066cc; }

02. 盒模型——每个元素都是盒子

CSS 世界里，每个元素都是矩形「盒子」。由里到外四层： content——实际内容区，width/height 控制这层 padding——内边距，内容到边框的间距 border——边框 margin——外边距，跟邻居的距离关键在 box-sizing。默认 width 只包括 content，加上 padding+border 实际更宽很难算。设 box-sizing: border-box 后 width 包含 content+padding+border，布局计算直观多了。

css

/* 默认盒模型（算得头疼） */
.box { width: 200px; padding: 20px; border: 2px solid #333; margin: 10px; }
/* 实际占宽：200+40+4=244px */

/* border-box 盒模型（强烈推荐） */
.box-border { box-sizing: border-box; width: 200px; padding: 20px; border: 2px solid #333; }
/* 实际占宽就是 200px */

/* 项目开始就全局设置 */
*, *::before, *::after { box-sizing: border-box; }

项目一开始就全局 box-sizing: border-box，能省掉你无数布局上的麻烦。

知识测验

第 1/5 题正确 0

类选择器用什么符号？

Flexbox 布局