1、CSS3新特性
1.CSS3的選擇器
1）E:last-child 匹配父元素的最後一個子元素E。
2）E:nth-child(n)匹配父元素的第n個子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒數第n個子元素E。css
4）僞類選擇器：（:link、:hover、:focus）html
2. 圓角 border-radius屬性
.square1{ //半圓 width: 100px; height: 50px; border-radius:50px 50px 0 0; background: red; }
每一個半徑的四個值的順序是：左上角，右上角，右下角，左下角。web
3.陰影（box-shadow、text-shadow）
.class1{ 瀏覽器
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 服務器
} 性能
3. CSS3過渡
Transition 對象變換時的過渡效果字體
- transition-property 對象參與過渡的屬性
- transition-duration 過渡的持續時間
- transition-timing-function 過渡的類型
- transition-delay 延遲過渡的時間
4.CSS3動畫：animation
5.CSS3變換：transform
（1）旋轉：transform:rotate(angle)動畫
（2）平移：transform:translate(X,Y)url
（3）縮放：transform:scale(X,Y)spa
6.@Font-face 特性
font-face 能夠用來加載字體樣式，並且它還可以加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。
@font-face { font-family: BorderWeb; src:url(BORDERW0.eot); }
二、CSS選擇器的匹配規則
.mod-nav h3 span{font-size:16px;}
實際上，CSS選擇器的讀取順序是從右向左的。
緣由：從右向左的匹配規則效率會比從左向右的匹配規則效率高。
先找到全部的span元素，沿着span的父元素查找h3元素，中途找到符合匹配規則的就加入結果集，若是直到根元素html都沒有匹配則再也不遍歷這條路徑；從下一個span開始重複這個過程。
若是是從左向右的順序：
先從.mod-nav開始，遍歷全部子節點，而後各自向子節點遍歷。當遍歷到葉子節點發現不符合規則，須要回溯到上一父節點。
從右到左匹配更優是由於在第一步就篩選掉大量不符合條件的葉子節點；而從左向右的匹配規則的性能都浪費在了失敗的查找上面。
三、用CSS建立一個三角形的原理是什麼？
1.採用的是均分原理
盒子都是一個矩形或正方形，從形狀的中心，向4個角上下左右劃分4個部分
2.代碼的實現
第一步 保證元素是塊級元素
第二步 設置元素的邊框
第三步 不須要顯示的邊框使用透明色 transparent屬性
.square1{ width:0; height:0; margin:0 auto; border:6px solid transparent; border-top: 6px solid red; border-bottom: 6px solid blue; }
效果圖
四、用CSS實現一個扇形
原理:底部用一個純色圓形,裏面2個相同顏色的半圓（在相同位置）,內部半圓按必定角度變化,就能夠產生扇形效果
.shanxing{ position: relative; width: 200px; height: 200px; border-radius: 100px; background: yellow; }
.s1{ position: absolute; width: 200px; height: 200px; border-radius:100px ; background: red; clip: rect(0px 100px 200px 0px); /*clip屬性裁剪絕對定位元素*/ } .s2{ position: absolute; width: 200px; height: 200px; border-radius:100px ; background:red; clip: rect(0px 100px 200px 0px); } .sx1 .s1{ transform: rotate(-60deg); } .sx1 .s2{ transform: rotate(0deg); } <div class="shanxing sx1"> <div class='s1'></div> <div class='s2'></div> </div>
clip屬性：用於裁剪絕對定位元素
這個屬性用於定義一個裁剪矩形。對於一個絕對定位元素，在這個矩形內的內容可見，出了這個裁剪區域的內容不可見。裁剪區域可能比元素的內容大，也可能比內容小。
transform:rotate(0deg) 角度順時針旋轉
注意：若是以上不用clip屬性，而直接將內部的兩個div設置成左半圓，那麼旋轉時圓心不對，不是整個圓的圓心。
（2）繪製一個60度扇形
經過將兩個div的顏色設置爲白色
.shanxing{ position: relative; width: 200px; height: 200px; border-radius: 100px; background: yellow; } .s1{ position: absolute; width: 200px; height: 200px; border-radius:100px; background: #ffffff; clip: rect(0px 100px 200px 0px); } .s2{ position: absolute; width: 200px; height: 200px; border-radius:100px; background:#ffffff; clip: rect(0px 100px 200px 0px); } .sx1 .s1{ transform: rotate(-60deg); } .sx1 .s2{ transform: rotate(-180deg); }
五、CSS選擇器優先級
內聯樣式 > 內嵌樣式 > 外部樣式
內聯樣式：直接寫在標籤裏，內嵌樣式：<style></style>
優先級：
一、在屬性後面使用！important會覆蓋頁面內任何位置定義的元素。
二、做爲style屬性寫在元素內的樣式（內聯樣式） 權重：1000
三、id選擇器 權重：0100
四、類選擇器、僞類選擇器、屬性選擇器 ，如.con，:hover，[attribute] 權重：0010
五、元素選擇器、僞元素選擇器 如div、p 權重：0001
六、通配符選擇器
七、瀏覽器自定義或繼承
CSS選擇器一共分爲4個等級：內聯樣式>id選擇器>類選擇器>元素選擇器
注意：通用選擇器（*）、子選擇器（>）和相鄰同胞選擇器（+）並不在這四個等級中，因此他們的權重爲0。
選擇器就是你想去應用樣式的時候去幫你選擇元素。
ID選擇器（#id）、
標籤選擇器（div,h1,p,ul）、
子選擇器（ul < li）、
class選擇器（.classname）、
僞類選擇器（a:hover,li:nth-child）、
屬性選擇器 [type="text"]
後代選擇器（ul li a）、
僞元素選擇器 ::first-line
組選擇器、
包含選擇器等
比較規則：
在權重相同的狀況下，後面的樣式會覆蓋前面的樣式。
！important ( 誰有特權，誰說了算。)
做用是提升優先級，加了這句的樣式優先級最高
<style>
p{
color:red !important;
}
</style>
<p style="color:blue;">我顯示紅色</p>
能夠超過id選擇器的幾種方式：
（1）！important
（2）內聯樣式
（3）經過疊加覆蓋，即增長權重值
.con1 p#text{ color:red; } //總權重是：10(.con1)+1(p)+100(#text)=111 #text{ color: green; } //總權重是100(#text) <div class='con1'> <p id='text'>文字</p> </div> //因此p標籤最終的字體顏色是紅色
六、CSS中禁用元素的點擊事件：pointer-events屬性
.con{
pointer-events: none;
}
七、CSS實現單行/多行文本溢出操做
//單行文本溢出
<style> #con{ width: 220px; height: 40px; border: solid 1px #333333; } #con p{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> <div id='con'> <p> 這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本</p> </div>
overflow:hidden 普通用法：用在塊級元素的外層隱藏內部溢出元素
特殊用法：配合text-overflow:ellipsis;white-space:nowrap;實現隱藏自身的溢出並設置（...）的效果
white-space:nowrap;的做用是讓文本不換行。
text-overflow:clip | ellipsis | string;
- clip：修剪文本；
- ellipsis：顯示省略號來表明被修剪的文本；
- string：使用給定的字符串來表明被修剪的文本。
//多行文本溢出
須要使用webkit的css擴展屬性，該方法適用於webkit瀏覽器以及移動端；
#con1 p{ display: -webkit-box; //必須結合的屬性，將對象做爲彈性伸縮盒子模型的顯示 -webkit-box-orient: vertical; //設置伸縮盒子對象的子元素的排列方式 -webkit-line-clamp: 3; //用來限制顯示的文本行數 overflow: hidden; }
八、css實現折行
通常狀況下只要定好文字所在容器的寬度，文字就會折行，如
可是含有很長英文的狀況下，文字是不會折行的。
設置折行：
white-space: normal; word-wrap:break-word; word-break: break-all;
九、::before 和:before有什麼區別？
- 相同點
- 均可以用來表示僞元素，用來設置對象前的內容
- :befor和::before寫法是等效的
- 不一樣點
- :before是CSS2的寫法，::before是CSS3的寫法
- :before的兼容性要比::before好 ，不過在H5開發中建議使用::before比較好 單冒號能夠兼容IE瀏覽器。
一個冒號和兩個冒號的區別：
單冒號用於CSS3僞類，雙冒號用於CSS3僞元素。
十、line-height屬性值爲1.5和150%的區別
都是根據該元素的字體大小來計算的，區別體如今子元素繼承上。
- 父元素設置line-height:1.5會直接繼承給子元素，子元素再根據本身的font-size去計算本身的line-height
- 父元素設置line-height:150%是計算好了line-height值，而後把這個值給子元素繼承，子元素繼承拿到的就是最終的值了，與子元素的font-size無關了。
十一、僞類和僞元素
僞類是爲了經過選擇器，格式化DOM樹之外的信息以及不能被常規CSS選擇器獲取到的信息。
僞類的功能有兩種：
（1）格式化DOM樹之外的信息，好比<a>標籤的:link、:visited等，這些信息不存在於DOM樹中。
（2）不能被常規CSS選擇器獲取到的信息，不如要獲取第一個子元素，咱們沒法經過常規的css選擇器獲取到，可是能夠經過:first-child來獲取。
僞類實際上是爲了彌補css選擇器的不足，用來更方便的獲取信息。
僞元素
僞元素能夠建立一些文檔語言沒法建立的虛擬元素。好比文檔語言沒有一種機制能夠描述元素內容的第一個字母或第一行，可是僞元素能夠作到（::first-letter、:first-line），同時僞元素還能夠建立源文檔中不存在的內容，好比::before、after。