将一个块级元素水平居中的方法
- 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。
- 文本在元素内居中对齐，可以使用 text-align: center;。
- 使用弹性盒模型 display:flex; justify-content:conter;。
- 使用绝对定位 position: absolute; left：50%；transform: translate(-50%, -50%);。
将一个块级元素垂直居中的方法
- 头部顶部使用 padding:。
- 使用行高等于高 line-height。
- 使用弹性盒模型 display:flex; align-items:center;。
- 使用绝对定位 position: absolute; top：50%；transform: translate(-50%, -50%);。
雪碧图：sprite 图片拼合技术
是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
雪碧图的优点
- 减少加载网页图片时对服务器的请求次数。
- 提高页面的加载速度。
雪碧图的缺点
- 影响浏览器的缩放功能。
- 拼图维护比较麻烦。
行盒
什么是行盒：display属性为inline的元素。
行盒显著特征
- 行盒可被折断，因为内容可被折断换行（可通过word-break属性设置截断位置）；
-
同一个包含块中，连续的多个行盒水平依次排列 ；
-
空白折叠的规则仅适用于行盒内部和行盒之间 ；
-
行盒与行盒之间的距离可使用水平方向上的margin和padding进行设置。
行盒的尺寸
行盒可替换元素：图片和多媒体；
a.与块盒完全一致；
b.对于图片和视频，仅设置宽高中的一个时，另一个会自动按比例适应
c.对于图片和视频，如果同时设置宽高，可通过object-fit属性设置适应方式
行盒的位置：
行盒在包含块中，会避开浮动和常规流，浮动和绝对定位的盒子自动变为块盒；
包含行盒的块盒，可使用text-align调整行盒在它内容的对齐方式；
行盒之间的对齐可以使用vertical-align调整。