css面试题

1、元素定位有哪些？

position是在css中用的比较多的定位方法，其中定位方式包括4种，分别是：fixed、absolute、relative、static。

2、css样式导入的方式以及区别？

link
import
使用方式：



 //import

区别：

link除了能引用样式外，还可以引用图片等资源文件，import只可以引用样式文件
兼容性：link不存在兼容性问题，import在IE5以上支持
在样式表文件中，import可以引用其他样式表，而link不行
link是与页面载入时同时加载，@import是在页面加载完后进行加载
link支持js去控制样式更改，@import不支持
推荐使用 @import url（imdex.css）

3、css样式的优先级？

优先级：!important > style > id > class > 标签
权重规则：

标签的权重为1
class的权重为10
id的权重为100
权重举例：

    /*权重为1*/
    div{
    }
    /*权重为10*/
    .class1{
    }
    /*权重为100*/
    #id1{
    }
    /*权重为100+1=101*/
    #id1 div{
    }
    /*权重为10+1=11*/
    .class1 div{
    }
    /*权重为10+10+1=21*/
    .class1 .class2 div{
    }

4、css3的新特性？

1.CSS3的选择器

1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n)匹配父元素的第n个子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
4）E:last-of-type 匹配父元素的最后一个元素E。
5）E:nth-of-type(n)匹配父元素的第n个子元素E。
6）E:nth-last-of-type(n) CSS3 匹配父元素的倒数第n个子元素E。

2.@Font-face 特性

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face { 
 font-family: BorderWeb; 
 src:url(BORDERW0.eot); 
 } 
 @font-face { 
 font-family: Runic; 
 src:url(RUNICMT0.eot); 
 } 
 .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
 .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

3.圆角

border-radius: 15px

4.阴影

     .class1{ 
          text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 
     }

5.渐变

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
这里 linear 表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色（#FE280E）的渐变。效果图如下：

image.png

6.盒子模型

dispaly:flex

6.过渡

Transition 对象变换时的过渡效果

transition-property 对象参与过渡的属性
transition-duration 过渡的持续时间
transition-timing-function 过渡的类型
transition-delay 延迟过渡的时间
缩写方式
transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s
拆分方式

transition-property:border-color, background-color, color;
transition-duration:.5s, .5s, .5s;
transition-timing-function:ease-in, ease-in, ease-in;
transition-delay:.1s, .1s, .1s;

示例：

7.2D转换效果

主要有：

translate（水平移动）
rotate（旋转）
scale（伸缩）
skew（倾斜）