CSS是控制网页样式的基础工具，但初学者常遇到样式不生效、宽高异常或布局错位等问题。本文从基础语法出发，依次梳理选择器优先级、盒模型计算、常用属性与Flex/Grid布局，并提供明确的排错路径与调试习惯，帮助你在实际项目中快速定位并解决样式冲突。

CSS基础语法与引入方式

CSS主要用于控制网页中的颜色、字体、间距、边框和布局表现。常见引入方式包括行内样式、页面内部样式表和外部样式表，其中外部样式表最适合多页面复用与项目维护，通常通过标签引入。

编写CSS时，一条规则由选择器和声明块组成，声明块内包含属性名与属性值。属性与属性值之间用英文冒号分隔，每条声明建议以英文分号结尾。先把基础结构写对，再学习具体属性，排查问题会更高效。示例如下：

p { color: #333; font-size: 16px; }
.card { padding: 16px; }

如果样式没有生效，优先检查选择器是否命中目标元素、属性名是否拼写正确、结尾分号是否遗漏，以及CSS文件是否已被页面正确加载。

选择器类型与优先级判断

选择器决定样式作用到哪些元素，也是样式冲突的高发区。常见写法包括标签选择器、类选择器、ID选择器、后代选择器、并集选择器和伪类选择器。实际开发中，类选择器最常用，因为它便于复用且易于维护。

优先级判断可参考以下常用顺序：内联样式高于ID，ID高于类、伪类和属性选择器，类高于标签和伪元素。当优先级相同时，后写的规则会覆盖先写的规则。例如：

.title { color: blue; }
#main .title { color: red; }

两者同时命中时，#main .title更具体，文字将显示为红色。若发现“明明写了样式却不生效”，通常需检查三件事：是否被更高优先级覆盖、是否被后面的规则覆盖、是否误用了!important导致难以维护。

常见选择器写法示例

• 标签选择器：p {}，适合统一设置段落、标题、列表等基础样式
• 类选择器：.box {}，适合组件复用，是最推荐的日常写法
• ID选择器：#header {}，适合唯一结构，但不宜过度依赖
• 后代选择器：.article a {}，适合限制某个区域内的样式范围
• 伪类选择器：.card:hover {}，处理鼠标移入等交互效果

盒模型结构与宽高异常排查

盒模型决定元素在页面里实际占据的空间，由内容区、内边距（padding）、边框（border）和外边距（margin）组成。默认情况下，width和height只计算内容区，因此元素加上padding和border后，实际占位会比设定值更大，这也是宽高异常最常见的原因。

例如一个盒子写成：

width: 200px;
padding: 20px;
border: 2px solid #ccc;

默认总宽度会变成244像素。为减少计算误差，很多项目会统一设置box-sizing: border-box;，这样宽高会直接包含内边距和边框，更适合做稳定布局。常用的全局重置写法是：

* { box-sizing: border-box; }

盒模型问题排查要点

• 内容区承载文字、图片等实际内容
• 内边距padding控制内容与边框之间的留白
• 边框border会增加元素可见尺寸
• 外边距margin控制元素与其他元素的距离
• 宽高异常时优先检查box-sizing、padding、border和父容器宽度

常用属性：display、position与overflow

除了颜色和字号，页面样式里最常查的还有display、position、overflow、line-height、text-align等属性。

• display决定元素以块级、行内或弹性盒等形式参与排版。display: block适合独占一行的结构，display: inline-block适合小模块并排。
• position用于控制元素定位方式。relative常作为参考容器，absolute常用于角标、悬浮按钮等脱离文档流的元素；fixed适合吸顶栏和固定悬浮入口。典型示例：父元素写position: relative;，子元素写position: absolute; top: 0; right: 0;，即可把子元素固定到右上角。
• overflow常用于处理超出内容，如文字裁切、列表滚动和图片容器隐藏。overflow: hidden可隐藏溢出内容，overflow: auto可在需要时显示滚动条。
• line-height常用于控制文本行高，单行文本可借此做简单垂直居中。

若出现文字垂直不居中、定位元素跑偏、内容被遮挡等问题，通常要检查父元素是否建立定位上下文、容器高度是否明确，以及overflow: hidden是否误裁剪了本应显示的内容。

Flex与Grid布局选型与错位排查

布局是CSS最有实用价值的部分。Flex适合一维排列（一行或一列里的对齐与分配），Grid适合二维网格（同时控制行和列）。两者并非互斥，页面外层常用Grid分区，局部组件内部再用Flex对齐。

Flex布局示例与适用场景

.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

适合导航栏、操作区、按钮组、列表项横向排列。常用属性包括justify-content、align-items、flex-wrap、gap。

Grid布局示例与适用场景

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

适合卡片墙、后台面板、商品列表等规则网格页面。常用属性包括grid-template-columns、gap、grid-column、grid-row。

布局错位排查要点

• Flex错位：检查父元素是否写了display: flex、子元素是否被固定宽度挤压、是否误用了justify-content
• Grid错位：检查列定义是否合理、子项是否跨列、容器宽度是否足够
• 选型建议：一行一列优先Flex，成片网格优先Grid

样式排错路径与调试习惯

把概念记住还不够，真正有用的是遇到问题能快速定位。以下是常见问题的排查路径：

• 样式不生效：检查选择器命中、优先级、文件加载顺序
• 宽高异常：检查box-sizing、padding、border、父容器宽度
• 布局错位：检查display、定位上下文、子元素固定宽度
• 内容溢出：检查overflow、图片尺寸、长文本换行规则

浏览器开发者工具的元素检查面板非常重要，它能直接看到元素最终生效的样式、被划掉的规则和盒模型尺寸。对于初学者来说，一个高效习惯是：先写最小可用样式，再逐步增加属性，这样更容易判断究竟是哪一条规则导致了冲突。

将本文作为入门型CSS速查资料时，建议按“语法结构→选择器与盒模型→定位与布局→排错路径”的顺序使用。这样不仅能理解CSS是什么，也能在页面编写过程中更快解决样式冲突、宽高异常和布局错位等实际问题。