《CSS3祕籍》第12-17章

第十二章 CSS佈局簡介

一、網頁佈局的類型

1）固定寬度

2）流式

3）響應式Web設計

二、CSS佈局的策略

1）從內容入手

2）Mobile First

第十三章 構建基於浮動的佈局

一、簡單的兩列浮動佈局的設計步驟

1）在每一列都包在一個帶有ID或class屬性的<div>標籤裏面

2）把側邊欄<div>浮到右側或左側：浮動元素的HTML必須處在要包圍它的元素的HTML以前

3）給浮動的側邊欄設定一個寬度

4）給正文添加一個left/right margin

二、在非浮動的外圍標籤如<div>中浮動一個或多個元素時，可能會發生溢出。解決辦法以下：

1）在外圍標籤如<div>的底部添加一個清除元素：<div> <br class=」clear」/> </div>  br.clear{clear:both;}，問題在於會產生額外的HTML代碼

2）浮動外圍元素：必定要在浮動容器後面的任何元素中添加一個clear屬性，確保浮動元素落到容器的下方

3）利用overflow:hidden：若是浮動容器中有人格絕對定位的元素，可能會顯示不出來

4）使用Micro Clear Fix：在外部樣式表中設置.clear:after{content:」 「; display:table; clear:both;} .clear{zoom:1;}

三、多列布局：在外圍標籤如<div>中設置.multicol{column-count:3; column:1em; column-rule:1px dotted black;}，IE9及其更早的版本不支持多列，須要給Chrome和Safari以及Firefox使用供應商前綴 

四、box-sizing

1)content-box：包含width屬性值

2)padding-box：包含left/right padding以及width屬性值的總和

3)border-box：包含left/right border、left/right padding以及width屬性值的總和

Firefox須要使用供應商前綴

第十四章 響應式Web設計

一、使瀏覽器的屏幕與手機的顯示屏幕相匹配

1）<meta name=」Viewport」 content=」width=device-width」>

2）@viewport{width:device-width;}

二、媒體查詢的策略

1）調整列

2）彈性寬度：對於手機和平板電腦最好將<div>的寬度設爲auto或100%

3）縮緊空白空間：縮小margin和padding值

4）調整字號

5）修改導航菜單

6）在手持設備上隱藏內容

7）使用背景圖片

三、設置斷點：一般會給3個不一樣的斷點建立3組媒體查詢，一個是針對智能手機（小於480px，<link href=」css/small.css」 rel=」stylesheet」 media=」(max-width:480px)」>），另外一個針對平板電腦（大於480px，小於768px，<link href=」css/medium.css」 rel=」stylesheet」 media=」(min-width:481px)and(max-width:768px)」>），還有一個針對桌面型顯示器（大於768px，<link href=」css/large.css」 rel=」stylesheet」 media=」(min-width:769px)」>）

四、將媒體查詢包含在樣式表中

1）使用@import指令：@import url(css/small.css) (max-width:480px);

2）在樣式中嵌入媒體查詢：@media (max-width:480px){.style{}}

五、流式圖片：設置max-width：100%，刪除height和width屬性

第十五章 定位網頁上的元素

一、絕對定位：absolute，以pixel、em或percentage爲單位設定元素的左右上下方的位置爲其進行定位

二、相對定位：relative，相對於它在HTML流中的當前位置進行定位的，其餘的網頁元素不會佔據相對定位元素原來在HTML中所處的位置

三、固定定位：fixed

四、靜態定位：static，默認

五、定位的注意事項

1）若是一個定位是絕對定位，且它又不在其餘任何設定了absolute、relative或fixed定位的標籤裏面，那它就是相對於瀏覽器的窗口進行定位

2）若是一個標籤處在另外一個設定了absolute、relative或fixed定位的標籤裏面，那它就是相對於另外一個元素的邊沿進行定位

六、堆疊元素：z-index，值越大，元素就會出如今越接近堆疊頂部的地方，值爲負，元素就出如今其父元素或者其任意一個祖先元素之下。

七、隱藏部分網頁

1）visibility:hidden/visible

2）display:none，會在該元素原來所處的位置上留下空白，可是對於已經脫離頁面流的絕對定位元素而言則否則

3）opacity:0/1

第十六章 設計打印頁面的CSS技術

一、Media樣式表

1）all樣式：適用於每一種設備

2）screen樣式：只適用於顯示器

3）print樣式：只適用於打印網頁

4）其餘樣式：braille、embossed、handheld、projection、speech、tty和tv

二、添加Media樣式表

1）給外部樣式表指定媒體類型：<link rel=」stylesheet」 href=」print.css」 media=」print」/>

2）在樣式表中指定媒體類型：@media print{.style{}}

三、在打印中顯示連接：a[href^=」http://」]:after{content:」(「attr(href)」)」}

四、隱藏不須要的頁面區域：在主樣式表中建立一個類樣式，並將display屬性值設爲none；而後在打印樣式表對應的類樣式中將display屬性值設爲block

五、給打印添加分頁符：要使某一元素顯示在打印頁面的最頂部，則要設置page-break-before:always;要使某一元素顯示在打印頁面的最底部，則要設置page-break-after:always

第十七章 改正CSS設計習慣

一、添加註釋：/* */

二、組織樣式和樣式表：樣式命名要清晰，要根據用途而不是外觀來命名樣式，不要根據位置命名，不要使用含義模糊的名稱

三、使用多個類能夠節省時間

四、將樣式分組：把網頁上相關部位所採用的樣式集中在一塊兒，把用途相關的樣式集中起來，，用註釋分隔樣式組

五、消除瀏覽器的樣式衝突：刪除padding和margin，使用統一的字號、確保讓HTML5元素以塊級元素顯示，設置統一的行高，刪除表格的邊框線、建立外觀一致的單元格，刪除連接圖片周圍的邊框線，設置統一的列表縮進方式和列表符號，刪除摘要材料的引號

六、使用派生選擇器

七、給Internet Explorer嘗試不一樣的CSS

<!-- [if IE 7]>

<link href=」IE7_styles.css」 rel=」stylesheet」>

<![endif]-->

（<!-- [if IE 8]>

<style>

@import url(」IE8_styles.css」 )

</style>

<![endif]-->）