HTML+CSS收官1
约 1416 字大约 5 分钟
2026-06-17
手写笔记

一、补充重要知识
1.1 防脱盒:box-sizing
- Q:content-box与border-box的区别是什么?
- A:
content-box(默认标准盒模型):width、height仅代表内容区域,padding、border会向外撑开元素,容易造成布局错位。border-box(怪异盒模型):设置的宽高为元素整体占位尺寸,padding、border向内压缩内容,不会撑大盒子,可避免布局错乱。
💡 开发通用重置方案
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}补充:行内元素无法直接设置宽高,需要转为
inline-block后,盒模型规则才生效。
1.2 颜色Alpha透明度通道
三种透明色写法
rgba(0,0,0,0.5):透明度取值范围0~1,兼容IE9及以上浏览器。rgba(0 0 0 / 50%):现代空格语法,支持百分比透明度,可读性更强。#00000080:八位十六进制,前六位为RGB色值,后两位十六进制数值控制透明度。
关键区分
rgba仅让当前颜色透明,不会影响子元素样式;opacity会让元素及内部所有子元素整体透明,属于布局属性,二者使用场景不同。
1.3 尺寸百分比参考规则
- 常规文档流元素:width、padding、margin的百分比均参照父元素内容宽度计算;height百分比生效的前提是父元素设置固定高度,若父高度由内容自适应,则百分比height失效。
- 绝对定位元素:百分比尺寸参照最近已开启定位父元素的padding区域。
- fixed定位元素:所有百分比尺寸统一参照浏览器可视视口。
1.4 常用属性百分比参考汇总
| 属性 | 参考基准 | 关键注意点 |
|---|---|---|
| width | 父元素内容宽度 | 绝对定位参照定位父padding区域 |
| height | 父元素内容高度 | 父高度自适应时设置无效 |
| padding | 父元素内容宽度 | 上下padding同样参考宽度,可实现等比例容器 |
| border | 不支持百分比 | 仅可使用px、rem等固定单位 |
| margin | 父元素内容宽度 | 垂直方向margin百分比同样参考宽度 |
二、绝对定位适用场景
满足以下任意一种场景,适合使用绝对定位:
- 元素需要放置在页面任意坐标位置,不受常规文档流约束。
- 元素需要脱离文档流,不挤压、不影响其他元素的正常排版布局。
- 需要在父容器内实现元素水平、垂直双向居中。
补充定位特性
- 开启absolute/fixed定位后,行内元素自动转为块级元素,可直接设置宽高。
- 脱离文档流的元素不会触发父元素高度塌陷、垂直外边距合并问题。
- 经典居中兼容写法
.parent {
position: relative;
}
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}三、精灵图
3.1 作用
将多个小图标整合到一张大图中,仅发起一次网络请求,减少HTTP请求次数,优化页面加载性能。
3.2 使用要点
- 容器设置为单个图标的固定宽高,限定可视区域。
- 为元素设置背景大图,禁止背景平铺
background-repeat: no-repeat。 - 使用负值
background-position偏移背景图,截取需要展示的图标。
3.3 优缺点与替代方案
- 优点:减少网络请求、避免小图加载闪烁、便于统一管理图标资源。
- 缺点:图标尺寸变更需要重新切图,手动计算偏移坐标繁琐,无法直接实现图标变色。
- 现代替代方案:阿里Iconfont字体图标、SVG矢量图标。
四、绝对定位详解
4.1 absolute与fixed核心区别
position: absolute参考最近一级非static定位的父元素,无定位父级则参照html根元素;页面滚动时元素会跟随页面滚动。position: fixed参考浏览器可视视口,不受父元素定位属性影响;页面滚动时元素位置固定,常用于回到顶部、悬浮导航栏。
4.2 层叠顺序z-index规则
- 仅定位元素(relative/absolute/fixed/sticky)可使用z-index控制层级,静态元素该属性无效。
- z-index数值越大,元素层级越靠上,默认值为auto(等同于0),支持负值。
- 层叠上下文约束:父元素的层级会限制子元素,子元素无论设置多大的z-index,都无法超越父级层叠上下文的上层元素。
4.3 相对定位补充
position: relative不会脱离文档流,会保留元素原始占位,常作为绝对定位元素的父级定位容器。
五、核心总结
- border-box可以从根源避免padding、border撑大布局,是项目通用的布局优化方案。
- rgba用于颜色局部透明,opacity控制元素整体透明,使用时需要区分场景。
- 绝大多数百分比属性参考父元素宽度,百分比高度依赖父容器固定高度,可利用垂直内边距实现等比例布局。
- 绝对定位脱离文档流,自动转为块级元素;absolute依赖父级定位容器,fixed固定在浏览器视口。
- 精灵图属于传统前端性能优化方案,目前多被字体图标、SVG图标替代;定位元素可通过z-index调整层叠顺序,层级受层叠上下文约束。
