CSS盒子模型
盒子模型基础
在CSS中，每个元素都被视为一个"盒子"，这个盒子由以下几个部分组成：
- width/height：内容区域的宽度和高度
- padding：内边距，内容与边框之间的空间
- border：边框，围绕内容和内边距的线
- margin：外边距，盒子与其他元素之间的透明空间
盒子尺寸的两种计算方式
1. 标准盒子模型（content-box）
默认情况下，CSS使用标准盒子模型。在这种模式下：
- 元素的总宽度 = width + padding-left + padding-right + border-left + border-right
- 元素的总高度 = height + padding-top + padding-bottom + border-top + border-bottom
2. 怪异盒子模型（border-box）
通过设置box-sizing: border-box可以切换到怪异盒子模型：
- 元素的总宽度 = width（包含padding和border）
- 元素的总高度 = height（包含padding和border）
.box {
box-sizing: border-box; /* 推荐全局设置 */
}
元素溢出处理
当内容超出容器大小时，可以使用overflow属性控制：
.container {
overflow: visible; /* 默认值，内容会溢出 */
overflow: hidden; /* 隐藏溢出部分 */
overflow: scroll; /* 总是显示滚动条 */
overflow: auto; /* 仅在需要时显示滚动条 */
}
外边距的常见问题
1. 外边距合并现象
垂直方向上相邻的两个块级元素的外边距会发生合并，取两者中的较大值。
解决方案：
- 使用padding代替margin
- 添加边框或内边距
- 使用BFC（块级格式化上下文）
2. 外边距塌陷问题
父元素与第一个/最后一个子元素的外边距会发生塌陷。
解决方案：
- 为父元素添加
overflow: hidden - 使用padding代替margin
- 添加边框
行内元素的内外边距问题
行内元素（如<span>）的垂直margin不生效，水平margin有效。padding在垂直方向会影响布局但不占据空间。
解决方案：
- 使用
line-height控制行内元素的垂直间距 - 将元素设置为
display: inline-block
.inline-element {
line-height: 1.5; /* 控制垂直间距 */
display: inline-block; /* 使margin/padding在所有方向生效 */
}
圆角与阴影效果
圆角效果
.rounded {
border-radius: 10px; /* 统一圆角 */
border-radius: 10px 20px 30px 40px; /* 分别设置四个角 */
border-radius: 50%; /* 圆形 */
}
盒子阴影
.shadow {
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
/* 水平偏移 垂直偏移 模糊半径 颜色 */
}
实用CSS技巧
1. 版心居中
.container {
width: 1200px; /* 常见版心宽度 */
margin: 0 auto; /* 水平居中 */
}
2. 清除默认样式
/* 清除列表默认样式 */
ul, ol {
list-style: none;
padding: 0;
margin: 0;
}
/* 清除链接默认样式 */
a {
text-decoration: none;
color: inherit;
}
总结
理解CSS盒子模型是掌握页面布局的基础。通过合理使用box-sizing、处理外边距问题、控制元素溢出以及运用圆角阴影等效果，可以创建出更加精美和响应式的网页设计。记住这些常见问题的解决方案，将大大提高你的CSS开发效率。
