摘要：文檔流指的是元素按照在中為的位置順序決定排布的過程，在排布過程中，將窗體自上而下分為一行行，并在每行中從左至右的順序排放元素。

一篇文章包你學會使用pure.css框架，理解其原理，并學會其包含css知識，學會自己寫css組件

優(yōu)先級就是分配給指定css聲明的一個權(quán)重，它由匹配的選擇器中的每一種選擇器類型的數(shù)值決定。而當優(yōu)先級與多個css聲明中任何一個聲明的優(yōu)先級相等時，css中最后的那個聲明將會被應(yīng)用到元素上。

選擇器是用于定位文檔中的元素以便設(shè)定相應(yīng)的樣式代碼

選擇器分類

基礎(chǔ)選擇器

? 組合選擇器

屬性選擇器

? 偽類選擇器

? 偽元素

（解釋了眾多css樣式被覆蓋的問題）

首先!important的css定義是擁有最高的優(yōu)先級

優(yōu)先級計算分為a,b,c,d四個位數(shù)，這四個位數(shù)的優(yōu)先級依次遞減。

內(nèi)聯(lián)樣式：a=1；

ID選擇器：b=1；

屬性選擇器和類選擇器：c=1;

元素選擇器和偽類選擇器: d=1;

li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

（主要應(yīng)用于menu中，垂直和水平導航欄）

css文檔流(document flow)和普通流(normal flow)實際上指的是同一個概念。

文檔流 指的是元素按照在HTML中為的位置順序決定排布的過程，在排布過程中，將窗體自上而下分為一行行，并在每行中從左至右的順序排放元素。

非浮動的塊級元素(block)獨占一行，行內(nèi)元素(inline)不會獨占一行。

div1
div2

超鏈接1
超鏈接2

（主要是用于含有重疊菜單的子菜單定位問題）

絕對定位其實是相對了某個東西的，而這個東西就是元素的第一個有position且position不能為static的祖先元素。就是這個東西必須是有一定地位的(position:absolute或position:relative),不能是一個窮鬼(position:static)或者沒有地位的(position).這個時候，絕對定位，它才能以之為標桿。

給他爸爸加上相對定位，然后他是絕對定位

  

    紅色：太公
        

        綠色：爺爺
            

            黃色：老爸
                

                    div1
                

                    div2
                

                    div3
            
        
    

所有pure模塊都是基于normalize.css構(gòu)建，對比base.css詳細normalize.css內(nèi)容請查看《Normalize.css》

Normalize.css是一個小的CSS文件，為HTML元素樣式提供跨瀏覽器的一致性。它是一個現(xiàn)代的、支持HTML5的、傳統(tǒng)CSS重置的替代。

html {
  font-family: sans-serif; /* 1 */
  //無襯線體，字的比劃開始及結(jié)束地方?jīng)]有額外裝飾
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
  //iPhone 和 Android 的瀏覽器縱向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自動調(diào)整字體大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。text-size-adjust 設(shè)為 none 或者 100% 關(guān)閉字體大小自動調(diào)整功能.
}

abbr[title] {
  border-bottom: 1px dotted;
}
//縮略詞顯示詳情，含有title屬性的abbr標簽縮略詞的底部邊線

svg:not(:root){
  overflow: hidden;
}
//svg(可縮放矢量圖形)，是基于可擴展標記語言(XML)，用于描述二維矢量圖形
:root,匹配文檔的根元素，在HTML中，根元素永遠是HTML
:not(selector)選擇器匹配非指定元素
則以上是svg非根元素的元素

[hidden],
template {
//template模板標簽
  display: none;
}
.hidden,
[hidden] {
//!important最高優(yōu)先級
    display: none !important;
}

html元素添加hidden屬性，可以實現(xiàn)display:none !important;

添加class .pure-img,配合viewport可以實現(xiàn)圖片伸縮

.pure-img {
//最小寬度(min-width)與最大寬度(max-width)用于設(shè)置圖片最小最大寬度限制比較多。
比如一個圖片為主列表，對象里圖片大小不定時候，為了不想讓他太小不統(tǒng)一這個時候我們可以使用css最小寬度樣式。再如，一個盒子里有文章有圖片混排的時候，有時圖片寬度不能確定，這個時候如果html img圖片寬度超出了盒子寬度，可能圖片就會撐破div盒子造成圖片混亂。
    max-width: 100%;
    height: auto;
    display: block;
}

max-width詳細情況可以查看《CSS max-width 屬性》

letter-spacing: -0.31em;

1em == 16px,因為瀏覽器默認的字體大小是16px，em可以在瀏覽器改變字體大小時作出相應(yīng)的放大和縮小，彈性布局

*word-spacing: -0.43em

在樣式屬性名前加*,這樣的樣式可以被IE6和IE7所識別,而其它瀏覽器則會當做錯誤忽略,所以,這樣的樣式寫法只對IE6/7生效.
而_開頭的屬性只有IE6才能識別.

關(guān)于letter-spacing和word-spacing的區(qū)別

word-spacing屬性增加或減少單詞之間的空白

letter-spacing屬性增加或減少字符之間的空白

text-rendering: optimizespeed;

text-rendering屬性常被用在windows和linux系統(tǒng)中，用來給渲染引擎提供信息，讓文本在速度和可讀性方面得到優(yōu)化，控制在線字體的微妙細節(jié)，目前只有firefos和google支持。

optimizespeed取值 Gecko內(nèi)核的瀏覽器將強調(diào)可讀性和幾何精度，同時繪制文本渲染速度，禁用字距和連寫

font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;

常用的字體

display: -webkit-box;/ Chrome 4+, Safari 3.1, iOS Safari 3.2+ /
display: -webkit-flex;/ Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 /
display: -ms-flexbox;/ IE 10 /
display: flex; / Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ /

webkit是一個開源的瀏覽器引擎，與之對應(yīng)的有Gecko和Trident,加上之后表示私有屬性

-moz代表firefox瀏覽器私有屬性
-ms代表IE瀏覽器私有屬性
-webkit代表chrome、safari私有屬性

關(guān)于display:box和display:flex的區(qū)別

flex是2012年以后的標準語法，大部分瀏覽器已經(jīng)實現(xiàn)了無前綴版本，box是2009年語法，需要加上前綴

以上其實是該屬性的兼容性代碼

flex布局，彈性布局，用來為盒裝模型提供最大的靈活性

通過添加.pure-g和未添加進行對比，可以發(fā)現(xiàn)，.pure-g的效果主要就是flex屬性，而flex屬性在此處的重要作用是給.pure-u元素添加float浮動屬性

-webkit-flex-flow: row wrap;    
-ms-flex-flow: row wrap;        
flex-flow: row wrap;

flex-flow:||

row表示行內(nèi)方向，即彈性項目在彈性容器中的起始放置方向，flex-wrap表示需要拆行以使得彈性項目能被容器包含

-webkit-align-content: flex-start;    
-ms-flex-line-pack: start;        
align-content: flex-start;

多行項目時，讓彈性元素始終排在頭部，中間沒有間距，詳細flex教程請查看《Flex布局教程：語法篇》

@media all and (min-width:xxx) and (max-width:xxx){   
/*這段查詢的all是針對所有設(shè)備(有些設(shè)備不一定是屏幕，也許是打字機，盲人閱讀器)*/ 
        table .pure-g {
        display: block;
    }
}   

寫這一行是因為flex在ie10中的table時不起作用

.pure-g [class *= "pure-u"] {font-family: sans-serif;}

表示的是設(shè)置class屬性值包含有pure-u 字符串的所有pure-g元素的樣式

div[class^="something"] { }表示以之開始
div[class$="something"] { }表示以之結(jié)尾

.pure-u {
display: inline-block;
*display: inline; /* IE < 8: fake inline-block */
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}

zoom: normal | |

? normal:使用對象的實際尺寸

? :用浮點數(shù)來定義縮放比例

? :用百分比來定義縮放比例

vertical-align垂直對齊屬性

.pure-u-x-y{
     display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

這個樣式和.pure-u是相同的

pure柵格默認支持5列和24列

x/y表示的是列數(shù)所占的比重

.pure-u-1-24 {
    width: 4.1667%;
    *width: 4.1357%;
}

可以發(fā)現(xiàn)IE67和其他瀏覽器之間的寬度存在細微差別,微調(diào)后可修復(fù)

.pure-form input[type="text"]

不同的表單類型

    padding: 0.5em 0.6em;
    //設(shè)置表單內(nèi)部填充
    display: inline-block;
    //顯示為行內(nèi)元素
    border: 1px solid #ccc;
    //邊界線
    box-shadow: inset 0 1px 3px #ffffd;
    //盒子陰影,inset設(shè)置在內(nèi)邊框
    border-radius: 4px;
    //圓框邊角
    vertical-align: middle;
    //讓行內(nèi)元素居中顯示，主要是表單
    box-sizing: border-box;
    //設(shè)置盒子尺寸

input:not([type]) //這個屬性需要分離出來，因為ie8在一堆css2.1中包含一個css3屬性的時候不會執(zhí)行

:not()否定選擇器,可以讓你定位不該匹配該選擇器的元素，IE6-8瀏覽器不支持:not()選擇器

.pure-form input[type="color"]{
?    padding: 0.2em 0.5em;
} //chrome顯示色彩選擇器需要額外的空間
input[type="text"]:focus {
outline:0;
border-color:#129FEA;
}

為聚焦的時候添加樣式

outline和boder區(qū)別

outline是不占空間的，既不會增加額外的width或者height

border可應(yīng)用于幾乎所有有形的html元素，而outline是針對鏈接、表單控件和imageMap等元素,outline會隨元素focus出現(xiàn)，隨blur而消失

詳細的情況可以查看《深入淺析border和outline區(qū)別》

input[type="text"][disabled]
input[readonly]

這兩種寫法都會使顯示出來的文本框不能輸入文字

但disabled會使文本框變灰，而且通過request.getParameter("name")得不到文本框中的內(nèi)容(如果有的話)

而readonly只是使文本框不能輸入，外觀沒有變化，而且通過request.getParameter("name")可以得到內(nèi)容，可以復(fù)制

input:focus:invalid

同類型的方法

:required必須，要求input不能為空

:valid有效，即當填寫內(nèi)容符合要求時觸發(fā)

:invalid無效，即當填寫內(nèi)容不符合要求時觸發(fā)

可以看到符合要求時，顯示的邊框顏色為藍，右邊的沒有添加:focus選擇器的表單在無效的時候一直都是紅色

疑問：

input:focus:invalid和input:focus:invalid:focus差別并沒有試驗出來

.pure-form fieldset
.pure-form legend

fieldset和legend標簽的組合使用

實現(xiàn)的手段是添加border:0和border-bottom

可以生成堆疊式表單，即為同一列

實現(xiàn)的手段是添加display:block將它變成塊級元素，獨占整行和margin: 0.25em 0;

可以生成對齊式表單，label顯示在input左邊末端對齊
nline-block顯示成行內(nèi)元素，然后設(shè)置width使之可以撐滿，再設(shè)置text-align:right使之向右對齊，此時與表單過于靠近，添加margin屬性，使和表單之間間距變大。考慮到字數(shù)過長產(chǎn)生換行，使用vertical-align讓行內(nèi)元素居中顯示

可以為表單標簽分組，使用方法是為fieldset添加該class

區(qū)別不大，主要是陰影部分，以及結(jié)束部分相連r-radius:0將圓角樣式去除，然后使用:first-child和:last-child選擇器，重新設(shè)置這兩個元素的圓角等樣式，達到此效果

.pure-form .pure-group input:first-child:last-child

通過偽類選擇器設(shè)置第一個和最后一個同類標簽的樣式

.pure-form .pure-input-2-3

設(shè)置表單大小

    //這個樣式應(yīng)該主要是運用在移動端
    display: inline-block;
    //行內(nèi)元素
    zoom: 1;
    //縮放比例
    line-height: normal;
    //默認行高
    white-space: nowrap;
    //如何處理元素內(nèi)的空白，normal空白會被瀏覽器忽略，nowrap文本不會換行
    vertical-align: middle;
    //實現(xiàn)行內(nèi)元素的水平居中
    text-align: center;
    //使文本水平居中
    cursor: pointer;
    -webkit-user-drag: none;
    //user-drag：auto | element | none設(shè)置和檢索一個元素能否被拖拽
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    //user-select：none | text | all | element設(shè)置和檢索是否允許選中文本
    box-sizing: border-box;
    //設(shè)置的內(nèi)邊距和邊框不會增加寬度

//網(wǎng)頁端主要樣式
.pure-button {
    font-family: inherit;
    font-size: 100%;
    padding: 0.5em 1em;
    color: #444; /* rgba not supported (IE 8) */
    color: rgba(0, 0, 0, 0.80); /* rgba supported */
    border: 1px solid #999;  /*IE 6/7/8*/ 
    border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/
    background-color: #E6E6E6;
    text-decoration: none;
    border-radius: 2px;
}

//設(shè)置鼠標在上和焦點在上時的樣式
.pure-button-hover,
.pure-button:hover,
.pure-button:focus {
    /* csslint ignore:start */
    filter: alpha(opacity=90);
    //透明度使用
    /* csslint ignore:end */
    background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
}
//用線性漸變創(chuàng)建圖像 rgba(0,0,0, 0.05) 40%和rgba(0,0,0, 0.10));分別為起始顏色和終止顏色，第一個參數(shù)一般是漸變方向，top 是從上到下、left 是從左到右，如果定義成 left top，那就是從左上角到右下角

線性漸變

linear-gradient([ [|to],]?[,]+)

用于指定漸變的起止顏色

詳細情況可以查看《css參考手冊》.htm)

疑問：

background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));

transparent這個參數(shù)的作用和效果

.pure-table {
    /* Remove spacing between table cells (from Normalize.css) */
    border-collapse: collapse;
    //為表格設(shè)置合并邊框模型
    //collapse邊框會合并成一個單一邊框，忽略border-spacing和empty-cells屬性，而separate會使邊框分開，inherit規(guī)定應(yīng)該從父元素繼承border-collapse屬性
    border-spacing: 0;
    //設(shè)置相鄰單元格邊框間的距離，不過僅用于邊框分離模式
    empty-cells: show;
    //設(shè)置是否顯示表格中的空單元格，僅適用于邊框分離模式
    border: 1px solid #cbcbcb;
}

.pure-table caption表格標題

.pure-table td,.pure-table th,.pure-table thead

th：表頭單元格-包含表頭信息

td: 標準單元格-包含數(shù)據(jù)

thead:結(jié)合tbody和tfoot元素結(jié)合使用

.pure-table-odd td{
?    background-color: #f2f2f2;
}

隔行添加可以實現(xiàn)斑馬紋的效果或者直接加上pure-table-striped

.pure-table-striped tr:nth-child(2n-1) td{
?    background-color: #f2f2f2;
}

:nth-child(n)選擇器 規(guī)定屬于其父元素的第n格子元素，不論元素類型

:nth-of-type() 選擇器的意思是“規(guī)定屬于其父元素的第二個 p 元素”，這個需要從同類元素開始機選

.pure-table-bordered tbody > tr:last-child > td

有邊框的表格，>選擇器，可以縮小范圍，只選擇某個元素的子元素

//設(shè)置盒子大小不因為boder變化
.pure-menu {
    box-sizing: border-box;
}
//清除列表原有樣式
.pure-menu-list{
    list-style: none;
    margin: 0;
    padding: 0;    
} 
//清除a標簽原有樣式，填充a標簽，并變?yōu)閴K級元素
.pure-menu-link{
    display: block;
    text-decoration: none;
    white-space: nowrap;
    color: #777;
    padding: .5em 1em;    
}
//在父級元素使用inline-block將之變?yōu)樾屑壴夭⑼桓叨?.custom-restricted-width {
    /* To limit the menu width to the content of the menu: */
    display: inline-block;
    /* Or set the width explicitly: */
    /* width: 10em; */
}
//添加:hover,:link等樣式
.pure-menu-link:hover,
.pure-menu-link:focus {
    background-color: #eee;
}

疑問之處：

inline-block怎樣自動確定并統(tǒng)一行級元素的寬度

![clipboard.png](/img/bVNrDC)

.pure-menu-heading{
  padding: .5em 1em;
  display: block;
  text-decoration: none;
  white-space: nowrap;
  text-transform: uppercase;
  color: #565d64;
}
//給a標簽的父級標簽li標簽添加display:inline-block，使三個a標簽同行
.pure-menu-horizontal .pure-menu-item,
.pure-menu-horizontal .pure-menu-heading,
.pure-menu-horizontal .pure-menu-separator {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
//為li的父級ul標簽添加display:inline-block，使所有標簽同行
.pure-menu-horizontal .pure-menu-list {
    display: inline-block;
}
//清除列表原有樣式,統(tǒng)一間距
.pure-menu-list{
    list-style: none;
    margin: 0;
    padding: 0;    
} 

關(guān)鍵樣式

清除列表原有樣式

使用padding: .5em 1em填充a標簽

清除a標簽原有樣式

為a標簽的父級標簽li標簽添加display:inline-block，使三個a標簽同行

為標題的a標簽和li的父級ul標簽添加display:inline-block，使所有標簽同行

為ul標簽添加margin:0和padding:0清除ul原有樣式

//樣式整合
.pure-menu-link{
    display: block;
    text-decoration: none;
    white-space: nowrap;
    //可自定義部分
    color: #777;
    padding: .5em 1em;    
}
.pure-menu-list{
    list-style: none;
    margin: 0;
    padding: 0;    
}     
//實現(xiàn)橫向菜單
.pure-menu-horizontal .pure-menu-list{
    display: inline-block;
}    
//實現(xiàn)下拉菜單符號
.pure-menu-horizontal .pure-menu-has-child > .pure-menu-lin:after{
    content: "25BE";
}
//子菜單的樣式
.pure-menu-children{
    display: none;
    position: absolute;
    left: 100%;
    top:0;
    margin: 0;
    padding: 0;
    z-index: 3;
    background-color: #fff;
}
//鼠標移動顯示下拉菜單
.pure-menu-allow-hover:hover > .pure-menu-child{
    display: block;
    position: absolute;
}
//子菜單移動至下方
.pure-menu-horizontal .pure-menu-children {
    left: 0;
    top: auto;
    width: inherit;
}    

content屬性與:before和:after偽元素配合使用，來插入生成內(nèi)容

menu-has-children > .pure-menu-link:after {
    padding-left: 0.5em;
    content: "25B8";
    font-size: small;
}
//顯示隱藏的子元素
.pure-menu-allow-hover:hover > .pure-menu-children{
    display: block;
    position: absolute;
}

//限制了邊框才顯示滾動條
.custom-restricted {
    height: 160px;
    width: 150px;
    border: 1px solid gray;
    border-radius: 4px;
}
//y軸可滾動，x軸溢出隱藏
.pure-menu-scrollable {
    overflow-y: scroll;
    overflow-x: hidden;
}
//將li標簽設(shè)為塊級元素
.pure-menu-scrollable .pure-menu-list {
    display: block;
}
//水平菜單時，顯示為行級元素
.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
    display: inline-block;
}
//水平菜單針對的只是移動端，觸摸橫向滾動
.pure-menu-horizontal.pure-menu-scrollable {
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
  
   //指示元素不顯示滾動條或者篩選指標，即使內(nèi)容溢出
    -ms-overflow-style: none;
  
   //可以讓頁面在native端滾動時模擬原生的彈性滾動
    -webkit-overflow-scrolling: touch;
    /* a little extra padding for this style to allow for scrollbars */
    padding: .5em 0;
}
//存在疑問
.pure-menu-horizontal .pure-menu-scrollable::-webkit-scrollbar {
    display: none;
}