CSS是前端页面样式控制的核心技术，很多开发者在实践过程中都会遇到各类样式设置问题，下面先通过一张示意图直观了解常见问题的分布场景。
一、样式不生效的常见原因与解决
很多开发者写完CSS代码后发现样式没有应用到对应元素，最常见的原因是选择器优先级不够或者语法错误。
1.1 选择器优先级问题
CSS选择器的优先级从高到低为：内联样式 > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器/伪元素选择器。如果低优先级的选择器样式被高优先级的覆盖，就会出现样式不生效的情况。
比如下面的代码，类选择器设置的红色会被ID选择器的蓝色覆盖：
/* 类选择器样式 */
.text {
color: red;
}
/* ID选择器样式，优先级更高 */
#content .text {
color: blue;
}解决方案是提升目标选择器的优先级，或者检查是否有更高优先级的样式覆盖了当前设置，也可以使用!important强制提升优先级，但尽量不要过度使用。
1.2 语法错误导致样式失效
CSS语法错误比如属性名拼写错误、缺少分号、括号不匹配等，都会导致整段样式失效。比如下面的错误代码：
/* 错误示例：属性名拼写错误，colr应为color，且缺少分号 */
.box {
colr: green
width: 100px;
}解决这类问题可以使用浏览器的开发者工具检查样式，错误的样式会被标记为删除线，同时可以借助CSS校验工具提前排查语法问题。
二、盒模型计算异常问题
盒模型是CSS布局的基础，很多布局错位问题都和盒模型计算有关。默认的盒模型box-sizing为content-box，元素的宽度只包含内容宽度，padding和border会额外增加元素总宽度。
比如设置一个div宽度为100px，padding为10px，border为1px，实际总宽度会是122px：
/* 默认content-box盒模型 */
.default-box {
width: 100px;
padding: 10px;
border: 1px solid #000;
/* 实际总宽度：100 + 10*2 + 1*2 = 122px */
}解决方案是将box-sizing设置为border-box，这样元素的width会包含content、padding和border的总宽度，避免计算错误：
/* border-box盒模型，宽度包含padding和border */
.fix-box {
box-sizing: border-box;
width: 100px;
padding: 10px;
border: 1px solid #000;
/* 实际总宽度就是100px，内容宽度会自动调整为78px */
}三、浮动元素导致的父容器高度塌陷
当子元素设置浮动后，会脱离文档流，导致父容器无法被撑开，出现高度塌陷的问题，比如下面的结构：
<div class="parent">
<div class="child">浮动子元素</div>
</div>对应的CSS如果子元素浮动，父容器没有设置高度的话就会塌陷：
.child {
float: left;
width: 100px;
height: 100px;
background: #f00;
}
/* 父容器没有高度，会被子元素浮动影响导致塌陷 */
.parent {
border: 1px solid #000;
}常见的解决方案有三种：
- 给父容器设置固定高度，但灵活性较差
- 在父容器末尾添加一个空的清除浮动元素：
<div style="clear:both"></div> - 给父容器设置
overflow: hidden或者overflow: auto，触发BFC清除浮动
推荐使用伪元素清除浮动，兼容性更好且不增加额外DOM节点：
/* 伪元素清除浮动方案 */
.parent::after {
content: "";
display: block;
clear: both;
}四、响应式布局适配问题
在不同屏幕尺寸下样式显示异常是响应式开发中的常见问题，比如固定宽度的元素在小屏幕上会溢出。
解决方案是使用相对单位代替固定单位，比如用rem、%、vw/vh等，同时结合媒体查询适配不同屏幕：
/* 基础字体大小设置，1rem = 16px */
html {
font-size: 16px;
}
/* 元素使用rem单位，会根据根字体大小自适应 */
.responsive-box {
width: 10rem; /* 相当于160px */
padding: 1rem;
}
/* 屏幕宽度小于768px时的适配样式 */
@media screen and (max-width: 768px) {
html {
font-size: 14px; /* 小屏幕下缩小根字体，元素会等比例缩小 */
}
.responsive-box {
width: 100%; /* 小屏幕下宽度占满父容器 */
}
}通过以上几类常见问题的解决方案，开发者可以快速处理大部分CSS样式设置过程中的异常，提升开发效率。