CSS面试题

1、css  hack

FF - #test{background-color:red !important}

IE9 - #test{ background-color:red\9\0}

IE8 - #test{ background-color:red\0}

IE7 - #test{ +background-color:red}

IE6 - #test{ _background-color:red}

2、如何使一个元素居中

非浮动元素可以设置：margin:0 auto

浮动元素设置父子元素同时左浮动，然后父元素相对左移50%，子元素相对右移50%（或者相对左移-50%）：

#parent{

    float:left;

    position:relative;

    left:50%; 

} 

#child{

    float:left;

    position:relative;

    right:50%;

}

3、css盒装模型

每个元素都是一个盒装模型

4、浏览器兼容问题：

①、解决IE6双倍边距问题

对float元素，margin-left/magin-right:5px;在IE6下，会解释成10px；设置display:inline;即可解决

②、文字大小

font-size在不同浏览器占用的空间不同.如font-size:10px;在IE下占高12px，下留空白3px，FF下实际占高13px，上留白1px，下留白3px；给文字设置line-height可解决

③、吞吃现象

IE6下，上下两个div，上面的div设置背景的同时，发现下面的div也有了背景；解决方案：使用zoom:1;

④、多出一只猪

IE6下注释有bug，要使用“<!-[if !IE]>xxx<![endif]->”方式写注释

⑤、img留白

图片附近会有留白；设置display:block;可以解决

5、CSS3新特性

实现了圆角[w3c - border-radius:6px; ff - -moz-border-radius:6px; webkit - -webkit-border-radius:6px;]、阴影、透明背景rgba()以及更多的高级元素选择器

6、行级元素？块级元素？

行级元素：span、a、input、label、select、br、img（设置display:block显示成块级元素）

块级元素：div、h1-h6、p、ul、ol、dl、form、br（设置display:inline显示成块级元素）

行内元素高宽随内容而定，外边距和内边距都只对左右起作用；

P.S display:table-cell能让元素当作表格单元显示，table-cell元素必须在display:table的元素的子元素中出现，对于table-cell元素设置vertical-align:middle实现垂直居中

7、css引入方式？<link>与@import的区别？

css引入方式：①、<link rel="stylesheet" type="text/css" href="xxx">

②、@import引入，在页面中使用必须放在<style>...</style>中或在一个css文件中导入另一个css文件@import url(xxx);

③、在<style>中定义样式

<style type="text/css">

       xxx

</style>

④、使用style属性

<li style="xxx">

<link>与@import的区别：

加载顺序不同，前者在页面加载时也同时加载相应的css文件，后者则等页面全部被加载完成之后再引入样式表

8、CSS选择器优先级？

使用!important可以改变样式优先级为最高，其次是style对象，然后是id>class>tag，另外在统计样式，按照后出现的样式具有高优先级

!import > '<style>对象' > id > class > tag