css面试题

2018-10-17 本文已影响0人梦里coding

1、元素定位有哪些？

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

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

link
import
使用方式：

<link href="index.css" rel="stylesheet">

 //import
 <style type="text/css">
 @import "index.css";
 </style>

区别：

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;

示例：

<style type="text/css">
    .main{
        position: relative;
        margin: 0 auto;
        height:45px;
        width: 300px;
        background-color:lightgray;
        transition:background-color .6s ease-in 0s;
    }
    .main:hover{
        background-color: dimgray;
    }
</style>
<div class="main"></div>

7.2D转换效果

主要有：

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

<style type="text/css">
    .main{
        position: relative;
        top:200px;
        margin: 0 auto;
        height:45px;
        width: 300px;
        background-color:dimgray;
        transition:transform .6s ease 0s;
        transform: rotate(0deg);
    }
    .main:hover{
        transform: rotate(180deg);
    }
</style>
 <div class="main"></div>

8.Animation动画特效

<style type="text/css">
    .main{
        position: absolute;
        left: 10px;
        top:200px;
        height:45px;
        width: 300px;
        background-color:cadetblue;
    }
    .main:hover{
        animation: animations 2s ease 0s;
    }
    @keyframes animations {
        0%{
            left: 10px;
            opacity: 1;
        }
        50%,70%{
            left: 50%;
            opacity: .7;
            margin-left:-150px;
        }
        100%{
            left: 100%;
            opacity: 0;
            margin-left:-300px;
        }
    }
</style>
 <div class="main"></div>