CSS常见样式2

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) 只是背景色透明