css样式

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

• text-align作用在块级元素上，可以使块内元素的文字、图片、和行内元素水平居中。但不能使块级元素居中,即text-align属性只能针对文本文字和img标签，对其他标签无效。

• text-align是可继承元素，所以此块级元素的子元素如果是块级元素会继承它的text-align属性，使子块级元素内的文字或图片或内联元素居中，但是子块级元素不会居中。

IE 盒模型和W3C盒模型有什么区别?

image.png

• 标准盒子模型的宽度和高度是指content的宽度和高度

  
  image.png
• IE盒模型的宽度和高度是指border的宽度和高度

{ box-sizing: border-box;}的作用是什么？

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

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

line-height:2 是指行高是盒子模型里的content的两倍行高
line-height:200%是指行高是父元素的行高的两倍

inline-block有什么特性？

• 既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
• 又呈现 block 特性 (可设置宽高，内外边距)

如何去除缝隙?

有好几种方法可以去除缝隙,下面简单的来说几种:
1.元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就没有了。

   <span class="box b1">hello</span><span class="box b2">hello</span><span class="box b3">hello</span><span class="box b4">hello</span>

2.使用font-size:0
先用div把它包裹起来

<div class="wrap">
  <span class="box b1">hello</span>
  <span class="box b2">hello</span>
</div>

然后

.wrap {
font-size: 0;
}
.space a {
font-size: 12px;
}

3.使用margin的负值:

.box{
  width: 100px;
  display: inline-block;
  border: 1px solid red;
  font-size: 14px;
  margin: -2px;
}

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

• 把应用 inline-block的元素加上 vertical-align: top;

CSS sprite 是什么?

• CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

• 利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因。

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

opacity: 0 ; 透明度为0，整体
visibility: hidden ; 和opacity:0 类似
display:none; 消失，不占用位置
background-color: rgba(0，0，0，0.2) 只是背景色透明