1、元素定位有哪些？

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

2、css樣式導(dǎo)入的方式以及區(qū)別？

• link
• import
  使用方式：

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

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

區(qū)別：

• link除了能引用樣式外，還可以引用圖片等資源文件，import只可以引用樣式文件
• 兼容性：link不存在兼容性問題，import在IE5以上支持
• 在樣式表文件中，import可以引用其他樣式表，而link不行
• link是與頁面載入時(shí)同時(shí)加載，@import是在頁面加載完后進(jìn)行加載
• link支持js去控制樣式更改，@import不支持
  推薦使用 @import url（imdex.css）

3、css樣式的優(yōu)先級(jí)？

優(yōu)先級(jí)：!important > style > id > class > 標(biāo)簽
權(quán)重規(guī)則：

• 標(biāo)簽的權(quán)重為1
• class的權(quán)重為10
• id的權(quán)重為100
  權(quán)重舉例：

    /*權(quán)重為1*/
    div{
    }
    /*權(quán)重為10*/
    .class1{
    }
    /*權(quán)重為100*/
    #id1{
    }
    /*權(quán)重為100+1=101*/
    #id1 div{
    }
    /*權(quán)重為10+1=11*/
    .class1 div{
    }
    /*權(quán)重為10+10+1=21*/
    .class1 .class2 div{
    } 

4、css3的新特性？

1.CSS3的選擇器

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

2.@Font-face 特性

Font-face 可以用來加載字體樣式，而且它還能夠加載服務(wù)器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。

@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 表示線性漸變，從左到右，由藍(lán)色（#2A8BBE）到紅色（#FE280E）的漸變。效果圖如下：

image.png

6.盒子模型

dispaly:flex

6.過渡

1. Transition 對(duì)象變換時(shí)的過渡效果

   transition-property 對(duì)象參與過渡的屬性
   transition-duration 過渡的持續(xù)時(shí)間
   transition-timing-function 過渡的類型
   transition-delay 延遲過渡的時(shí)間
   縮寫方式
   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轉(zhuǎn)換效果

主要有：

• translate（水平移動(dòng)）
• rotate（旋轉(zhuǎn)）
• 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動(dòng)畫特效

<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>