1、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center可以设置元素中的文本和行内元素水平居中，作用在block和inline-block的元素上，可以让他们中的行内元素居中。
image.png
2、IE 盒模型和W3C盒模型有什么区别?
IE盒模型的宽度和高度是指（content+padding+border）的宽度和高度。
W3C盒模型的宽度和高度指的是content的宽度和高度。
3、*{ box-sizing: border-box;}的作用是什么
box-sizing是CSS3的新样式。设置一个元素为 box-sizing: border-box;时，此元素的内边距和边框不再会增加它的宽度。也就相当于IE盒模型。
4、line-height: 2和line-height: 200%有什么区别?
line-height:2 是指行高是盒子模型里的content的两倍行高，能适应字体大小的改变，即行高与字体大小是对应的。
line-height:200%是指行高是父元素的行高的两倍，行高是固定的值，如果字体过大，则会出现重叠现象。
5、inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
- 既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)，又呈现 block 特性 (可设置宽高，内外边距)
-
元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以利用HTML的注释来换行提高代码的可读性。
image.png
可以使用font-size:0；的方法（即将标签段之间的空格大小为零，当然还要设置inline-block元素的字体），考虑到chrome的兼容性，还需添加代码-webkit-text-size-adjust:none;
- 高度不一样的inline-block元素的顶端对齐vertical-align:top;
6、CSS sprite 是什么?
指将不同的图片/图标合并在一张图上。
使用CSS Sprite 可以减少网络请求，提高网页加载性能。
7、让一个元素"看不见"有几种方式？有什么区别?
opacity: 0 ; 透明度为0，整体
visibility: hidden ; 和opacity:0 类似
display:none; 消失，不占用位置
background-color: rgba(0，0，0，0.2) 只是背景色透明
网友评论