1、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？
text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。center就是使行内元素水平居中，作用在块级元素上，可以让文本、图片以及其他行内元素在其父元素中水平居中。
2、IE 盒模型和W3C盒模型有什么区别?
W3C盒模型的width和height不包含padding、border，IE盒模型width包括content尺寸+padding+border
3、*{ box-sizing: border-box;}的作用是什么？
box-sizing 属性可以被用来调整这些表现:
a)content-box是默认值，标准盒子模型。 width与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
b)border-box width和height属性包括内容，内边距和边框，但不包括外边距。
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。
4、line-height: 2和line-height: 200%有什么区别?
line-height:2;行高是2倍的文字大小，均以相应的字体为基准。
line-htight:200%;行高是2倍的文字大小，文字大小是指父元素中设定的字体大小。
line-height后面的数值可以带单位也可以不带单位，但是推荐使用不带单位的，这样在继承时不会出现异常。
5、inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
a)特性：inline-block既包含了块级元素的特性，又包含了行内元素的特性，所以我们可以使得多个元素共同占据一行，可以设置宽度和高度，可以设置外边距和内边距。
b)去除缝隙bug：可以将其父元素的字体大小设置为0，然后重新对本元素的字体大小进行设置，中间的空格大小变为0，消除间隙；可以去除代码中的空格和换行，让元素紧贴在一起可以消除空格（或者注释掉空格）。
c)让其顶端对齐的方法可以设置属性vertiacl-align：top属性来设置。
6、CSS sprite 是什么?
CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。
优点：
1.减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2.减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
缺点：
1.图片合成比较麻烦；
2.背景设置时，需要得到每一个背景单元的精确位置；
3.维护合成图片时，最好只是往下加图片，而不要更改已有图片。
7、让一个元素"看不见"有几种方式？有什么区别?
opacity:0 透明度为0，占位置，可点击
visibility:hidden 占位置，不可点击
display:none;消失，不占用位置
background-color:rgba(0,0,0,0.0)只是背景色透明度改变
网友评论