1.兼容性
| 前綴 | 瀏覽器 |
|---|---|
| -webkit | Chrome和Safairi |
| -moz | firefox |
| -ms | IE |
| -o | opera |
2.邊框
- 圓角效果
border-radius:左上角 右上角 右下角 左下角
實(shí)心上半圓：把高度(height)設(shè)為寬度（width）的一半，并且只設(shè)置左上角和右上角的半徑與元素的高度一致
實(shí)心圓：把寬度（width）與高度(height)值設(shè)置為一致（也就是正方形）井辆，并且四個(gè)圓角值都設(shè)置為它們值的一半孕惜。
- 陰影
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴(kuò)展半徑] [陰影顏色] [投影方式];
- border-image
3.顏色
- RGBA
rgba(R,G,B,A)
- 漸變色彩
第一個(gè)參數(shù):指定漸變方向，可以用“角度”的關(guān)鍵詞或“英文”來表示
4.文字與字體
-
text-overflow
text-overflow用來設(shè)置是否使用一個(gè)省略標(biāo)記（...）標(biāo)示對象內(nèi)文本的溢出酌壕。
但是text-overflow只是用來說明文字溢出時(shí)用什么方式顯示掏愁，要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號的效果，
還須定義強(qiáng)制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden）卵牍，只有這樣才能實(shí)現(xiàn)溢出文本顯示省略號的效果果港，
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
word-wrap也可以用來設(shè)置文本行為，當(dāng)前行超過指定容器的邊界時(shí)是否斷開轉(zhuǎn)行糊昙。
- 嵌入字體
@font-face能夠加載服務(wù)器端的字體文件辛掠，讓瀏覽器端可以顯示用戶電腦里沒有安裝的字體。
@font-face {
font-family : 字體名稱;
src : 字體文件在服務(wù)器上的相對或絕對路徑;
}
- 文本陰影
text-shadow: X-Offset Y-Offset blur color;
X-Offset：表示陰影的水平偏移距離释牺，其值為正值時(shí)陰影向右偏移萝衩，反之向左偏移；
Y-Offset：是指陰影的垂直偏移距離没咙，如果其值是正值時(shí)猩谊，陰影向下偏移，反之向上偏移祭刚；
Blur：是指陰影的模糊程度预柒，其值不能是負(fù)值队塘，如果值越大，陰影越模糊宜鸯，反之陰影越清晰憔古，如果不需要陰影模糊可以將Blur值設(shè)置為0；
Color：是指陰影的顏色淋袖，其可以使用rgba色鸿市。
5.與背景有關(guān)樣式
- background-origin 設(shè)置元素背景圖片的原始起始位置
background-origin ： border-box | padding-box | content-box;
//表示背景圖片是從邊框，還是內(nèi)邊距（默認(rèn)值）即碗，或者是內(nèi)容區(qū)域開
始顯示
*背景圖片必須為no-repeat*
- background-clip 將背景圖片做適當(dāng)?shù)牟眉粢赃m應(yīng)實(shí)際需要
background-clip ： border-box | padding-box | content-box | no-clip
//參數(shù)分別表示從邊框焰情、或內(nèi)填充，或者內(nèi)容區(qū)域向外裁剪背景剥懒。no-clip表示不裁切内舟，和參數(shù)border-box顯示同樣的效果。backgroud-clip默認(rèn)值為border-box
- background-size 設(shè)置背景圖片的大小初橘，以長度值或百分比顯示验游，還可以通過cover和contain來對圖片進(jìn)行伸縮
background-size: auto | <長度值> | <百分比> | cover | contain
1、auto：默認(rèn)值保檐，不改變背景圖片的原始高度和寬度耕蝉；
2、<長度值>：成對出現(xiàn)如200px 50px夜只，將背景圖片寬高依次設(shè)置為前面兩個(gè)值垒在，當(dāng)設(shè)置一個(gè)值時(shí)，將其作為圖片寬度值來等比縮放扔亥；
3场躯、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設(shè)置為所在元素寬高乘以前面百分比得出的數(shù)值旅挤，當(dāng)設(shè)置一個(gè)值時(shí)同上踢关；
4、cover：顧名思義為覆蓋骂倘，即將背景圖片等比縮放以填滿整個(gè)容器辽狈；
5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止缔俄。
- multiple backgrounds 多重背景
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
6.屬性選擇器
-
屬性選擇器
<a href="xxx.pdf">我鏈接的是PDF文件</a>
<a href="#" class="icon">我類名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>
a[class^=icon]{
background: green;
color:#fff;
}
a[href$=pdf]{
background: orange;
color: #fff;
}
a[title*=more]{
background: blue;
color: #fff;
}
- 偽類選擇器
:root選擇器,匹配元素E所在文檔的根元素。在HTML文檔中紧卒，根元素始終是<html>
:not選擇器稱為否定選擇器,可以選擇除某個(gè)元素之外的所有元素
:empty選擇器表示的就是空蔬啡。用來選擇沒有任何內(nèi)容的元素，這里沒有內(nèi)容指的是一點(diǎn)內(nèi)容都沒有诵肛，哪怕是一個(gè)空格屹培。
:target選擇器稱為目標(biāo)選擇器默穴，用來匹配文檔(頁面)的url的某個(gè)標(biāo)志符的目標(biāo)元素
:first-child”選擇器表示的是選擇父元素的第一個(gè)子元素的元素E
:last-child”選擇器選擇的是元素的最后一個(gè)子元素
:nth-child(n)選擇器用來定位某個(gè)父元素的一個(gè)或多個(gè)特定的子元素
:nth-last-child(n)選擇器用來從某父元素的最后一個(gè)子元素開始計(jì)算，來選擇特定的元素
:first-of-type指定了元素的類型,其主要用來定位一個(gè)父元素下的某個(gè)類型的第一個(gè)子元素褪秀。
:nth-of-type(n)只計(jì)算父元素中指定的某種類型的子元素
:last-of-type選擇是父元素下的某個(gè)類型的最后一個(gè)子元素
:nth-last-of-type(n)選擇父元素中指定的某種子元素類型蓄诽，但它的起始方向是從最后一個(gè)子元素開始
:only-child匹配的元素的父元素中僅有一個(gè)子元素，而且是一個(gè)唯一的子元素
:only-of-type表示一個(gè)元素他有很多個(gè)子元素媒吗，而其中只有一種類型的子元素是唯一的
:enabled選擇器
:disabled選擇器(需要在表單元素的HTML中設(shè)置“disabled”屬性)
:checked選擇器表示的是選中狀態(tài)
::selection選擇器
:read-only用來指定處于只讀狀態(tài)元素的樣式,元素中設(shè)置了“readonly=’readonly’
:read-write主要用來指定當(dāng)元素處于非只讀狀態(tài)時(shí)的樣式
::before和::after這兩個(gè)主要用來給元素的前面或后面插入內(nèi)容仑氛，這兩個(gè)常和"content"配合使用，使用的場景最多的就是清除浮動(dòng)闸英。
7.動(dòng)畫
- 旋轉(zhuǎn)
通過指定的角度參數(shù)使元素相對原點(diǎn)進(jìn)行旋轉(zhuǎn),如果這個(gè)值為正值锯岖，元素相對原點(diǎn)中心順時(shí)針旋轉(zhuǎn)；如果這個(gè)值為負(fù)值甫何，元素相對原點(diǎn)中心逆時(shí)針旋轉(zhuǎn)
transform: rotate(45deg);
- 扭曲
扭曲skew()函數(shù)能夠讓元素傾斜顯示出吹，它可以將一個(gè)對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。
skew(x,y)//使元素在水平和垂直方向同時(shí)扭曲
skewX(x)//僅使元素在水平方向扭曲變形
skewY(y)//僅使元素在垂直方向扭曲變形
- 縮放
縮放 scale()函數(shù) 讓元素根據(jù)中心原點(diǎn)對對象進(jìn)行縮放辙喂。
scale(X,Y)//使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放)
scaleX(x)//元素僅水平方向縮放（X軸縮放）
scaleY(y)//元素僅垂直方向縮放（Y軸縮放）
- 位移
translate()函數(shù)可以將元素向指定的方向移動(dòng)
translate(x,y)//水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)）
translateX(x)//僅水平方向移動(dòng)（X軸移動(dòng)）
translateY(Y)//僅垂直方向移動(dòng)（Y軸移動(dòng)）
- 矩陣
matrix() 是一個(gè)含六個(gè)值的(a,b,c,d,e,f)變換矩陣捶牢，就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素 - 原點(diǎn)
通過transform-origin來對元素進(jìn)行原點(diǎn)位置改變，使元素原點(diǎn)不在元素的中心位置加派，其取值見下圖
- 過渡屬性
就是通過鼠標(biāo)的單擊叫确、獲得焦點(diǎn)，被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)芍锦，并平滑地以動(dòng)畫效果改變CSS的屬性值竹勉。
在CSS中創(chuàng)建簡單的過渡效果可以從以下幾個(gè)步驟來實(shí)現(xiàn)：
第一，在默認(rèn)樣式中聲明元素的初始狀態(tài)樣式娄琉；
第二次乓，聲明過渡元素最終狀態(tài)樣式，比如懸浮狀態(tài)孽水；
第三票腰，在默認(rèn)樣式中通過添加過渡函數(shù)，添加一些不同的樣式女气。
transition-property:指定過渡或動(dòng)態(tài)模擬的CSS屬性,值為width杏慰、height、background等屬性
transition-duration:指定完成過渡所需的時(shí)間
transition-timing-function:指定過渡函數(shù)炼鞠，值為ease/linear/ease-in/ease-out/ease-in-out
transition-delay:指定開始出現(xiàn)的延遲時(shí)間
可以合寫為：
transition: all .5s ease-in 0.2s;
- keyframe 關(guān)鍵幀
在@keyframes中定義動(dòng)畫名稱時(shí)缘滥，其中0%和100%還可以使用關(guān)鍵詞from和to來代表，其中0%對應(yīng)的是from谒主，100%對應(yīng)的是to朝扼。
@keyframes wobble {
0% {
margin-left: 100px;
background:green;
}
40% {
margin-left:150px;
background:orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}
div:hover{
animation: wobble 5s ease .1s;
}
- 調(diào)用動(dòng)畫
animation-name屬性主要是用來調(diào)用 @keyframes 定義好的動(dòng)畫。需要特別注意: animation-name 調(diào)用的動(dòng)畫名需要和“@keyframes”定義的動(dòng)畫名稱完全一致（區(qū)分大小寫）霎肯，如果不一致將不具有任何動(dòng)畫效果擎颖。
animation-name: none | IDENT[,none|DENT]*;
/*
1榛斯、IDENT是由 @keyframes 創(chuàng)建的動(dòng)畫名，上面已經(jīng)講過了（animation-name 調(diào)用的動(dòng)畫名需要和“@keyframes”定義的動(dòng)畫名稱完全一致）搂捧；
2驮俗、none為默認(rèn)值，當(dāng)值為 none 時(shí)允跑，將沒有任何動(dòng)畫效果,這可以用于覆蓋任何動(dòng)畫意述。
*/
- 設(shè)置動(dòng)畫播放時(shí)間
animation-duration主要用來設(shè)置CSS3動(dòng)畫播放時(shí)間，其使用方法和transition-duration類似吮蛹，是用來指定元素播放動(dòng)畫所持續(xù)的時(shí)間長荤崇，也就是完成從0%到100%一次動(dòng)畫所需時(shí)間
animation-duration: <time>[,<time>]*
//取值<time>為數(shù)值，單位為秒潮针，其默認(rèn)值為“0”术荤，這意味著動(dòng)畫周期為“0”，也就是沒有動(dòng)畫效果（如果值為負(fù)值會(huì)被視為“0”）每篷。
- 設(shè)置動(dòng)畫播放方式
animation-timing-function屬性主要用來設(shè)置動(dòng)畫播放方式
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
- 設(shè)置動(dòng)畫開始播放時(shí)間
animation-delay屬性用來定義動(dòng)畫開始播放的時(shí)間瓣戚，用來觸發(fā)動(dòng)畫播放的時(shí)間點(diǎn)
animation-delay:<time>[,<time>]*
- 設(shè)置動(dòng)畫播放此時(shí)
animation-iteration-count屬性主要用來定義動(dòng)畫的播放次數(shù)。
animation-iteration-count: infinite | <number> [, infinite | <number>]*
/*
1焦读、其值通常為整數(shù)子库，但也可以使用帶有小數(shù)的數(shù)字，其默認(rèn)值為1矗晃，這意味著動(dòng)畫將從開始到結(jié)束只播放一次仑嗅。
2、如果取值為infinite张症，動(dòng)畫將會(huì)無限次的播放仓技。
*/
- 設(shè)置動(dòng)畫播放方向
animation-direction屬性主要用來設(shè)置動(dòng)畫播放方向
animation-direction:normal | alternate [, normal | alternate]*
/*
其主要有兩個(gè)值：normal、alternate
1俗他、normal是默認(rèn)值脖捻，如果設(shè)置為normal時(shí)，動(dòng)畫的每次循環(huán)都是向前播放兆衅；
2地沮、另一個(gè)值是alternate，他的作用是羡亩，動(dòng)畫播放在第偶數(shù)次向前播放摩疑，第奇數(shù)次向反方向播放。
*/
- 設(shè)置動(dòng)畫的播放狀態(tài)
animation-play-state屬性主要用來控制元素動(dòng)畫的播放狀態(tài)夕春。
animation-play-state:paused|running;
//paused將正在播放的動(dòng)畫停下來未荒，也可以通過running將暫停的動(dòng)畫重新播放
- 設(shè)置動(dòng)畫時(shí)間外屬性
animation-fill-mode屬性定義在動(dòng)畫開始之前和結(jié)束之后發(fā)生的操作专挪。
| 屬性值 | 效果 |
|---|---|
| none | 默認(rèn)值及志，表示動(dòng)畫將按預(yù)期進(jìn)行和結(jié)束片排，在動(dòng)畫完成其最后一幀時(shí)，動(dòng)畫會(huì)反轉(zhuǎn)到初始幀處 |
| forwards | 表示動(dòng)畫在結(jié)束后繼續(xù)應(yīng)用最后的關(guān)鍵幀的位置 |
| backwards | 會(huì)在向元素應(yīng)用動(dòng)畫樣式時(shí)迅速應(yīng)用動(dòng)畫的初始幀 |
| both | 元素動(dòng)畫同時(shí)具有forwards和backwards效果 |
8.布局
- 多列布局
columns：<column-width> || <column-count>
//定義列寬和列數(shù)
- 列間距
column-gap: normal || <length>
//列間距速侈，normal為默認(rèn)值1em
- 列表邊框
column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
//用來定義列與列之間的邊框?qū)挾嚷使选⑦吙驑邮胶瓦吙蝾伾?| 屬性值 | 屬性值說明 |
|---|---|
| column-rule-width | 類似于border-width屬性，主要用來定義列邊框的寬度倚搬，其默認(rèn)值為“medium”冶共，column-rule-width屬性接受任意浮點(diǎn)數(shù)，但不接收負(fù)值每界。但也像border-width屬性一樣捅僵，可以使用關(guān)鍵詞：medium、thick和thin |
| column-rule-style | 類似于border-style屬性眨层，主要用來定義列邊框樣式庙楚，其默認(rèn)值為“none”。column-rule-style屬性值與border-style屬值相同趴樱，包括none馒闷、hidden、dotted叁征、dashed纳账、solid、double捺疼、groove疏虫、ridge、inset啤呼、outset |
| column-rule-color | 類似于border-color屬性议薪，主要用來定義列邊框顏色，其默認(rèn)值為前景色color的值媳友，使用時(shí)相當(dāng)于border-color斯议。column-rule-color接受所有的顏色。如果不希望顯示顏色醇锚，也可以將其設(shè)置為transparent(透明色) |
- 跨列設(shè)置
column-span: none | all
//不跨任何列和跨所有列
- 盒子模型
box-sizing: content-box | border-box | inherit
| 屬性值 | 屬性值說明 |
|---|---|
| content-box | 元素的寬度和高度（width/height）等于元素邊框?qū)挾龋╞order）加上元素內(nèi)距（padding）加上元素內(nèi)容寬度或高度（content width/ height）哼御，也就是element width/height = border + padding + content width / height |
| border-box | 元素的寬度或高度等于元素內(nèi)容的寬度或高度 |
| inherit | 使元素繼承父元素的盒模型模式 |
9.Media Queries
- 引用媒體
三種
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
//link方法
@importurl(reset.css) screen;
//import方法
@media screen {
選擇器{/*你的樣式代碼寫在這里…*/}
}
//media方法
- 使用方法
@media 媒體類型and （媒體特性）{你的樣式}
最大寬度max-width
最小寬度min-width
not 關(guān)鍵詞
only關(guān)鍵詞
10.其他重要屬性
resize屬性主要是用來改變元素尺寸大小的，其主要目的是增強(qiáng)用戶體驗(yàn)
resize: none | both | horizontal | vertical | inherit
| 屬性值 | 取值說明 |
|---|---|
| none | 用戶不能拖動(dòng)元素修改尺寸大小 |
| both | 用戶可以拖動(dòng)元素焊唬，同時(shí)修改元素的寬度和高度 |
| horizontal | 用戶可以拖動(dòng)元素恋昼，僅可以修改元素的寬度，但不能修改元素的高度 |
| vertical | 用戶可以拖動(dòng)元素赶促，僅可以修改元素的高度液肌，但不能修改元素的寬度 |
| inherit | 繼承父元素的resize屬性值 |
- outline
outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit
