大家好，我是第八哥，做互联网开发 10 年了，前端这块摸爬滚打这么久，发现初级开发者学 CSS 时总会踩些重复的坑。
今天就聊聊 CSS 里那些让新手头疼的问题，结合实战技巧和优缺点，给大家讲明白。
一、盒模型：CSS 布局的基础坑
我刚学 CSS 时，总搞不懂为啥设置了 width，元素实际宽度却更大。后来才知道，这是盒模型在搞鬼。
CSS 盒模型分两种，区别在于 width 和 height 属性的作用范围：
标准盒模型 (content-box)：默认模式，width/height 仅定义内容区尺寸。元素总宽度 = width + 左右 padding + 左右 border + 左右 margin。
怪异盒模型（border-box，又称 IE 盒模型）：width/height 包含内容区、内边距和边框。总宽度 = width + 左右 margin（内边距和边框不额外增加宽度）。
在实际开发中，我们用 box-sizing 统一盒模型，推荐设置 * {box-sizing: border-box;}，这样 width 就是我们直观理解的宽度。
示例代码：
/* 标准盒模型 */
.box1 {
width: 200px;
padding: 20px;
border: 5px solid #000;
/* 实际宽度 200+202+52=250px */
}
/* IE 盒模型 */
.box2 {
width: 200px;
padding: 20px;
border: 5px solid #000;
box-sizing: border-box;
/* 实际宽度 200px */
}优缺点：border-box 更符合直觉，新手不易出错；但老项目可能依赖标准盒模型，修改需谨慎。
二、浮动：布局神器还是麻烦制造者？
浮动（float）一开始是为了实现文字环绕图片的效果的，后来被用来做布局，问题也随之而来。
最常见的就是父元素高度塌陷 —— 子元素浮动后，父元素没高度了。
实战技巧：用 clearfix 清除浮动。给父元素加个类：
.clearfix::after {
content: '';
display: block;
clear: both;
}
.parent {
border: 1px solid #000;
}
.child {
float: left;
width: 100px;
height: 100px;
}优缺点：
- 1. 浮动能快速实现多列布局，但会脱离文档流，影响其他元素；
- 2. 元素尺寸变化易导致布局错位（如浮动元素换行堆积），响应式适配困难；
- 3. 浮动元素挤压相邻行盒宽度，引发文本换行异常。
现在更推荐使用 Flexbox 替代。
三、定位：position 的五种用法别搞混
position 有 static、relative、absolute、fixed、sticky 五种，新手常常弄混 relative 和 absolute。
relative：不脱离文档流，相对于自身的原始位置偏移，原空间保留。
absolute：脱离文档流，相对于最近的非static定位的祖先元素定位（需祖先元素设置 relative/fixed/sticky）。未找到时相对于初始包含块（通常是 <html>）。
实战技巧：
想让子元素 absolute 定位不跑偏，需给父元素加 position: relative;（不用设偏移值）：
.parent {
position: relative;
width: 300px;
height: 300px;
}
.child {
position: absolute;
top: 20px;
right: 20px;
/* 相对于 parent 右上角偏移 20px */
}父元素因包含 absolute/fixed 子元素而高度塌陷：
/* 父元素设置最小高度 */
.parent {
position: relative;
min-height: 100px;
}
/* 或 通过伪元素撑开 */
.parent::after {
content: "";
display: block;
height: 100px;
}优缺点：
- 1. 定位能精确控制元素位置，支持复杂布局。
- 2. 层叠管理灵活，配合 z-index 可精确控制重叠元素的显示优先级。
- 3. 过多使用会让布局混乱，不易维护。
- 4. absolute/fixed 元素脱离文档流，易导致父容器高度塌陷，需额外设置修复。
四、Flexbox：一维布局的救星
Flexbox（弹性盒）是现代布局方式，解决了很多传统布局的痛点，比如垂直居中。
我当年用 margin 和定位调垂直居中，费老劲了，现在用 Flexbox 一行代码就搞定。
实战技巧：给父元素设 display: flex;，子元素就能轻松居中：
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 200px;
}
.child {
width: 100px;
height: 100px;
}在实际开发中，经常会遇到子项内容过长导致布局错乱，内容溢出/截断 的问题，可以参照下面的代码：
.container {
flex-wrap: wrap; /* 允许换行 */
min-width: 0; /* 修复截断 */
}
.item {
overflow: hidden;
text-overflow: ellipsis;
}如果子项高度不一致，可以使用下面的代码：
.container {
align-items: stretch; /* 强制拉伸等高 */
}优缺点：
- 1. Flexbox 适合一维布局（一行或一列）的情况，代码简洁。
- 2. 不适合复杂的二维布局，且旧浏览器（如 IE9 及以下）不支持（二维复杂布局优先用Grid）。
- 3. 大量嵌套 Flex 容器会增加渲染负担。
五、单位选择：px、em、rem 该用哪个？
新手选单位全凭感觉，其实不同的单位有不同的场景。px 固定像素，em 相对父元素，rem 相对根元素（html）。
实战技巧：做响应式页面时，推荐用 rem。给 html 设置 font-size: 62.5%;（1rem=10px），计算起来更方便。
示例代码：
html {
font-size: 62.5%; /* 1rem = 10px */
}
.title {
font-size: 2.4rem; /* 24px */
}
.text {
font-size: 1.6rem; /* 16px */
}优缺点：rem 能统一调整整个页面字体大小，适合响应式；但老项目可能更习惯 px，切换需要适应。
六、响应式设计：媒体查询怎么用才高效？
现在的页面，手机、平板、电脑都要适配，响应式设计是必学的。它的核心就是媒体查询（@media）。
但是新手常写一堆重复代码，其实是有技巧的。
实战技巧：用 “移动优先” 原则，先写移动端样式，再用 min-width 写大屏样式：
/* 移动端样式 */
.box {
width: 100%;
}
/* 平板及以上 */
@media (min-width: 768px) {
.box {
width: 50%;
}
}
/* 电脑及以上 */
@media (min-width: 1200px) {
.box {
width: 33.3%;
}
}优缺点：响应式布局能一套代码适配多种设备，维护方便；但布局复杂时，代码会变多，加载速度可能受影响。
以上就是初级开发者学 CSS 常遇到的问题，其实 CSS 不难，多练多试，遇到问题多查文档。
记住，没有绝对正确的写法，只有适合当前场景的方案。祝大家学 CSS 越来越顺！
评论