CSS3知識點2

1.佈局相關樣式
（1）多列布局columns
多列布局模塊（CSS Multi Column Layout Module）

columns：<column-width> || <column-count>

多列布局columns屬性參數主要就兩個屬性參數：列寬和列數。
參數: 參數說明
<column-width> 主要用來定義多列中每列的寬度
<column-count> 主要用來定義多列中的列數
舉例：要顯示2欄顯示，每欄寬度爲200px，代碼爲：

columns: 200px 2;

（2）列寬度column-width
column-width的使用和CSS中的width屬性一樣，不過不同的是，column-width屬性在定義元素列寬的時候，既可以單獨使用，也可以和多列屬性中其他屬性配合使用。其基本語法如下所示 ；

column-width: auto | <length>

取值說明
屬性值 說明
auto: 如果column-width設置值爲auto或者沒有顯式的設置值時，元素多列的列寬將由其他屬性來決定，比如前面的示例就是由列數column-count來決定。
length:使用固定值來設置元素列的寬度，其主要是由數值和長度單位組成，不過其值只能是正值，不能爲負值。
(3)列數量column-count
column-count屬性主要用來給元素指定想要的列數和允許的最大列數。其語法規則：

column-count：auto | <integer>

取值說明：
屬性值 屬性值說明
auto :此值爲column-count的默認值，表示元素只有一列，其主要依靠瀏覽器計算自動設置。
integer: 此值爲正整數值，主要用來定義元素的列數，取值爲大於0的整數，負值無效。
(4)列間距column-gap
column-gap主要用來設置列與列之間的間距，其語法規則如下：

column-gap: normal || <length>

取值說明
屬性值 屬性值說明
normal :默認值，默值爲1em（如果你的字號是px，其默認值爲你的font-size值）。
length: 此值用來設置列與列之間的距離，其可以使用px,em單位的任何整數值，但不能是負值。
（5)列表邊框column-rule
column-rule主要是用來定義列與列之間的邊框寬度、邊框樣式和邊框顏色。簡單點說，就有點類似於常用的border屬性。但column-rule是不佔用任何空間位置的，在列與列之間改變其寬度不會改變任何列的位置。
語法規則：

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>

取值說明：
屬性值 屬性值說明
column-rule-width :類似於border-width屬性，主要用來定義列邊框的寬度，其默認值爲“medium”，column-rule-width屬性接受任意浮點數，但不接收負值。但也像border-width屬性一樣，可以使用關鍵詞：medium、thick和thin。
column-rule-style :類似於border-style屬性，主要用來定義列邊框樣式，其默認值爲“none”。column-rule-style屬性值與border-style屬值相同，包括none(無）、hidden（隱藏）、dotted（點線）、dashed（虛線）、solid（實線）、double（雙線）、groove（雙線顏色深淺）、ridge（雙線顏色淺深）、inset（顏色深）、outset（顏色淺）。
column-rule-color :類似於border-color屬性，主要用來定義列邊框顏色，其默認值爲前景色color的值，使用時相當於border-color。column-rule-color接受所有的顏色。如果不希望顯示顏色，也可以將其設置爲transparent(透明色)
（6）跨列column-span
column-span主要用來定義一個分列元素中的子元素能跨列多少。column-width、column-count等屬性能讓一元素分成多列，不管裏面元素如何排放順序，他們都是從左向右的放置內容，但有時我們需要基中一段內容或一個標題不進行分列，也就是橫跨所有列，此時column-span就可以輕鬆實現，此屬性的語法如下。

column-span: none | all

取值說明
屬性值 屬性值說明
none :此值爲column-span的默認值，表示不跨越任何列。
all :這個值跟none值剛好相反，表示的是元素跨越所有列，並定位在列的Ｚ軸之上。

2.盒子模型
（1）W3C標準盒模型
外盒尺寸計算（元素空間尺寸）
element空間高度/寬度＝內容高度/寬度＋內距＋邊框＋外距
內盒尺寸計算（元素大小）
element高度/寬度＝內容高度/寬度＋內距＋邊框（height爲內容高度）
（2）IE傳統下盒模型
外盒尺寸計算（元素空間尺寸）
element空間高度/寬度＝內容高度/寬度＋外距（height/width包含了元素內容高度/寬度、邊框、內距）
內盒尺寸計算（元素大小）
element高度/寬度＝內容高度/寬度（height/width包含了元素內容高度/寬度、邊框、內距）
(3)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-7怪異模式），也就是說元素的寬度或高度等於元素內容的寬度或高度。從上面盒模型介紹可知，這裏的內容寬度或高度包含了元素的border、padding、內容的寬度或高度（此處的內容寬度或高度＝盒子的寬度或高度—邊框—內距）。
inherit :使元素繼承父元素的盒模型模式
（4）伸縮佈局盒模型Flexbox
Flexbox佈局常用於設計比較複雜的頁面，可以輕鬆的實現屏幕和瀏覽器窗口大小發生變化時保持元素的相對位置和大小不變，同時減少了依賴於浮動佈局實現元素位置的定義以及重置元素的大小。
Flexbox佈局在定義伸縮項目大小時伸縮容器會預留一些可用空間，讓你可以調節伸縮項目的相對大小和位置。例如，你可以確保伸縮容器中的多餘空間平均分配多個伸縮項目，當然，如果你的伸縮容器沒有足夠大的空間放置伸縮項目時，瀏覽器會根據一定的比例減少伸縮項目的大小，使其不溢出伸縮容器。綜合而言，Flexbox佈局功能主要具有以下幾點：
第一，屏幕和瀏覽器窗口大小發生改變也可以靈活調整佈局；
第二，可以指定伸縮項目沿着主軸或側軸按比例分配額外空間（伸縮容器額外空間），從而調整伸縮項目的大小；
第三，可以指定伸縮項目沿着主軸或側軸將伸縮容器額外空間，分配到伸縮項目之前、之後或之間；
第四，可以指定如何將垂直於元素佈局軸的額外空間分佈到該元素的周圍；
第五，可以控制元素在頁面上的佈局方向；
第六，可以按照不同於文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文檔流先後順序重排伸縮項目順序。
Flexbox規範版本衆多，瀏覽器對此語法支持度也各有不同，接下來的內容以最新語法版本爲例向大家展示：
1.創建一個flex容器
任何一個flexbox佈局的第一步是需要創建一個flex容器。爲此給元素設置display屬性的值爲flex。在Safari瀏覽器中，你依然需要添加前綴-webkit，

.flexcontainer{ display: -webkit-flex; display: flex; }

2.Flex項目顯示
Flex項目是Flex容器的子元素。他們沿着主要軸和橫軸定位。默認的是沿着水平軸排列一行。你可以通過flex-direction來改變主軸方向修改爲column，其默認值是row。

3.Flex項目列顯示
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }

4.Flex項目移動到頂部
如何將flex項目移動到頂部，取決於主軸的方向。如果它是垂直的方向通過align-items設置；如果它是水平的方向通過justify-content設置。
.flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }

5.Flex項目移到左邊
flex項目稱動到左邊或右邊也取決於主軸的方向。如果flex-direction設置爲row，設置justify-content控制方向；如果設置爲column，設置align-items控制方向。
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; }

6.Flex項目移動右邊
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; }

7.水平垂直居中
在Flexbox容器中製作水平垂直居中是微不足道的。設置justify-content或者align-items爲center。另外根據主軸的方向設置flex-direction爲row或column。
.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

8.Flex項目實現自動伸縮
您可以定義一個flex項目，如何相對於flex容器實現自動的伸縮。需要給每個flex項目設置flex屬性設置需要伸縮的值。
.bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; }

3.Media Queries
Media Queries是CSS3新增加的一個模塊功能，其最大的特色就是通過CSS3來查詢媒體，然後調用對應的樣式.
（1）媒體類型Media Type
通過媒體類型對不同的設備指定不同的樣式。
值 :設備類型
All :所有設備
Braille :盲人用點字法觸覺回饋設備
Embossed :盲文打印機
Handheld :便攜設備
Print :打印用紙或打印預覽視圖
Projection: 各種投影設備
Screen :電腦顯示器
Speech :語音或音頻合成器
Tv :電視機類型設備
Tty :使用固定密度字母柵格的媒介，比如電傳打字機和終端
（2）引用方法：
1》link

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

2>@import

@importurl(reset.css) screen;   

或

<head>
<style type="text/css">
    @importurl(style.css) all;
</style>
</head>

3》media媒體查詢
（1）在樣式文件中引用媒體類型：

@media screen {
   選擇器{/*你的樣式代碼寫在這裏…*/}
}

（2）使用@media引入媒體類型的方式是在標籤中的

<head>
<style type="text/css">
    @media screen{
    選擇器{/*你的樣式代碼寫在這裏…*/}
}
</style>
</head>

（3）使用方法
@media 媒體類型 and (媒體特性) {你的樣式}
1.》 最大寬度max-width
“max-width”是媒體特性中最常用的一個特性，其意思是指媒體類型小於或等於指定的寬度時，樣式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

2.》最小寬度min-width
媒體類型大於或等於指定寬度時，樣式生效。
3.》多個媒體特性使用

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

4.》設備屏幕的輸出寬度Device Width

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代碼指的是“iphone.css”樣式適用於最大設備寬度爲480px，比如說iPhone上的顯示，這裏的“max-device-width”所指的是設備的實際分辨率，也就是指可視面積分辨率。
5.》not
對後面的表達式執行取反操作

@media not print and (max-width: 1200px){樣式代碼}

上面代碼表示的是：樣式代碼將被使用在除打印設備和設備寬度小於1200px下所有設備中。
6》only
only用來指定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。
支持媒體特性的設備，正常調用樣式，此時就當only不存在；
不支持媒體特性但又支持媒體類型的設備，這樣就會不讀樣式，因爲其先會讀取only而不是screen；
不支持Media Queries的瀏覽器，不論是否支持only，樣式都不會被採用；

4.響應式設計Responsive設計
是精心提供各種設備都能瀏覽網頁的一種設計方法，RWD能讓你的網頁在不同的設備中展現不同的設計風格。
（1）
1.流體網格
流體網格是一個簡單的網格系統，這種網格設計參考了流體設計中的網格系統，將每個網格格子使用百分比單位來控制網格大小。這種網格系統最大的好處是讓你的網格大小隨時根據屏幕尺寸大小做出相對應的比例縮放。
2.彈性圖片
彈性圖片指的是不給圖片設置固定尺寸，而是根據流體網格進行縮放，用於適應各種網格的尺寸。而實現方法是比較簡單，一句代碼就能搞定的事情。
img {max-width:100%;}
爲每一個斷點提供不同的圖片，這是一個比較頭痛的事情，因爲Media Queries並不能改變圖片“src”的屬性值，那有沒有辦分法可以解決呢？可以參考一下下面的解決方法。使用background-image給元素使用背景圖片，顯示/隱藏父元素，給父元素使用不同的圖片，然後通過Media Queries來控制這些圖片顯示或隱藏。
來看一個斷點解決圖片自適應的例子。
<
img src=”image.jpg” data-src-600px=”image-600px.jpg” data-src-800px=”image-800px.jpg” alt=””
>
對應的CSS代碼：

@media (min-device-width:600px){
img[data-src-600px]{
  content: attr(data-src-600px,url);
  }
}
@media (min-device-width:800px){
  img[data-src-800px] {
  content:attr(data-src-800px,url);
  }
}

3.媒體查詢
媒體查詢在CSS3中得到了強大的擴展。使用這個屬性可以讓你的設計根據用戶終端設備適配對應的樣式。這也是響應式設計中最爲關鍵的。可以說Responsive設計離開了Medial Queries就失去了他生存的意義。簡單的說媒體查詢可以根據設備的尺寸，查詢出適配的樣式。Responsive設計最關注的就是：根據用戶的使用設備的當前寬度，你的Web頁面將加載一個備用的樣式，實現特定的頁面風格。
4.屏幕分辨率
屏幕分辨簡單點說就是用戶顯示器的分辨率，深一點說，屏幕分辨率指的是用戶使用的設備瀏覽您的Web頁面時的顯示屏幕的分辨率，比如說智能手機瀏覽器、移動電腦瀏覽器、平板電腦瀏覽器和桌面瀏覽器的分辨率。Responsive設計利用Media Queries屬性針對瀏覽器使用的分辨率來適配對應的CSS樣式。因此屏幕分辨率在Responsive設計中是一個很重要的東西，因爲只有知道Web頁面要在哪種分辨率下顯示何種效果，才能調用對應的樣式。
5.主要斷點
主要斷點，在Web開發中是一個新詞，但對於Responsive設計中是一個很重要的一部分。簡單的描述就是，設備寬度的臨界點。在Media Queries中，其中媒體特性“min-width”和“max-width”對應的屬性值就是響應式設計中的斷點值。簡單點說，就是使用主要斷點和次要斷點，創建媒體查詢的條件。而每個斷點會對應調用一個樣式文件（或者樣式代碼），如下圖所示：

上圖的style.css樣式文件運用在Web頁面中，但這個樣式文件包括了所有風格的樣式代碼，也就是說所有設備下顯示的風格都通過這個樣式文件下載下來。當然，在實際中還可以使用另一種方法，也就是在不同的斷點加載不同的樣式文件，如下圖所示。

上圖主要顯示的是主要斷點，主要斷點加載的不同樣式文件直接將影響Web的效果。除了主要斷點之外，爲了滿足更多效果時，還可以在這個基礎上添次要斷點。不過主要斷點和次要斷點增加之後，需要維護的樣式也相應的增加，成本也相對應的增加。因此在實際使用中，需要根據自身產品需求，決定斷點。
綜合下來，設置斷點應把握三個要點：滿足主要的斷點；有可能的話添加一些別的斷點；設置高於1024的桌面斷點。
（2）佈局技巧
在Responsive佈局中，可以毫無保留的丟棄：
第一， 儘量少用無關緊要的div；
第二，不要使用內聯元素（inline）；
第三，儘量少用JS或flash；
第四，丟棄沒用的絕對定位和浮動樣式；
第五，摒棄任何冗餘結構和不使用100%設置。
有舍纔有得，丟棄了一些對Responsive有影響的東東，那麼有哪些東東能幫助Responsive確定更好的佈局呢？
第一，使用HTML5 Doctype和相關指南；
第二，重置好你的樣式（reset.css）；
第三，一個簡單的有語義的核心佈局；
第四，給重要的網頁元素使用簡單的技巧，比如導航菜單之類元素。
（3）meta標籤

<meta name="viewport" content=""/>

腳本下載地址：
media-queries.js(http://code.google.com/p/css3-mediaqueries-js/)
respond.js(https://github.com/scottjehl/Respond)

<!—[if lt IE9]>
      <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
 ​<![endif]>

大家可以把這些樣式加到你的樣式文件中，或者單獨創建一個名爲“responsive.css”文件，並在相應的條件中寫上你的樣式，讓他適合你的設計需求：
1.1024px顯屏

@media screen and (max-width : 1024px) {                    
/* 樣式寫在這裏 */          
}     

2.800px顯屏

@media screen and (max-width : 800px) {              
/* 樣式寫在這裏 */          
}     

3.640px顯屏

@media screen and (max-width : 640px) {              
/* 樣式寫在這*/            
}     

4.iPad橫板顯屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {              
/* 樣式寫在這 */            
}     

5.iPad豎板顯屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {         
/* 樣式寫在這 */            
}     

6.iPhone 和 Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {              
/* 樣式寫在這 */            
}     

現在有關於這方面的運用也是相當的成熟，twitter的Bootstrap第二版本中就加上了這方面的運用。大家可以對比一下：

@media (max-width: 480px) { ... }              
@media (max-width: 768px) { ... }              
@media (min-width: 768px) and (max-width: 980px) { ... }      
 @media (min-width: 1200px) { .. }

5.用戶界面及其他重要屬性
（1）自由縮放resize
允許用戶通過拖動的方式修改元素的尺寸來改變元素的大小。

resize:none | both | horizontal | vertical | inherit

取值說明：
屬性值 :取值說明
none :用戶不能拖動元素修改尺寸大小。
both :用戶可以拖動元素，同時修改元素的寬度和高度
horizontal :用戶可以拖動元素，僅可以修改元素的寬度，但不能修改元素的高度。
vertical :用戶可以拖動元素，僅可以修改元素的高度，但不能修改元素的寬度。
inherit :繼承父元素的resize屬性值。
(2)外輪廓屬性outline
外輪廓outline在頁面中呈現的效果和邊框border呈現的效果極其相似，但和元素邊框border完全不同，外輪廓線不佔用網頁佈局空間，不一定是矩形，外輪廓是屬於一種動態樣式，只有元素獲取到焦點或者被激活時呈現。

outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit

屬性值 :屬性值說明
outline-color :定義輪廓線的顏色，屬性值爲CSS中定義的顏色值。在實際應用中，可以將此參數省略，省略時此參數的默認值爲黑色。
outline-style :定義輪廓線的樣式，屬性爲CSS中定義線的樣式。在實際應用中，可以將此參數省略，省略時此參數的默認值爲none，省略後不對該輪廓線進行任何繪製。
outline-width :定義輪廓線的寬度，屬性值可以爲一個寬度值。在實際應用中，可以將此參數省略，省略時此參數的默認值爲medium，表示繪製中等寬度的輪廓線。
outline-offset :定義輪廓邊框的偏移位置的數值，此值可以取負數值。當此參數的值爲正數值，表示輪廓邊框向外偏離多少個像素；當此參數的值爲負數值，表示輪廓邊框向內偏移多少個像素。
inherit :元素繼承父元素的outline效果。
(3)CSS生成內容
通過CSS3的僞類“:before”，“:after”和CSS3的僞元素“::before”、“::after”來實現，其關鍵是依靠CSS3中的“content”屬性來實現。不過這個屬性對於img和input元素不起作用。
content配合CSS的僞類或者僞元素，一般可以做以下四件事情：
功能 :功能說明
none :不生成任何內容
attr :插入標籤屬性值
url :使用指定的絕對或相對地址插入一個外部資源（圖像，聲頻，視頻或瀏覽器支持的其他任何資源）
string :插入字符串

.clearfix:before,
.clearfix:after {
content:””;
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}

假設我們有一個元素：

<a href="##" title="我是一個title屬性值，我插在你的後面">我是元素</a>

可以通過”:after”和”content:attr(title)”將元素的”title”值插入到元素內容“我是元素”之後：

a:after {
content:attr(title);
color:#f00;
}

效果如下：