CSS常见样式

text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

1. 可以让文字水平居中
2. 对block元素设置，作用在block元素内的inline/inline-block元素上，能让inline/inline-block元素在父级块元素中居中。

IE 盒模型和W3C盒模型的区别

• IE盒模型：width/height包括border、padding、content的width/height
• W3C盒模型：width/height只包括content的width/height

注意

1. ie678怪异模式（不添加 doctype）使用 ie 盒模型，宽度=边框+padding+内容宽度
2. chrome， ie9+, ie678(添加 doctype) 使用标准盒模型， 宽度= 内容宽度

{ box-sizing: border-box;}的作用

指定使用IE盒模型，通常一个块级元素实际所占宽高度=（margin）+ 边框宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width），如果设置了border-box， 实际所占宽高度=设置的高度 /设置的宽度 + 外边距（margin）

line-height: 2和line-height: 200%有什么区别?

• line-height: 200%是根据父元素的字体大小计算出行高，并且子元素依然沿用这个计算后的行高。
• line-height: 2 则是根据子元素自己字体的大小去乘以2来计算行高。

inline-block

• 特性
  inline-block; 既呈现inline的特性，不占据一整行，宽度由内容宽度决定，有呈现block的特性，可设置宽高，内外边距。
• 去除缝隙

1. 简单一点的方法就是就是改变HTML的结构，标签不换行，比如下面这样

xxxyyy

2. 利用HTML注释

       饥人谷饥人谷饥人谷饥人谷
 

2. 也可以将设置了inline-block元素的父元素设置font-size:0;然后在给设置了inline-block的元素重新设置一个font-size。

• 高度不一样的inline-block元素如何顶端对齐

//把应用 inline-block的元素加上 
{
    display: inline-block; 
    vertical-align: top;
}

CSS sprites

CSS Sprites是一种网页图片的处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。加速的关键，不是减小文件大小，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

让一个元素"看不见"有几种方式？有什么区别?

1. visibility：hidden；
   元素在页面消失后，其占据的空间依旧会保留着，适用于那些元素隐藏后不希望页面布局会发生变化的场景。
2. opacity：0；
   这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。
3. display：none；
   元素在页面山彻底消失，元素本来占据的位置会被其他元素占有，浏览器会重新进行页面渲染
4. background-color：rgba（0，0，0，0.2）；设置背景色透明