css3中的部分屬性
來源：程序員人生 發布時間：2016-06-23 08:15:28 閱讀次數：5983次
1、陰影box-shadow:x軸偏移量 y軸偏移量 [陰影模糊半徑] [陰影擴大半徑] [陰影色彩] [投影方式]
注意：inset（內陰影） 可以寫在參數的第1個或最后1個，其它位置是無效的實例
正值表示在對象的底部，負值表示在對象的頂部。
.boxshadow-outset{
width:100px;
height:100px;
box-shadow:4px 4px 6px blue,4px 4px 6px red inset;
}
.boxshadow-inset{
width:100px;
height:100px;
box-shadow:4px 4px 6px #666 inset;
}
111、陰影模糊半徑與陰影擴大半徑的區分
陰影模糊半徑：此參數可選，其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊沿就越模糊；
陰影擴大半徑：此參數可選，其值可以是正負值，如果值為正，則全部陰影都延展擴大，反之值為負值時，則縮小；
222、X軸偏移量和Y軸偏移量值可以設置為負數
2、為邊框利用圖片 border-image
顧名思義就是為邊框利用背景圖片，它和我們經常使用的background屬性比較相似
background:url(xx.jpg) 10px 20px no-repeat;
另有屬性round、stretch。
用法：border-image:url(borderimg.png) 70 stretch
3、色彩之RGBA：在RGB的基礎上增加了控制alpha透明度的參數
語法color：rgba(R,G,B,A)
4、漸變色采
CSS3 Gradient 分為線性漸變(linear)和徑向漸變(radial)
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
5、text-overflow 與 word-wrap
text-overflow用來設置是不是使用1個省略標記（...）標示對象內文本的溢出 屬性clip（表示剪切）和ellipsis（表示顯示省略標記）
但是text-overflow只是用來講明文字溢出時用甚么方式顯示，要實現溢出時 產生省略號的效果，還須定義強迫文本在1行內顯示（white-space:nowrap） 及溢出內容為隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省 略號的效果，代碼以下：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
同時，word-wrap也能夠用來設置文本行動，當前行超過指定容器的邊界時是不是斷開轉行。屬性：normal（表示控制連續文本換行）和break-word（表示內容將在邊界內換行）
6、嵌入字體@font-face
@font-face能夠加載
服務器真個字體文件，讓閱讀器端可以顯示用戶電腦里沒有安裝的字體。@font-face {
font-family : 字體名稱;
src : 字體文件在
服務器上的相對或絕對路徑;}
7、文本陰影text-shadow可以設置文本的陰影效果
text-shadow: X-Offset Y-Offset（陰影的垂直偏移距離） blur（模糊程度） color（陰影的色彩）;
8、background-origin設置元素背景圖片的原始起始位置。
background-origin ： border-box | padding-box | content-box;
參數分別表示背景圖片是從邊框，還是內邊距（默許值），或是內容區域開 始顯示。需要注意的是，如果背景不是no-repeat，這個屬性無效，它會從邊框開始顯示。
9、background-clip用來將背景圖片做適當的裁剪以適應實際需要。
background-clip ： border-box | padding-box | content-box | no-clip
參數分別表示從邊框、或內填充，或內容區域向外裁剪背景。no-clip表示不裁切，和參數border-box顯示一樣的效果。backgroud-clip默許值為border-box。
10、background-size設置背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。
background-size: auto | <長度值> | <百分比> | cover | contain
1、auto：默許值，不改變背景圖片的原始高度和寬度；
2、<長度值>：成對出現如200px 50px，將背景圖片寬高順次設置為前面兩個值，當設置1個值時，將其作為圖片寬度值來等比縮放；
3、<百分比>：0％~100％之間的任何值，將背景圖片寬高順次設置為所在元素寬高乘之前面百分比得出的數值，當設置1個值時同上；
4、cover：顧名思義為覆蓋，行將背景圖片等比縮放以填滿全部容器；
5、contain：容納，行將背景圖片等比縮放至某1邊緊貼容器邊沿為止。
11、multiple backgrounds
多重背景，也就是CSS2里background的屬性外加origin、clip和size組成的新background的屢次疊加，縮寫時為用逗號隔開的每組值；用分解寫法時，如果有多個背景圖片，而其他屬性只有1個（例如background-repeat只有1個），表明所有背景圖片利用該屬性值。
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
12、屬性選擇器
<a href="xxx.pdf">我鏈接的是PDF文件</a>
<a href="#" class="icon">我類名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>
css代碼
a[class^=icon]{
background: green;
color:#fff;
}
a[href$=pdf]{
background: orange;
color: #fff;
}
a[title*=more]{
background: blue;
color: #fff;
}
13、結構性偽類選擇器--root：:root選擇器，從字面上我們就能夠很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。“:root”選擇器同等于<html>元素，簡單點說：
:root{background:orange}==html {background:orange;}
14、結構性偽類選擇器—not
:not選擇器稱為否定選擇器，和jQuery中的:not選擇器1模1樣，可以選擇除某個元素以外的所有元素。就拿form元夙來說，比如說你想給表單中除submit按鈕以外的input元素添加紅色邊框，CSS代碼可以寫成：
form {
width: 200px;
margin: 20px auto;}
div {
margin-bottom: 20px;
}
input:not([type="submit"]){
border:1px solid red;
}
15、結構性偽類選擇器—empty
:empty選擇器表示的就是空。用來選擇沒有任何內容的元素，這里沒有內容指的是1點內容都沒有，哪怕是1個空格。
比如說，你的文檔中有3個段落p元素，你想把沒有任何內容的P元素隱藏起來。我們就能夠使用“:empty”選擇器來控制。
HTML代碼：
<p>我是1個段落</p>
<p> </p>
<p></p>?
CSS代碼：
p{
background: orange;
min-height: 30px;
}
p:empty {
display: none;
}?
16、結構性偽類選擇器—target
:target選擇器稱為目標選擇器，用來匹配文檔(頁面)的url的某個標志符的目標元素。我們先來上個例子，然后再做分析。
示例展現
點擊鏈接顯示隱藏的段落。
HTML代碼：
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
content for Brand
</div>
CSS代碼：
.menuSection{
display: none;
}
:target{/*這里的:target就是指id="brand"的div對象*/
display:block;
}
17、結構性偽類選擇器—first-child
“:first-child”選擇器表示的是選擇父元素的第1個子元素的元素E。簡單點理解就是選擇元素中的第1個子元素，記住是子元素，而不是后代元素。
18、結構性偽類選擇器—last-child
“:last-child”選擇器與“:first-child”選擇器作用類似，不同的是“:last-child”選擇器選擇的是元素的最后1個子元素。
19、結構性偽類選擇器—nth-child(n)
“:nth-child(n)”選擇器用來定位某個父元素的1個或多個特定的子元素。其中“n”是其參數，而且可以是整數值(1,2,3,4)，也能夠是表達式(2n+1、-n+5)和關鍵詞(odd、even)，但參數n的起始值始終是1，而不是0。也就是說，參數n的值為0時，選擇器將選擇不到任何匹配的元素。
20、結構性偽類選擇器—nth-last-child(n)
“:nth-last-child(n)”選擇器和前面的“:nth-child(n)”選擇器非常的相似，只是這里多了1個“last”，所起的作用和“:nth-child(n)”選擇器有所區分，從某父元素的最后1個子元素開始計算，來選擇特定的元素。
21、first-of-type選擇器
“:first-of-type”選擇器類似于“:first-child”選擇器，不同的地方就是指定了元素的類型,其主要用來定位1個父元素下的某個類型的第1個子元素。
22、nth-of-type(n)選擇器
“:nth-of-type(n)”選擇器和“:nth-child(n)”選擇器非常類似，不同的是它只計算父元素中指定的某種類型的子元素。當某個元素中的子元素不單單是同1種類型的子元素時，使用“:nth-of-type(n)”選擇器來定位于父元素中某種類型的子元素是非常方便和有用的。在“:nth-of-type(n)”選擇器中的“n”和“:nth-child(n)”選擇器中的“n”參數也1樣，可以是具體的整數，也能夠是表達式，還可以是關鍵詞
n的參數也能夠為odd 和 even 是可用于匹配下標是奇數或偶數的子元素的關鍵詞
23、last-of-type選擇器
“:last-of-type”選擇器和“:first-of-type”選擇器功能是1樣的，不同的是他選擇是父元素下的某個類型的最后1個子元素
24、nth-last-of-type(n)選擇器
“:nth-last-of-type(n)”選擇器和“:nth-of-type(n)”選擇器是1樣的，選擇父元素中指定的某種子元素類型，但它的起始方向是從最后1個子元素開始，而且它的使用方法類似于上節中介紹的“:nth-last-child(n)”選擇器1樣。
25、only-child選擇器
“:only-child”選擇器選擇的是父元素中只有1個子元素，而且只有唯1的1個子元素。也就是說，匹配的元素的父元素中唯一1個子元素，而且是1個唯1的子元素。
26、only-of-type選擇器
“:only-of-type”選擇器用來選擇1個元素是它的父元素的唯逐一個相同類型的子元素。這樣說也許不太好理解，換1種說法。“:only-of-type”是表示1個元素他有很多個子元素，而其中只有1種類型的子元素是唯1的，使用“:only-of-type”選擇器就能夠選中這個元素中的唯逐一個類型子元素。
27、:enabled選擇器
在Web的表單中，有些表單元素有可用（“:enabled”）和不可用（“:disabled”）狀態，比如輸入框，密碼框，復選框等。在默許情況之下，這些表單元素都處在可用狀態。那末我們可以通過偽選擇器“:enabled”對這些表單元素設置樣式。
28、:disabled選擇器
“:disabled”選擇器恰好與“:enabled”選擇器相反，用來選擇不可用表單元素。要正常使用“:disabled”選擇器，需要在表單元素的HTML中設置“disabled”屬性。
29、:checked選擇器
在表單元素中，單選按鈕和復選按鈕都具有選中和未選中狀態。（大家都知道，要覆寫這兩個按鈕默許樣式比較困難）。在CSS3中，我們可以通過狀態選擇器“:checked”配合其他標簽實現自定義樣式。而“:checked”表示的是選中狀態。
30、::selection選擇器
“::selection”偽元素是用來匹配突出顯示的文本(用鼠標選擇文本時的文本)。閱讀器默許情況下，用鼠標選擇網頁文本是以“深藍的背景，白色的字體”顯示的，效果以下圖所示：
31、:read-only選擇器
“:read-only”偽類選擇器用來指定處于只讀狀態元素的樣式。簡單點理解就是，元素中設置了“readonly=’readonly’
32、:read-write選擇器
“:read-write”選擇器恰好與“:read-only”選擇器相反，主要用來指定當元素處于非只讀狀態時的樣式。
33、::before和::after
::before和::after這兩個主要用來給元素的前面或后面插入內容，這兩個常和"content"配合使用，使用的場景最多的就是清除浮動。
34、變形--旋轉 rotate()
旋轉rotate()函數通過指定的角度參數使元素相對原點進行旋轉。它主要在2維空間內進行操作，設置1個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉
35、變形--旋轉 rotate()
旋轉rotate()函數通過指定的角度參數使元素相對原點進行旋轉。它主要在2維空間內進行操作，設置1個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。
36、變形--扭曲 skew()
扭曲skew()函數能夠讓元素傾斜顯示。它可以將1個對象以其中心位置圍繞著X軸和Y軸依照1定的角度傾斜。這與rotate()函數的旋轉不同，rotate()函數只是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀。
1、skew(x,y)使元素在水平和垂直方向同時扭曲
2、skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）
3、skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）
37、變形--縮放 scale()縮放 scale()函數 讓元素根據中心原點對對象進行縮放
1、 scale(X,Y)使元素水平方向和垂直方向同時縮放。若只有1個參數，則xy同時縮放
2、scaleX(x)元素僅水平方向縮放（X軸縮放）
3、scaleY(y)元素僅垂直方向縮放（Y軸縮放）
38、變形--位移 translate()
translate()函數可以將元素向指定的方向移動，類似于position中的relative。或以簡單的理解為，使用translate()函數，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。
1、translate(x,y)水平方向和垂直方向同時移動
2、translateX(x)僅水平方向移動（X軸移動）
3、translateY(Y)僅垂直方向移動（Y軸移動）
39、變形--矩陣 matrix()
matrix() 是1個含6個值的(a,b,c,d,e,f)變換矩陣，用來指定1個2D變換，相當于直接利用1個[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用觸及到數學中的矩陣，我在這里只是簡單的說1下CSS3中的transform有這么1個屬性值，如果需要深入了解，需要對數學矩陣有1定的知識。
40、變形--原點 transform-origin
在沒有重置transform-origin改變元素原點位置的情況下，CSS變形進行的旋轉、位移、縮放，扭曲等操作都是以元素自己中心位置進行變形。但很多時候，我們可以通過transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以到達需要的原點位置。
對x軸的調劑：left|center|right
對y軸的調劑：top|center|bottom
對z軸的調劑：length px
41、動畫--過渡屬性 transition-property
初期在Web中要實現動畫效果，都是依賴于JavaScript或Flash來完成。但在CSS3中新增加了1個新的模塊transition，它可以通過1些簡單的CSS事件來觸發元素的外觀變化，讓效果顯得更加細膩。簡單點說，就是通過鼠標的單擊、取得焦點，被點擊或對元素任何改變中觸發，并平滑地以動畫效果改變CSS的屬性值。
在CSS中創建簡單的過渡效果可以從以下幾個步驟來實現：
第1，在默許樣式中聲明元素的初始狀態樣式；
第2，聲明過渡元素終究狀態樣式，比如懸浮狀態；
第3，在默許樣式中通過添加過渡函數，添加1些不同的樣式。
CSS3的過度transition:屬性名稱|過渡所用時間|過渡模式:，主要包括以下幾個子屬性：
transition-property:none/all/某1屬性名稱指定過渡或動態摹擬的CSS屬性
transition-duration:指定完成過渡所需的時間
transition-duration屬性主要用來設置1個屬性過渡到另外一個屬性所需的時間，也就是從舊屬性過渡到新屬性花費的時間長度，俗稱延續時間。
transition-timing-function:指定過渡函數，
transition-timing-function：ease(緩慢開始，緩慢結束)|linear(勻速)|ease-in(緩慢開始)|ease-out(緩慢結束)|ease-in-out(緩慢開始，緩慢結束)。默許ease
transition-delay:指定開始出現的延遲時間，transition-delay屬性和transition-duration屬性極為類似，不同的是transition-duration是用來設置過渡動畫的延續時間，而transition-delay主要用來指定1個動畫開始履行的時間，也就是說當改變元素屬性值后多長時間開始履行。
有時我們想改變兩個或多個css屬性的transition效果時，只要把幾個transition的聲明串在1起，用逗號（“，”）隔開，然后各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的1點：第1個時間的值為 transition-duration，第2個為transition-delay。
42、Keyframes介紹
Keyframes被稱為關鍵幀，其類似于Flash中的關鍵幀。在CSS3中其主要以“@keyframes”開頭，后面緊隨著是動畫名稱加上1對花括號“{…}”，括號中就是1些不同時間段樣式規則。
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
在1個“@keyframes”中的樣式規則可以由多個百分比構成的，如在“0%”到“100%”之間創建更多個百分比，分別給每一個百分比中給需要有動畫效果的元素加上不同的樣式，從而到達1種在不斷變化的效果。
經驗與技能：在@keyframes中定義動畫名稱時，其中0%和100%還可使用關鍵詞from和to來代表，其中0%對應的是from，100%對應的是to。
aniamtion:name|duration|timing-function|delay|iteration-count|direction|play-state|fill-mode
43、調用動畫
animation-name屬性主要是用來調用 @keyframes 定義好的動畫。需要特別注意: animation-name 調用的動畫名需要和“@keyframes”定義的動畫名稱完全1致（辨別大小寫），如果不1致將不具有任何動畫效果。
語法：animation-name: none | IDENT[,none|DENT]*;
44、設置動畫播放時間
animation-duration主要用來設置CSS3動畫播放時間，其使用方法和transition-duration類似，是用來指定元素播放動畫所延續的時間長，也就是完成從0%到100%1次動畫所需時間。單位：S秒
語法規則
animation-duration: <time>[,<time>]*
取值<time>為數值，單位為秒，其默許值為“0”，這意味著動畫周期為“0”，也就是沒有動畫效果（如果值為負值會被視為“0”）。
45、設置動畫播放方式
animation-timing-function屬性主要用來設置動畫播放方式。主要讓元素根據時間的推動來改變屬性值的變換速率，簡單點說就是動畫的播放方式。
語法規則：
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>)]*
它和transition中的transition-timing-function1樣，具有以下幾種變換方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。對應功以下：
46、設置動畫開始播放的時間
animation-delay屬性用來定義動畫開始播放的時間，用來觸發動畫播放的時間點。和transition-delay屬性1樣，用于定義在閱讀器開始履行動畫之前等待的時間。
語法規則：
animation-delay:<time>[,<time>]*
47、設置動畫播放次數
animation-iteration-count屬性主要用來定義動畫的播放次數。
語法規則：
animation-iteration-count: infinite | <number> [, infinite | <number>]*
1、其值通常為整數，但也能夠使用帶有小數的數字，其默許值為1，這意味著動畫將從開始到結束只播放1次。
2、如果取值為infinite，動畫將會無窮次的播放
注意：Chrome或Safari閱讀器，需要加入-webkit-前綴！
48、設置動畫播放方向（需加前綴）
animation-direction屬性主要用來設置動畫播放方向，其語法規則以下：
animation-direction:normal | alternate [, normal | alternate]*
其主要有兩個值：normal、alternate
1、normal是默許值，如果設置為normal時，動畫的每次循環都是向前播放；
2、另外一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。
49、設置動畫的播放狀態
animation-play-state屬性主要用來控制元素動畫的播放狀態。
參數：其主要有兩個值：running和paused。
其中running是其默許值，主要作用就是類似于音樂播放器1樣，可以通過paused將正在播放的動畫停下來，也能夠通過running將暫停的動畫重新播放，這里的重新播放不1定是從元素動畫的開始播放，而是從暫停的那個位置開始播放。另外如果暫停了動畫的播放，元素的樣式將回到最原始設置狀態。
50、設置動畫時間外屬性
animation-fill-mode屬性定義在動畫開始之前和結束以后產生的操作。主要具有4個屬性值：none、forwards、backwords和both。其4個屬性值對應效果以下：
none：默許值，表示動畫將按預期進行和結束，在動畫完成其最后1幀時，動畫會反轉到初始幀
forwards：
表示動畫在結束后繼續利用最后的關鍵幀的位置
backwards：
會在向元素利用動畫樣式時迅速利用動畫的初始幀
both：
元素動畫同時具有forwards和backwards效果
在默許情況之下，動畫不會影響它的關鍵幀以外的屬性，使用animation-fill-mode屬性可以修改動畫的默許行動。簡單的說就是告知動畫在第1關鍵幀上等待動畫開始，或在動畫結束時停在最后1個關鍵幀上而不回到動畫的第1幀上。或同時具有這兩個效果。
51、多列布局——Columns
為了能在Web頁面中方便實現類似報紙、雜志那種多列排版的布局，W3C特地給CSS3增加了1個多列布局模塊（CSS Multi Column Layout Module）。它主要利用在文本的多列布局方面，這類布局在報紙和雜志上都使用了幾10年了，但要在Web頁面上實現這樣的效果還是有相當大的難度，慶幸的是，CSS3的多列布局可以輕松實現。接下來我們1起學習多列布局相干的知識。
語法：columns：<column-width> || <column-count>
52、多列布局——column-width
column-width的使用和CSS中的width屬性1樣，不過不同的是，column-width屬性在定義元素列寬的時候，既可以單獨使用，也能夠和多列屬性中其他屬性配合使用。其基本語法以下所示：column-width: auto | <length>
53、多列布局——column-count
column-count屬性主要用來給元素指定想要的列數和允許的最大列數。其語法規則：column-count：auto | <integer>
54、列間距column-gap
column-gap主要用來設置列與列之間的間距，其語法規則以下：column-gap: normal || <length> 注意：normal默許值為1em，如果你的字號是px，則默許值為字體的大小
55、列表邊框column-rule
column-rule主要是用來定義列與列之間的邊框寬度、邊框樣式和邊框色彩。簡單點說，就有點類似于經常使用的border屬性。但column-rule是不占用任何空間位置的，在列與列之間改變其寬度不會改變任何列的位置。
語法規則：column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>3個屬性類似于border的屬性
56、跨列設置column-span
column-span主要用來定義1個分列元素中的子元素能跨列多少。column-width、column-count等屬性能讓1元素分成多列，不管里面元素如何排放順序，他們都是從左向右的放置內容，但有時我們需要基中1段內容或1個標題不進行分列，也就是橫跨所有列，此時column-span就能夠輕松實現，此屬性的語法以下：
column-span: none | all 注意：none為默許值，表示不逾越任何列，all表示逾越所有列
57、盒模型在CSS3中新增加了box-sizing屬性，能夠事前定義盒模型的尺寸解析方式，其語法規則以下：
box-sizing: content-box | border-box | inherit
content-box：默許值，其讓元素保持W3C的標準盒模型，也就是說元素的寬度和高度（width/height）等于元素邊框寬度（border）加上元素內距（padding）加上元素內容寬度或高度（content width/ height），也就是element width/height = border + padding + content width / height
border-box：重新定義CSS2.1中盒模型組成的模式，讓元素保持IE傳統的盒模型（IE6以下版本和IE6⑺奇異模式），也就是說元素的寬度或高度等于元素內容的寬度或高度。從上面盒模型介紹可知，這里的內容寬度或高度包括了元素的border、padding、內容的寬度或高度（此處的內容寬度或高度＝盒子的寬度或高度—邊框—內距）。
inherit：使元素繼承父元素的盒模型模式
58、伸縮布局（1）
CSS3引入了1種新的布局模式——Flexbox布局，即伸縮布局盒模型（Flexible Box），用來提供1個更加有效的方式制定、調劑和散布1個容器里項目布局，即便它們的大小是未知或動態的，這里簡稱為Flex。
Flexbox布局經常使用于設計比較復雜的頁面，可以輕松的實現屏幕和閱讀器窗口大小產生變化時保持元素的相對位置和大小不變，同時減少了依賴于浮動布局實現元素位置的定義和重置元素的大小。
Flexbox布局在定義伸縮項目大小時伸縮容器會預留1些可用空間，讓你可以調理伸縮項目的相對大小和位置。例如，你可以確保伸縮容器中的過剩空間平均分配多個伸縮項目，固然，如果你的伸縮容器沒有足夠大的空間放置伸縮項目時，閱讀器會根據1定的比例減少伸縮項目的大小，使其不溢出伸縮容器。綜合而言，Flexbox布局功能主要具有以下幾點：
第1，屏幕和閱讀器窗口大小產生改變也能夠靈活調劑布局；
第2，可以指定伸縮項目沿著主軸或側軸按比例分配額外空間（伸縮容器額外空間），從而調劑伸縮項目的大小；
第3，可以指定伸縮項目沿著主軸或側軸將伸縮容器額外空間，分配到伸縮項目之前、以后或之間；
第4，可以指定如何將垂直于元素布局軸的額外空間散布到該元素的周圍；
第5，可以控制元素在頁面上的布局方向；
第6，可以依照不同于文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序。也就是說可以在閱讀器渲染中不依照文檔流前后順序重排伸縮項目順序。
Flexbox規范版本眾多，閱讀器對此語法支持度也各有不同，接下來的內容以最新語法版本為例向大家展
1.創建1個flex容器
任何1個flexbox布局的第1步是需要創建1個flex容器。為此給元素設置display屬性的值為flex。在Safari閱讀器中，你仍然需要添加前綴-webkit，
.flexcontainer{ display: -webkit-flex; display: flex; }
2.Flex項目顯示
Flex項目是Flex容器的子元素。他們沿著主要軸和橫軸定位。默許的是沿著水平軸排列1行。你可以通過flex-direction來改變主軸方向修改成column，其默許值是row。
4.Flex項目移動到頂部
如何將flex項目移動到頂部，取決于主軸的方向。如果它是垂直的方向通過align-items設置；如果它是水平的方向通過justify-content設置。
5.Flex項目移到左側
flex項目稱動到左側或右側也取決于主軸的方向。如果flex-direction設置為row，設置justify-content控制方向；如果設置為column，設置align-items控制方向。-webkit-align-items: flex-start/flex-end/center;
8.Flex項目實現自動伸縮
您可以定義1個flex項目，如何相對flex容器實現自動的伸縮。需要給每一個flex項目設置flex屬性設置需要伸縮的值。
.bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; }
59、Media Queries——媒體類型（1）
隨著科學技術不斷的向前發展，網頁的閱讀終端愈來愈多樣化，用戶可以通過：寬屏電視、臺式電腦、筆記本電腦、平板電腦和智能手機來訪問你的網站。雖然你沒法保證1個網站在不同屏幕尺寸和不同裝備上看起來完全1模1樣，但最少要讓你的Web頁面能適配用戶的終端，讓他更好的顯現在你的用戶眼前。在本節中，將會學到如何使用CSS3中的Media Queries模塊來讓1個頁面適應不同的終端（或屏幕尺寸），從而讓你的頁面讓用戶有1個更好的體驗。
1、媒體類型
媒體類型（Media Type）在CSS2中是1個常見的屬性，也是1個非常有用的屬性，可以通過媒體類型對不同的裝備指定不同的樣式。見圖片見素材/圖片
60、responsive布局技能
方法。你首先禁掉你頁面中所有的樣式（和與樣式相干的信息），在閱讀器中打開，如果你的內容排列有序，方便瀏覽，那末你的這個結構不會差到哪里去。
61、自由縮放屬性resize
resize屬性主要是用來改變元素尺寸大小的，其主要目的是增強用戶體驗。但使用方法卻是極為的簡單，先從其語法入手。
resize: none | both | horizontal | vertical | inherit
none用戶不能拖動元素尺寸大小，both用戶可以拖動元素，同時可以修改元素的寬度和高度，horizontal用戶可以拖放元素，僅可以修改元素的寬度，但不能修改元素的高度，vertical用戶可以拖放元素，盡可以修改元素的高度，但不能修改元素的寬度，inherit繼承父元素的屬性值
62、CSS3外輪廓屬性
外輪廓outline在頁面中顯現的效果和邊框border顯現的效果極為相似，但和元素邊框border完全不同，外輪廓線不占用網頁布局空間，不1定是矩形，外輪廓是屬于1種動態樣式，只有元素獲得到焦點或被激活時顯現。
outline屬性早在CSS2中就出現了，主要是用來在元素周圍繪制1條輪廓線，可以起到突出元素的作用。但是并未得到各主流閱讀器的廣泛支持，在CSS3中對outline作了1定的擴大，在之前的基礎上增加新特性。outline屬性的基本語法以下：
outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit
從語法中可以看出outline和border邊框屬性的使用方法極為類似。outline-color相當于border-color、outline-style相當于border-style，而outline-width相當于border-width，只不過CSS3給outline屬性增加了1個outline-offset屬性
outline-color：定義輪廓線的色彩，屬性值為CSS中定義的色彩值。在實際利用中，可以將此參數省略，省略時此參數的默許值為黑色。
outline-style：定義輪廓線的樣式，屬性為CSS中定義線的樣式。在實際利用中，可以將此參數省略，省略時此參數的默許值為none，省略后不對該輪廓線進行任何繪制。
outline-width：定義輪廓線的寬度，屬性值可以為1個寬度值。在實際利用中，可以將此參數省略，省略時此參數的默許值為medium，表示繪制中等寬度的輪廓線。
outline-offset：定義輪廓邊框的偏移位置的數值，此值可以取負數值。當此參數的值為正數值，表示輪廓邊框向外偏離多少個像素；當此參數的值為負數值，表示輪廓邊框向內偏移多少個像素。
inherit：元素繼承父元素的outline效果。
63、CSS生成內容
在Web中插入內容，在CSS2.1時期依托的是JavaScript來實現。但進入CSS3進代以后我們可以通過CSS3的偽類“:before”，“:after”和CSS3的偽元素“::before”、“::after”來實現，其關鍵是依托CSS3中的“content”屬性來實現。不過這個屬性對img和input元素不起作用。
content配合CSS的偽類或偽元素，1般可以做以下4件事情：
none：不生成任何內容
attr：插入標簽屬性值
url：使用指定的絕對或相對地址插入1個外部資源（圖象，聲頻，視頻或閱讀器支持的其他任何資源）
string：插入字符串
在CSS中有1種清除浮動的方法叫“clearfix”
64、CSS3 perspective 屬性
定義3D元素距視圖的距離，以像素計。該屬性允許你改變3D元素查看3D元素的試圖，當為元素定義perspective屬性是，其子元素會取得透視效果，而不是元素本身。注釋：perspective 屬性只影響 3D 轉換元素。
perspective: number|none;
65、CSS3 transform-style 屬性
transform-style 屬性規定如何在 3D 空間中顯現被嵌套的元素。
注釋：該屬性必須與 transform 屬性1同使用。
transform-style: flat|preserve⑶d;flat子元素將不保存3D位置，preserve⑶d子元素將保存其3D位置
66、CSS3 transform 屬性
transform 屬性向元素利用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜
translate系列單位是px， rotate系列單位是deg;translate和rotate順序不同，效果也會不同
transform-origin屬性定義變形的原點，默許是文件的中心。可使用這個屬性來改變變形的原點。
67、CSS vertical-align 屬性
vertical-align 屬性設置元素的垂直對齊方式。
68、CSS strong 屬性
用于強調，和<em>標簽1樣，用于強調文本，但它強調的程度更強1下。通常使用加粗的字體來顯示其中的內容
69、CSS display 屬性
display屬性規定元素應當生成的框的類型。這個屬性用于定義建立布局時元素生成的顯示框類型。對 HTML 等文檔類型，如果使用 display 不謹慎會很危險，由于可能違背 HTML 中已定義的顯示層次結構。對 XML，由于 XML 沒有內置的這類層次結構，所有 display 是絕對必要的。
70、CSS 屬性
cursor:唆使鼠標到達元素時的鼠標形態
71、font-smoothing屬性
css3種用于設置字體的抗鋸齒或光滑度的屬性
語法規則：font-smoothing:subpixel-antialiased(閱讀器默許)|none(小像素文本)|antialiased(反鋸齒)
72、如何隱藏1個元素，使其不可見
display:none;position:absolute;left:⑼99999px;visibility:hidden;opacity:0
opacity設置div元素的不透明級別。opacity: value(0.0完全透明⑴.0完全不透明)|inherit(父類繼承);
73、backface-visibility:定義當元素不面向屏幕是是不是可見
backface-visibility:visible(背面是可見的)|hidden(背面是不可見的);
74、@font-face是css中的1個模塊，主要用于將自己定義的web字體嵌入網頁中
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
取值說明
1、YourWebFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默許字體，他將被援用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
2、source:此值指的是你自定義的字體的寄存路徑，可以是相對路徑也能夠是死路徑；
3、format：此值指的是你自定義的字體的格式，主要用來幫助閱讀器辨認，其值主要有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
4、weight和style:這兩個值大家1定很熟習，weight定義字體是不是為粗體，style主要定義字體樣式，如斜體。
css shake:
<link type="text/css" href="csshake.css">
具體樣式：
<div class="shake shake-hard"></div>
<div class="shake shake-slow"></div>
<div class="shake shake-little"></div>
<div class="shake shake-horizontal"></div>
<div class="shake shake.vertical"></div>
<div class="shake shake-rotate"></div>
<div class="shake shake-opacity"></div>
<div class="shake shake-crazy"></div>
75、box-sizing屬性允許您以特定的方式定義匹配某個區域的特定元素。
box-sizing: content-box|border-box|inherit;
content-box:這是由 CSS2.1 規定的寬度高度行動。寬度和高度分別利用到元素的內容框。在寬度和高度以外繪制元素的內邊距和邊框。
border-box:為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
inherit
規定應從父元素繼承 box-sizing 屬性的值。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
