常见居中方式与盒模型笔记

块级元素水平、垂直居中的方法

1. 利用绝对定位实现元素垂直，水平居中显示（需要知道元素的宽度和高度）
2. 利用margin: 0 auto实现块级元素水平居中
3. 根据margin: auto 实现居中
4. 利用text-align: center;实现块级元素内部的行内元素水平居中
5. 利用vertical-align: middle; 实现垂直居中
6. 根据display: table-cell 和 vertical-align: middle
7. 根据CSS3属性display: box

雪碧图

CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

优点: 图片变成一张肯定所占位置更少，减少加载时间，增强用户体验；作为设计师来说不用对各种小图标命名，减少工作量，再一个就是对风格的更改整体操作来说更为简便。

缺点：背景大小，容易出现断裂，相比之下不是直接替换照片，而是利用PS来测量好每一个的位置，环节繁琐一些，当然更改部分元素的同时需要动整体，也比较麻烦一些。

行盒

什么是行盒：display属性为inline的元素。
常见行盒：文字元素：span、abbr、em、i、strong、b

行盒显著特征：

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

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

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

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

行盒的尺寸：

1. 与块盒完全一致；

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

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

行盒的位置：

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