手写笔记

---

一、补充重要知识

1.1 防脱盒：box-sizing

• Q：content-box与border-box的区别是什么？
• A：

1. content-box（默认标准盒模型）：width、height仅代表内容区域，padding、border会向外撑开元素，容易造成布局错位。
2. border-box（怪异盒模型）：设置的宽高为元素整体占位尺寸，padding、border向内压缩内容，不会撑大盒子，可避免布局错乱。

💡 开发通用重置方案

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

补充：行内元素无法直接设置宽高，需要转为inline-block后，盒模型规则才生效。

1.2 颜色Alpha透明度通道

三种透明色写法

1. rgba(0,0,0,0.5)：透明度取值范围0~1，兼容IE9及以上浏览器。
2. rgba(0 0 0 / 50%)：现代空格语法，支持百分比透明度，可读性更强。
3. #00000080：八位十六进制，前六位为RGB色值，后两位十六进制数值控制透明度。

关键区分

• rgba仅让当前颜色透明，不会影响子元素样式；
• opacity会让元素及内部所有子元素整体透明，属于布局属性，二者使用场景不同。

1.3 尺寸百分比参考规则

1. 常规文档流元素：width、padding、margin的百分比均参照父元素内容宽度计算；height百分比生效的前提是父元素设置固定高度，若父高度由内容自适应，则百分比height失效。
2. 绝对定位元素：百分比尺寸参照最近已开启定位父元素的padding区域。
3. fixed定位元素：所有百分比尺寸统一参照浏览器可视视口。

1.4 常用属性百分比参考汇总

属性	参考基准	关键注意点
width	父元素内容宽度	绝对定位参照定位父padding区域
height	父元素内容高度	父高度自适应时设置无效
padding	父元素内容宽度	上下padding同样参考宽度，可实现等比例容器
border	不支持百分比	仅可使用px、rem等固定单位
margin	父元素内容宽度	垂直方向margin百分比同样参考宽度

二、绝对定位适用场景

满足以下任意一种场景，适合使用绝对定位：

1. 元素需要放置在页面任意坐标位置，不受常规文档流约束。
2. 元素需要脱离文档流，不挤压、不影响其他元素的正常排版布局。
3. 需要在父容器内实现元素水平、垂直双向居中。

补充定位特性

1. 开启absolute/fixed定位后，行内元素自动转为块级元素，可直接设置宽高。
2. 脱离文档流的元素不会触发父元素高度塌陷、垂直外边距合并问题。
3. 经典居中兼容写法

.parent {
  position: relative;
}
.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

三、精灵图

3.1 作用

将多个小图标整合到一张大图中，仅发起一次网络请求，减少HTTP请求次数，优化页面加载性能。

3.2 使用要点

1. 容器设置为单个图标的固定宽高，限定可视区域。
2. 为元素设置背景大图，禁止背景平铺background-repeat: no-repeat。
3. 使用负值background-position偏移背景图，截取需要展示的图标。

3.3 优缺点与替代方案

• 优点：减少网络请求、避免小图加载闪烁、便于统一管理图标资源。
• 缺点：图标尺寸变更需要重新切图，手动计算偏移坐标繁琐，无法直接实现图标变色。
• 现代替代方案：阿里Iconfont字体图标、SVG矢量图标。

四、绝对定位详解

4.1 absolute与fixed核心区别

1. position: absolute 参考最近一级非static定位的父元素，无定位父级则参照html根元素；页面滚动时元素会跟随页面滚动。

2. position: fixed 参考浏览器可视视口，不受父元素定位属性影响；页面滚动时元素位置固定，常用于回到顶部、悬浮导航栏。

4.2 层叠顺序z-index规则

1. 仅定位元素（relative/absolute/fixed/sticky）可使用z-index控制层级，静态元素该属性无效。
2. z-index数值越大，元素层级越靠上，默认值为auto（等同于0），支持负值。
3. 层叠上下文约束：父元素的层级会限制子元素，子元素无论设置多大的z-index，都无法超越父级层叠上下文的上层元素。

4.3 相对定位补充

position: relative不会脱离文档流，会保留元素原始占位，常作为绝对定位元素的父级定位容器。

五、核心总结

1. border-box可以从根源避免padding、border撑大布局，是项目通用的布局优化方案。
2. rgba用于颜色局部透明，opacity控制元素整体透明，使用时需要区分场景。
3. 绝大多数百分比属性参考父元素宽度，百分比高度依赖父容器固定高度，可利用垂直内边距实现等比例布局。
4. 绝对定位脱离文档流，自动转为块级元素；absolute依赖父级定位容器，fixed固定在浏览器视口。
5. 精灵图属于传统前端性能优化方案，目前多被字体图标、SVG图标替代；定位元素可通过z-index调整层叠顺序，层级受层叠上下文约束。