CSS 入门：从零理解盒模型与布局

刚开始学网页时，很多人会觉得 CSS 很零散：颜色、边框、间距、居中，每个属性单独看都不难，合在一起却总是不听话。其实 CSS 有一条很清晰的主线：先确定每个元素占多大的盒子，再决定盒子在页面里怎么排，最后才处理颜色、字体这些外观细节。抓住这条主线，很多问题就不再是碰运气。

先理解盒模型

一个元素在页面里并不是只有文字本身，它外面依次包着内边距、边框和外边距。内容区放文字或图片，内边距是内容和边框之间的留白，边框是可见的边界，外边距是元素与相邻元素之间的距离。初学者最容易踩的坑，是把宽度只理解成内容宽度，结果加上内边距和边框后整个盒子变宽，布局被挤乱。把 box-sizing 设为 border-box 后，设置的宽度就包含内边距和边框，计算直观得多，日常写布局建议统一这样做。

选择器与层叠

选择器是告诉浏览器把样式给谁。标签选择器范围广，类选择器最常用，适合给一类元素复用同一套样式；id 选择器唯一性强，一般不用来写大量样式。多个规则命中同一个元素时，浏览器按来源、优先级和书写顺序决定最终结果。理解这一点，就不会一味用 !important 去压样式，也能更快定位为什么改了属性却没有生效。

两套常用布局

日常布局主要靠两套工具。Flex 适合一维排列，比如导航栏、按钮组、卡片横向排列，用主轴和交叉轴控制对齐与换行；Grid 适合二维布局，比如整体页面的行列划分，先画好网格，再把内容放进格子。居中也不再需要各种偏方：Flex 里用 justify-content 与 align-items 配合，往往就能实现水平和垂直居中。

响应式与细节习惯

同一页面在手机和电脑上都应该能看。常用做法是先保证小屏幕下内容纵向排列、字号可读、按钮可点，再用媒体查询在宽屏下展开为多列。单位上，固定像素适合边框和细小间距，百分比适合跟随容器变化，rem 适合跟随根字号统一缩放。还有三个习惯值得养成：给图片设最大宽度防止溢出，少用固定高度去装不确定长度的文字，改样式后多换一个屏幕宽度检查一次。

结尾与小练习

学 CSS 不需要一次背完所有属性。先掌握盒模型、选择器、Flex 与 Grid、响应式这四块，再在做小页面时按需查属性，进步会快得多。下一个小练习可以是：只用 Flex 做一个导航栏，再用 Grid 做一个三列卡片区，亲手调一次对齐和间距，比看十遍概念记得更牢。