前端開發札記（一）

前端開發札記（一）

如果你不小心點進來了，很抱歉地告訴你，並沒有這裏並沒有什麼乾貨，只是一些知識積累。抱歉了！

1 CSS優先級

優先級是每種選擇器類型構成的級聯字符串計算而成的。他是一個對應匹配表達式的權重。

如果表達式相同，靠後的CSS會應用到元素上。

優先級順序

從低到高的優先級順序是：

• 通用選擇器（*）
• 元素（類型）選擇器
• 類選擇器
• 屬性選擇器
• 僞類
• ID選擇器
• 內聯樣式

!important規則

!important聲明與以上優先級無關。該聲明會覆蓋其他任何的CSS聲明。如果同時都有!important聲明，則會計算除了!important以外的選擇器類型構成的級聯字符串的優先級，來決定應用哪一個CSS。

:not 僞類

:not否定僞類在優先級計算中不會被當成僞類來計算，而:not中的類型選擇器則會被當做普通選擇器來進行計算。

基於類型的優先級

在優先級的計算中，是基於類型的。這一點比較容易混淆的是屬性選擇器。如：

[id="foo"] {
    color: red;
}

這是屬性選擇器，計算的時候不會被當做ID選擇器。

DOM樹的距離與優先級無關

在優先級的計算當中，元素之間的距離是不被考慮的。所有的計算規則，都是按照選擇器的類型和優先級順序來進行計算的。

參考

• 優先級

2 CSS3新特性

CSS的發展歷史是這樣的：

CSS -> CSS2 -> CSS3

在此我總結一下CSS3有哪些新特性。

CSS3選擇器

Selector	Example	Description
element1~element2	p~ul	選擇前面有<p>元素的每個<ul>元素。
[attribute^=value]	a[src^="https"]	選擇其src屬性值以"https"開頭的每個<a>元素。
[attribute$=value]	a[src$=".pdf"]	選擇其src屬性以 ".pdf" 結尾的所有<a>元素。
[attribute*=value]	a[src*="abc"]	選擇其src屬性中包含"abc"子串的每個<a>元素。
:first-of-type	p:first-of-type	選擇屬於其父元素的首個<p>元素的每個<p>元素。
:last-of-type	p:last-of-type	選擇屬於其父元素的最後<p>元素的每個<p>元素。
:only-of-type	p:only-of-type	選擇屬於其父元素唯一的<p>元素的每個<p>元素。
:only-child	p:only-child	選擇屬於其父元素的唯一子元素的每個<p>元素。
:nth-child(n)	p:nth-child(2)	選擇屬於其父元素的第二個子元素的每個<p>元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，從最後一個子元素開始計數。
:nth-of-type(n)	p:nth-of-type(2)	選擇屬於其父元素第二個<p>元素的每個<p>元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是從最後一個子元素開始計數。
:last-child	p:last-child	選擇屬於其父元素最後一個子元素每個<p>元素。
:root	:root	選擇文檔的根元素。
:empty	p:empty	選擇沒有子元素的每個<p>元素（包括文本節點）。
:target	#news:target	選擇當前活動的#news元素。
:enabled	input:enabled	選擇每個啓用的<input>元素。
:disabled	input:disabled	選擇每個禁用的<input>元素
:checked	input:checked	選擇每個被選中的<input>元素。
:not(selector)	:not(p)	選擇非<p>元素的每個元素。
::selection	::selection	選擇被用戶選取的元素部分。

活用CSS3的選擇器可以減少很多無謂的js代碼。

@font-face特性

可以自定義字體文件，並且定義CSS字體，體現在font-family屬性裏面。

例子：

 @font-face { 
     font-family: BorderWeb; 
     src:url(BORDERW0.eot); // 服務器字體文件
 } 
 @font-face { 
     font-family: Runic; 
     src:url(RUNICMT0.eot); // 服務器字體文件
 } 

word-wrap & text-overflow 樣式

word-wrap: 設置或檢索當前行超過指定容器的邊界時是否斷開轉行
text-overflow: 設置或檢索當前行超過指定容器的邊界時如何顯示

text-decoration 文字渲染

CSS3 裏面開始支持對文字的更深層次的渲染。

text-fill-color: 文字內部填充顏色
text-stroke-color: 文字邊界填充顏色
text-stroke-width: 文字邊界寬度

CSS3 的多列布局（multi-column layout）

column-count：表示佈局幾列。
column-rule：表示列與列之間的間隔條的樣式
column-gap：表示列於列之間的間隔

邊框和顏色（color, border）

顏色：CSS3提供透明度支持。
邊框：CSS3圓角支持。

CSS3 的漸變效果（gradient）

線性漸變: linear
徑向漸變: radial

CSS3 的陰影（shadow）和反射（reflect）效果

陰影：

.class1{
    text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5); 
} 
.class2{ 
    box-shadow: 3px 3px 3px rgba(0, 64, 128, 0.3); 
}

反射：

.classReflect{ 
     -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.51))); 
 }

CSS3 的背景效果

background-clip: 背景畫區

background-clip: border-box; // 背景從 border 開始顯示;
background-clip: padding-box; // 背景從 padding 開始顯示;
background-clip: content-box; // 背景顯 content 區域開始顯示;
background-clip: no-clip; // 默認屬性，等同於 border-box;

background-origin: 背景位置

background-origin: border-box; // 從border開始計算 background-position;
background-origin: padding-box; // 從padding開始計算 background-position;
background-origin: content-box; // 從content開始計算 background-position;

background-size: 調整背景圖片的大小

background-size: contain; 縮小圖片以適合元素（維持像素長寬比）
background-size: cover; 擴展元素以填補元素（維持像素長寬比）
background-size: 100px 100px; 縮小圖片至指定的大小
background-size: 50% 100%; 縮小圖片至指定的大小，百分比是相對包含元素的尺寸

background-break: CSS3中，元素可以被分成幾個獨立的盒子（如使內聯元素 span 跨越多行），background-break 屬性用來控制背景怎樣在這些不同的盒子中顯示

background-break: continuous; 默認值。忽略盒之間的距離（也就是像元素沒有分成多個盒子，依然是一個整體一樣）
background-break: bounding-box; 把盒之間的距離計算在內；
background-break: each-box; 爲每個盒子單獨重繪背景

多背景圖片

div { 
    background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 10px center repeat-x;
}

CSS3 的盒子模型

<div class="boxcontainer"> 
    <div class="item"> 1 </div> 
    <div class="item"> 2 </div> 
    <div class="item"> 3 </div> 
    <div class="item flex"> 4 </div> 
</div>

水平排列

.boxcontainer { 
    width: 1000px; 
    display: -webkit-box; 
    display: -moz-box; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
}
.item {
    background: #357c96; 
    font-weight: bold; 
    margin: 2px; 
    padding: 20px; 
    color: #fff;
    font-family: Arial, sans-serif;
}

box-flex

<div class="boxcontainer"> 
    <div class="item"> 1 </div> 
    <div class="item"> 2 </div> 
    <div class="item flex2"> 3 </div> 
    <div class="item flex"> 4 </div> 
</div>

.flex {
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
 }
.flex2 { 
    -webkit-box-flex: 2; 
    -moz-box-flex: 2; 
}

box-direction: 可以用來翻轉這四個盒子的排序
box-ordinal-group: 可以用來改變每個盒子的位置
box-ordinal-group: 屬性值越高，就排在越後面
box-align: 盒子的對方方式
box-pack: 盒子的對方方式

CSS3的transition, transform和animation

transition: 過渡
transform: 變換
animation: 動畫

參考

• CSS選擇器
• 深入瞭解 CSS3 新特性

未完待續…

3 清除浮動的方式

4 元素上下左右居中

5 cookies，sessionStorage，localStorage的區別

6 IE6/7/8兼容性問題探討