12. CSS 布局与样式技巧

在前端开发中，CSS 是控制页面样式和布局的核心技术。本文总结了 CSS 布局中的关键概念和实用技巧，包括 overflow 属性、背景图片处理、精灵图技术、display 属性、浮动布局以及清除浮动的方法。

---

一、overflow 属性详解

overflow 属性用于控制当元素内容超出其容器时的显示方式。常见值包括：

• visible（默认）：内容溢出时可见。
• hidden：溢出部分隐藏。
• scroll：始终显示滚动条。
• auto：浏览器智能判断是否显示滚动条。
• text-overflow: ellipsis+white-space: nowrap`：当内容溢出时，用省略号代替。

示例代码：

.content {
  width: 100px;
  background-color: cornflowerblue;
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 溢出时显示省略号 */
  white-space: nowrap; /* 文本不换行 */
}

应用场景：限制文本或内容显示区域，避免页面布局混乱。

---

二、背景图片处理技巧

背景图片是 CSS 中常用的装饰手段，关键属性包括：

1. background-image：设置背景图片路径。
2. background-repeat ：控制图片是否重复（如 no-repeat 禁止重复）。
3. background-size ：调整图片尺寸（如 cover 完全覆盖容器）。
4. background-position ：定位图片位置（如 right bottom 右下角）。
5. background-attachment ：控制背景是否固定（如 fixed 实现视差效果）。

示例：

.box {
  background-image: url(./bg2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; /* 背景固定，页面滚动时不移动 */
}

---

三、精灵图（CSS Sprites）技术

原理 ：将多张小图合并为一张大图，通过 background-position 定位显示特定部分。
优势：减少HTTP请求，提升加载速度。

关键点：

• 背景定位 ：通过 background-position 调整精灵图中具体图标的显示位置。
• 尺寸控制 ：background-size 确保精灵图适配容器。

示例代码：

.box {
  width: 300px;
  height: 300px;
  background-image: url(./icons.jpg);
  background-size: 700% 700%;
  background-position: -500% -200%;
}

---

四、display 属性与元素类型

HTML 元素按布局方式分为：

1. 块元素

   • 默认独占一行，宽高可设。
   • 示例：div、h1-h6、p 等。

2. 行内元素与行内块元素

   • 行内元素（如 a、span）宽高不可设，但可通过 display: inline-block 转换为行内块元素。
   • 示例：img 默认是行内块元素，可设置宽高。

3. 行内元素间隙问题

   • 原因：HTML 中行内元素换行会产生空白字符。
   • 解决方案：
     • 设置父元素 font-size: 0，子元素单独设置字体大小。
     • 将行内元素写成一行（不推荐，影响可读性）。
     • 使用负外边距或浮动布局消除间隙。

---

五、浮动布局与高度塌陷解决方案

浮动布局会脱离文档流，导致父元素高度塌陷。
解决方案：

• 伪元素清除浮动 ：在父元素后添加伪元素 ::after，设置 content: ""、display: block 和 clear: both，触发 BFC（块级格式化上下文）以解决高度塌陷问题。

示例代码：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}