将一个块级元素水平和垂直居中的方法

将一个块级元素水平居中的方法

1.  要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。
2. 文本在元素内居中对齐，可以使用 text-align: center;。
3. 使用弹性盒模型 display:flex;   justify-content:conter;。
4. 使用绝对定位 position: absolute; left：50%；transform: translate(-50%, -50%);。  

将一个块级元素垂直居中的方法

1. 头部顶部使用 padding:。
2. 使用行高等于高  line-height。
3. 使用弹性盒模型 display:flex; align-items:center;。
4. 使用绝对定位 position: absolute; top：50%；transform: translate(-50%, -50%);。  

雪碧图：sprite  图片拼合技术

是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

雪碧图的优点

1. 减少加载网页图片时对服务器的请求次数。
2. 提高页面的加载速度。

雪碧图的缺点

1. 影响浏览器的缩放功能。
2. 拼图维护比较麻烦。

行盒

什么是行盒：display属性为inline的元素。

行盒显著特征

1. 行盒可被折断，因为内容可被折断换行（可通过word-break属性设置截断位置）；

2. 同一个包含块中，连续的多个行盒水平依次排列 ；

3. 空白折叠的规则仅适用于行盒内部和行盒之间 ；

4. 行盒与行盒之间的距离可使用水平方向上的margin和padding进行设置。

行盒的尺寸

行盒可替换元素：图片和多媒体；

a.与块盒完全一致；

b.对于图片和视频，仅设置宽高中的一个时，另一个会自动按比例适应

c.对于图片和视频，如果同时设置宽高，可通过object-fit属性设置适应方式

行盒的位置：

行盒在包含块中，会避开浮动和常规流，浮动和绝对定位的盒子自动变为块盒； 
包含行盒的块盒，可使用text-align调整行盒在它内容的对齐方式； 
行盒之间的对齐可以使用vertical-align调整。