CSS常见样式2

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

作用：使行内元素实现水平居中。（这里面的行内元素包括文本，行内元素，设置display：inline-block的块级元素）
该属性可以被继承。因此要使想要的行内元素实现居中，可以在父元素或者更远的祖先元素上加上text-align: center;

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

IE盒模型的height, width为 content 的 length, width + padding 的 length, width + border 的 length, width。
W3C盒模型height, width只是 content 的 length, width。不包括 padding border 和margin。

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

这是CSS3的属性，在声明html5的情况下，浏览器以IE盒模型计算width 和 height。

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

• line-height 定义了 行内元素 （display: inline）顶部和底部的空间，并且顶部和底部的空间相同。利用这个特点，可以为单行文字设置垂直居中。
• line-height 的值可以为 normal, 数字, 带单位的长度（单位可以是 px, em, rem 等）或者百分比。推荐使用的值是数字， 也被称作是 ‘无单位’ 的line－height。原因是百分比或者带单位的长度的line-height这个属性会被子元素继承，而会影响整个页面的整体。无单位的line-height只和元素本身的字体大小有关。
  举例来说：
  我们有这样一个CSS：

    body {
        font-size: 16px;
        line-height: ？;
    }
    h1 { font-size: 32px; ｝
    p { font-size: 16px; }
    .footer {font-size: 12px; }

元素	font-size	用 px 单位的line-height	实际得到的 line height
body	16px	30px	30px
h1	32px	继承得到的30px	30px
p	16px	继承得到的30px	30px
footer	12px	继承得到的30px	30px

元素	font-size	用 % 单位的line-height	实际得到的 line height
body	16px	200%	16px*200% = 32px
h1	32px	继承得到的32px	32px
p	16px	继承得到的32px	32px
footer	12px	继承得到的32px	32px

这样做的问题是h1和footer的行间距一个太窄一个又太宽，不是和他们各自的字体大小成比例。
如果我们用无单位的line-height 结果将是：

元素	font-size	用无单位的line-height	实际得到的 line height
body	16px	2	16px*2 = 32px
h1	32px	2	64px
p	16px	2	32px
footer	12px	2	24px

这样行间距是各元素各自的比例，得到的结果会更美观。

• 一个行的高度是由行里面的所有的 inline boxes 中最高的box决定的。是line-height而不是字体的大小决定inline box的高度。

参考资料： http://thenextweb.com/dd/2012/10/14/refine-your-web-type-with-this-crash-course-on-the-css-line-height-property/#gref

inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?

• inline-block与 inline 元素相似，不占据一整行。不同点在于inline-block可以像block一样设置 width 和 length。margin 和 padding 的上下设置也会有效果。
• 去除缝隙的几种方式
• 改写成

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

或

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

• html5中标签不关闭

<ul>
<li>one
<li>two
<li>three
</ul>

• 也可以将 inline-block元素的父元素设置font-size:0;然后在给inline-block元素重新设置一个font-size。
• 达到顶端对齐，可以给inline-block元素添加vertical-align:top;

CSS sprite 是什么?

CSS Sprite (CSS 雪碧图) 是将单一的小图合成的一张大图。这样浏览器只需一次请求就可以得到所有图片。设置background-position来显示出不同的小图。这样可以减少向服务器的请求数量，提高加载速度。

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

• opacity:0 设置元素透明度为0，虽然看不见，但仍占据空间
• vidibility:hidden 隐藏元素，与 opacity:0相似，仍占据空间
• display:none 元素从dom中消失，相当于元素被删除，不会有元素的位置