今天我们来学习 1.一个块级元素水平和垂直居中的方法；2.什么是雪碧图，他的缺点与优点；
3.什么是行盒，他的特征，尺寸和位置。
首先如何让一个块级元素水平和垂直居中他有很多种方法，我就一一举例。
1，我们可以用 margin auto 就是外边距自动居中来实现 只需要在需要的地方输入代码就行。
2，我们还可以使用padding边距来隔开 使用 top上 right右 left左 bottom下 但是你得提前知道距离不然不建议使用，
3，当然我们还可以用定位 关于定位就有很多种我就简单说三个吧，我们一般使用定位体系有 相对定位 绝对定位 固定定位 其实我们也只会用两种来让块级元素水平垂直居中； 首先我们要用绝对定位 position:absolute ，他的作用是以boby的X Y 坐标来将一个元素放在一个地方，他的默认坐标为X为0 Y为0 我们可以把相对定位 position:relative 放在需要居中地方的父级然后让绝对定位的起点在父级的X Y坐标0上，然后可以在绝对定位设置位置，这样就可以达到想要的位置让他居中。其实这几种定位也不要乱用，他的作用是可以在一些元素重叠的时候使用。
2，什么是雪碧图，他的优缺点是什么？
1，什么是雪碧图呢？可以叫做图像合拼技术，sprite。就是将一些图片合到一起，然后要用其中一些图片的时候就可以让他分离出来，
2，他的优点：减少图片的字节。
减少网页的http请求，从而大大的提高页面的性能。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
3，他的一些缺点：
1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
2.CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css
3：行盒是什么，他有什么特征，他的尺寸与位置
1，行盒属性为display默认值是inline的元素，其实大部分文字元素和图片与多媒体都是行盒类。他们默认生成都是行盒，还有一些规则，文字必须放在行盒里，否则会自动生成行盒。图片与多媒体也会默认生成行盒，
2，行盒的特征，1，行盒可被折断，因为内容可被折断换行，2，连续的多个行盒水平依次排列 3，空白折叠的规则仅适用于行盒内部与行盒之间，4，可使用水平方向的margin盒padding设置内容之间的距离。
3，行盒的尺寸，他可以分为可替换元素，非可替换元素。第一可替换元素：他可以替换图片与多媒体，对于图片与视频仅设置宽高中一个时，另一个会自动按比例适应。但是如果同时设置宽高的话可以通过object-fit属性设置适应方式，当然还有可以有一些值也可以取，他们分别是，fill:可以无视宽高比例缩放，充满设置的尺寸 contain：保持宽高比例缩放，并且保证不超出内容盒 cover：保持宽高比例缩放，充满设置的尺寸，某些部分会被隐藏 none：不会进行任何缩放。2，非可替换元素，是文字类元素。他在垂直方向上的margin,border,padding不占据布局空间，宽与高会自动数值无效，可以使用line-height来设置一行文字的高度。
4，行盒的位置，1，他与其他行盒水平依次排列，排列方式会受到父元素text-align的影响。
