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.让元素“看不见”
-
visibility: hidden
与opacity: 0
类似,都是让元素不可见,但是该元素占据的空间仍然占据,就是一种 “它在那,只是你看不到”的感觉。 -
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.
<div style="line-height:2;font-size:16px">
<p style="font-size:20px"></p> <!--此时p的行高是20*2=40px -->
</div>
<div style="line-height:200%;font-size:16px">
<p style="font-size:20px"></p> <!--此时p的行高是16*200%=32px -->
</div>