块级元素对齐方式/雪碧图

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

块级元素是指;宽高可以设置，大多都是从新的一行开始……

水平居中：

一、margin: 0 auto;(这是比较直接的也是最常用的方式，设置元素的外边距上下为零，左右自动）

二、

1. position: absolute;
2.  right: 50%;

(使用相对定位的方法，设置左右的边距为50%，强制居中。这里也可以使用绝对定位position: fixed）

垂直居中：

和水平居中的使用方法一样，

一、margin: auto 0;（上下自动，左右为零）

二、也可以使用定位的方法使其位置为水平居中

 

什么是雪碧图？它的优缺点是什么？

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

通过：background-image：url（……）；来引入图片。

通过：background-position：x值，y值；确定要使用图的位置，

X轴：x轴向左移动是取负值，向右移动取正值

Y轴：y轴向上移动取正值，向下移动取赋值

1.优点

1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因； 
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。 
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。 
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

2.缺点

1、在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂； 
2、至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。 
3、由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。 
4、前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。

什么是行盒？描述它的特征、尺寸和定位。

所谓行盒，即行内元素如;span、i、img、a、abbr……

特点：

• 行内大多为描述性标记

• 和其他元素都在一行

• 高度、宽度以及内边距都是不可控的

• 宽高就是内容的高度，不可以改变

• 行内元素只能行内元素，不能包含块级元素

尺寸：

尺寸为内容的大小，为自动。

定位：

position 使用情况：元素重叠时使用定位 **静态定位** position: static;默认值

• 相对定位：

             position：relative 左右取值

• 绝对定位              

 position：absolute; 左右取值 *会脱离文档流* 从可视窗口的左上角开始 绝对定位元素以包含它离它最近的非静态定位元素的（0,0）点

• 固定定位  

position: fixed; 脱离文档流（可设宽高）