text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
作用是使元素居中；作用在行内元素上；能让块级元素里的行内元素水平居中，并且行内元素里的文本也可以居中。
IE 盒模型和W3C盒模型有什么区别?
- IE盒模型的宽高：包含了border,padding,content的值。
- W3C盒模型的宽高：content的值。
*{ box-sizing: border-box;}的作用是什么？
设置为IE盒模型，IE盒模型的宽高包含了border,padding,content的值。使用该属性，设置盒模型的宽高时，不用去考虑内部的计算，因为设置border，padding也不会增加该盒模型的宽高。
line-height: 2和line-height: 200%有什么区别?
- line-height: 2：设置行高为元素本身字体大小的两倍，无论字体大小，后代都会继承两倍行高这个关系
- line-height: 200%：设置行高为其父元素字体大小的两倍，后代只会继承固定的行高，不会继承两倍的行高。
inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
- 具有内联和块级元素的特性：不会占据一整行；可以设置宽高，margin,padding。
- (1)标签不换行
(2)设置父元素字体大小为0，然后单独设置字体大小 - vertical-align: top;
CSS sprite 是什么?
CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。 其优点在于：
- 减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
- 减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
- 减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
- 更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。
其缺点在于：
- 图片合成比较麻烦；
- 背景设置时，需要得到每一个背景单元的精确位置；
- 维护合成图片时，最好只是往下加图片，而不要更改已有图片。
让一个元素"看不见"有几种方式？有什么区别?
- opacity: 0; 改变元素的透明度，使其无法被看见，但仍会影响布局，并且元素本身可以与用户交互。
- visibility: hidden; 改变元素的可见性，使其无法被看见，但仍会影响布局，元素本身不可以与用户交互。
- display: none; 隐藏元素，被隐藏的元素不会占据任何空间，但仍可通过DOM来操作。
另外设置background-color: rgba(a,b,c,0) 可以修改背景色的透明度。
网友评论