css常见样式2

1.text-align:center的作用

text-align属性规定元素中的文本等的水平对齐方式。text-align:center作用在块级元素上，可以使块内元素的文字、图片、和行内元素水平居中，但不能使块级元素居中。text-align是可继承，所以此块级元素的子元素如果是块级元素会继承它的text-align属性，使子块级元素内的文字或图片或内联元素居中，但是子块级元素不会居中。

2.IE盒模型和w3c盒模型

IE盒模型的width=content+padding+border
w3c盒模型的 width=content,
也就是说当给一个元素设定width之后，对于ie盒模型的元素，如果再对其设置padding，border等属性，会在width的基础上减，内容区content的宽度会越变越小。而对于w3c盒模型的元素，如果再对其设置padding，border等属性，它的内容区不会改变，padding、border在width的基础上加，最终元素所占空间越来越大。

3.{box-sizing:border-box;}是什么意思

{box-sizing:border-box;}表示该元素应用IE盒模型，即width=content+padding+border.

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

• inline-block 元素同时兼具行内元素和块级元素的特性，和行内元素一样不占据一行，同时又能主动设置宽高，上下边距。
• 去除缝隙
  1.设置父元素font-size：0，行内元素单独设置字体大小；
  2.删除标签间的空格；
  3.设置display：block，然后让元素浮动。
• 对于高度不一样的inline-block元素，可都对其设置vertical-align: top让其上面对齐。

5.css srpite

css srpite是将网页要用的多个小图标弄到一张大图上面，这样在页面展现时就可以只请求一张大图，不用请求多个小图，减少请求，是优化网页性能的一个方面。

6.让元素“看不见”

1. visibility: hidden 与opacity: 0类似，都是让元素不可见，但是该元素占据的空间仍然占据，就是一种 “它在那，只是你看不到”的感觉。
2. display: none 元素消失，占据的空间释放，好像它“从来就不曾来过” 。

7.line-height：2和line-height：200%有什么区别？

line-height:2和line-height:200%的区别主要体现在继承上；

• line-height：2在继承给子元素时会根据子元素的 font-size 再重新计算一遍行高，以用于子元素。
• 而line-height：200% 则会在父元素时就计算好行高，就以这个值继承给子元素，子元素额font-size不再影响行高；
  eg.