CSS 權威指南 CSS實戰手冊 第四版（閱讀筆記）

前言：

　　對於程序員,學習是無止境的,知識淘換很是快,可以快速穩固掌握一門新技術,是一個程序員應該具有的素質.這裏將分析本人一點點不成熟的心得.

　　瞭解一門語言,瞭解它的概念很是重要,可是一些優秀的設計思想須要細心和大量實踐才能慢慢參悟,在這以前須要作的是可以運用它來開發,那麼瞭解一些基礎特性很是有必要,一般這些特性是須要經驗積累,從各類坑中累計出來,可是還有一種看似很笨卻頗有效的學習方法.那就是將別人的經驗記錄下來,有事沒事都拿出來看看,集合開發中的經驗,這會很是有效.

 

流式佈局  http://blog.html.it/layoutgala/index.html

更多模板http://templated.co

佈局工具http://www.pagecolumn.com

重置樣式http://Nicolas.github.io/normalize.css |  https://github.com/necolas/normalize.css/

 

尋找 web 字體

http://www.theleagueofmoveabletype.com 由幾個設計師發起，第一批提供自制的免費字體供別人在網站中使用的站點之一

http://www.exljbris.com 提供經典的免費字體

http://openfontlibrary.org 提供了400多個免費字體，並且均可以在網站中使用

http://www.fontsquirrel.com 這是web字體領域具備里程碑意義的網站，提供字體數量超過一千個。除此以外，Font Squirrel 還提供了在線工具，能把TrueType或OpenType字體轉換成其餘格式，包括 EOT\SVG和WOFF，以及WOFF2

http://google.com/fonts 這是Google提供的一個簡單且免費的web字體服務。

 

編寫HTML時兼顧CSS

    簡單的HTML對搜索引擎友好。不能在HTML中直接控制網頁的外觀，只能吧HTML看成結構化內容的工具，內容的外觀由CSS負責。

    IE8不支持H5

    不要使用table佈局網頁，CSS能實現相同的效果，並簡單許多

    不要濫用BR進行段落換行，瀏覽器會插入間隔，有時並不須要這種行爲

    HTML遵照必定的規則，例如

使用字體

　　font-family: Arial, Helvetica, sans-serif Web瀏覽器首先會檢查電腦有沒有安裝Arial字體，若是沒有堅持Helvetica以此類推

　　襯線字體適合顯式大段文本，大多數人以爲襯線（字形筆畫末端的裝飾細節）能有效的把一個字母引向後一個字母，利於閱讀

　　常見的：Times、Times New Roman、Georgia

　　無襯線字體一般顯式標題與中文，外觀簡潔明瞭

　　常見的：Arial、Helvetica、Verdana

使用Web字體

　　@font-face指令，告訴瀏覽器字體的名稱和下載地址

　　@font-face{

　　　　font-family:"League Gothic";

　　　　src:url('fonts/League)Gothic-web font.woff');

　　}

　　font-family屬性，指定Web字體的方式與指定電腦中已安裝字體的方式同樣

修改字號

　　經常使用字號單位px、關鍵字、em、rem、%

　　使用像素 px

　　這種值與瀏覽器設置徹底無關，在不一樣電腦與瀏覽器顯式的文字大小一致，最爲經常使用

　　使用關鍵字、百分比、em

　　這三種設定字號的方式，其工做原理是在瀏覽器預設字號的基礎上增大或減小，也就是說，若是樣式表中沒有設定字號，Web瀏覽器會使用預設的字號，大多數瀏覽器非標題裏的文本字號是16像素，這是基準字號

　　關鍵字 CSS提供了七個字號關鍵字，這些關鍵字在基準字號的基礎上調整字號大小

　　xx-small、x-small、small、medium、large、x-large、xx-large

　　百分比 百分數與關鍵字同樣，根據瀏覽器基準字號調整文本大小，不過精確度更高，若是基號是16px那麼100%就是16px

　　em 與百分比原理相同，em一詞源於紙張印刷業 1em等價於100% 0.5em 等於 50%

　　rem root em簡稱，字號的大小基於根元素而定（html）大多數狀況基於基準字號而定

六

字符間距和單詞間距

　　letter-spacing、word-specing 調整字符和單詞之間的距離。增長間距讓標題看起來更穩重莊嚴。若是想減小字符間距，要使用負值。

爲文本添加陰影

　　text-shadow 屬性須要四個信息：更想偏移值（陰影距離文本左邊或右邊多遠），縱向偏移值（陰影距離文本上邊或下邊多遠），陰影的模糊成都和投影的顏色

　　添加多個投影在一個投影后加上逗號

　　IE9及以前版本不支持投影

 調整行間距

　　line-height 屬性能讓段落中的行稀疏或緊湊。瀏覽器通常默認把 line-height 屬性的值設置爲 120%，所以，比這個值小的百分數讓各行更緊湊（上部），比這個值大的百分數讓各行更稀疏（下部）

　　設置行高時也可使用 px 、 em 、 % 做爲單位。通常來講 % 或 em 比 px 好，由於前兩個單位會隨着font-size屬性的值而變化。

　　瀏覽器肯定行與行之間的距離時，會從行高中減去字號大小。相減以後獲得的結果叫行距。

　　只使用數字設定行間距，數字後面沒有單位（如em或px）。遇到這種值時，瀏覽器會拿它乘以字號，肯定行高是多少

　　設定行高時最好別用em和%這兩單位，而是直接使用數值

　　

 

選擇器

*選擇器分組

     多個元素以逗號分隔能夠同時應用這些樣式。

*連接選擇器

     選擇器並排中間無空格和逗號，那麼該樣式僅應用於同時存在該選擇器的元素好比(#div.div)

*屬性選擇器（XML文檔中特別有用）

     簡單屬性選擇器div[class](表示擁有class屬性的div)，指定屬性值選擇器

     div[class="div"](表示class屬性等於div的元素) 具體屬性選擇器，必須與值徹底匹配，此處考慮到先後有空格時，就沒法匹配

     img[alt] 這個特例更適用於測試，而不是設計

     img[alt][id][class]屬性選擇器連接表示時，選擇知足因此規則的元素

     div[class~=value]部分匹配選擇器，僅知足部分條件就可選擇該元素，可應用於全部屬性

*子串匹配屬性選擇器（最低至IE7提供對該系列屬性支持）

類型                                        描述

[foo^="bar"]                          選擇foo屬性值以「bar」開頭的全部元素

[foo$="bar"]                           選擇foo屬性值以「bar」結尾的全部元素

[foo*="bar"]                           選擇foo屬性值中包含字符串「bar」的全部元素

 

*特定屬性選擇器

*[lang|="en"]{color:white;}     該選擇器匹配以en開頭或者等於en的全部元素，這種熟悉選擇器最多見的用途是匹配語言值。

 

*兄弟選擇器

h1 + p{margin-top:0;}           該選擇器匹配h1標籤後面全部段落元素

 

*僞類選擇器

a:link                                     全部未訪問過的錨

a:visited                                 全部已訪問過的錨

:first-child                              選擇元素的第一個子元素

:lang()                                   lang相似熟悉選擇器的|=選擇器。僞類比屬性選擇器稍微健壯一些，在須要語言特定的樣式時，大多數狀況下僞類是更好的選擇。

 

 

*動態僞類

僞類名                                    描述

:focus                                    指示當前擁有的輸入焦點的元素

:hover                                    指示鼠標指針停留在那個元素上

:active                                    指示被用戶輸入激活的元素

     僞類動態元素順序很重要link-visited-focus-hover-active

 

*結合僞類                              

a:link:hover{color:red;}                                 鼠標未點擊的錨連接，當鼠標懸停時，該元素將應用紅色字體    

a:visited:hover:lang(de){color:maroon;}         鼠標點擊過的錨連接，當鼠標移動上去，該元素是以

 

*僞元素選擇器

p:first-letter{color:red;}             這個規則會影響元素中第一個字母。

p:first-line                                這個規則會影響元素中第一個文本行。

全部僞類元素都必須放在出現該僞元素的選擇器的最後面。好比p:first-line em就是不合法的。

 

總結：

     經過根據文檔的語言來使用選擇器，能夠建立豐富的CSS規則。咱們能夠構建只應用少數元素的簡單規則，對大量相似元素應用樣式也一樣簡單。因爲能夠對選擇器和規則分組，這使樣式表至關簡潔，並且分紅靈活，相應縮小文件的大小，縮短下載時間。

 

二：結構和層疊

特殊性

     可使用多種不一樣的方法選擇元素。開發中可能同一個元素能夠用多個規則來選擇，每一個規則都有本身的選擇器。這種狀況特殊性高者勝出。

     加0，1，0，0。選擇器給定的ID屬性值。

     加0，0，1，0。選擇器給定的類屬性值/屬性選擇或僞類。

     加0，0，0，1。選擇器給定的元素和僞類元素。

     加1，0，0，0。內聯樣式。

     加0，0，0，0。通配選擇器。

     

重要性

     p.dark{color:#333 !important; background: white !important;}

     !important 老是放在聲明的最後，即分號以前，而且每一個屬性只能單獨設置。

     !important 沒有特殊性的特殊性值，與非重要聲明分開考慮。若是重要聲明與非重要聲明衝突，勝出的老是重要聲明。

 

繼承

     某元素被聲明某值，這個值會沿樹向下傳播到後代元素，並一直繼續，知道再沒有後代元素繼承這個值爲止。值絕對不會向上傳播。

     HTML中，對於向上傳播有一特例：應用到BODY元素的背景樣式能夠傳遞到HTML元素（html是文檔的根元素），相應地能夠定義其畫圖。

     通常來講，影響元素頁面中所在的位置的屬性，以及元素內邊距、外邊距、背景、邊框都不會被繼承

     繼承的值沒有特殊性，甚至連0特殊性都沒有

     Web瀏覽器渲染標籤時會繼承各自內部樣式

     一般不使用瀏覽器內部樣式，這樣網站在不一樣瀏覽器會有不一樣表現

     

層疊

     若是特殊性相等的兩個規則同時應用到同一個元素，最終樣式應用取決於靠後的樣式，越靠後權重越大。

     衝突中的聲明經過這個層疊過程排序，並由此肯定最終的文檔表示。這個過程的核心是選擇器及相關聲明的特殊性，以及繼承機制。

     忽略特指度 !important

     有選擇的覆蓋重疊樣式，可選擇行內樣式或者在某文件以後連接覆蓋樣式

      避免使用ID選擇器，由於特製度太高不易覆蓋

 

三：文本屬性

文本縮進

     p{text-indent:3em;} 這個規則會使全部段落的首行縮進3EM

字體間隔

     p{letter-spacing:1}這個規則會使全部段落文本兩端對齊

行高

     line-height

     line-height:1em屬性繼承自父類時，屬性值是根據父類計算，致使子類不能正常顯示，一般解決方案是指定一個數，由它設置縮放因子(line-height:1)。

垂直對齊

     vertical-align:sub;下標對齊

     vertical-align:super:上標對齊

     vartical-aling:middle;元素居中對齊

字體間距

     word-spacing:0.5em;詞組間隔會以空格爲分割線增長文本間空格距離

文本轉換

      text-transform

文本裝飾

      text-decoration

 

定位

     relative:元素框偏移某個距離。元素仍保持未定位前的形狀，它本來所佔的空間仍然保留。

     absolute:元素框從文檔流徹底刪除。

     fixed:元素框表現相似於將position設置爲absolute，不過包含塊是視窗自己。

 

 

 透明度

filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity: 0.5;

 opacity: 0.5;

 

 

第七章  基本視覺格式化

 

 

基本框

     CSS假設每一個元素都有一個或多個矩形框，各個元素框中心有個內容區，這個內容區周圍有可選的內邊距、邊框、外邊距，爲何是可選，由於它們的高度能夠設置爲0

     內容區的背景（某種顏色或平鋪圖像）也會應用到內邊距

     外邊距一般是透明的，所以能夠看到父元素的背景

     內邊距不能是負值，可是外邊距能夠

     邊框的顏色若是沒有設定，那麼將取元素內容區的前景色（若是一個段落的文本是白色，那麼該段落的全部邊框都是白色，除非顯式聲明瞭另外一種邊框色）

     邊框與內容和內邊距有相同的背景

     邊框的寬度絕對不能爲負

     不一樣類型的元素（塊級元素、行內元素、浮動元素、定位元素）格式化時存在着差異，分別有各自不一樣的表現

 

包含塊

     每一個元素都相對於其包含塊擺放，包含塊就是元素的"佈局上下文"

 

正常流

     傳統HTML文檔中的文本佈局就是從上到下從左向右顯式

 

非替換元素

     若是元素的內容包含在文檔中，則稱之爲非替換元素

 

替換元素

     指用做爲其餘內容佔位符的一個元素（IMG標籤、INPUT標籤等）

      改變替換元素的寬度：元素的高度會隨之增長，若是一個替換元素的width不一樣於其固有寬度，那麼height值也會隨之比例變化，除非height顯式設置特定值，反之height也同樣

 

塊級元素

     段落、標題DIV之類的元素，這些元素在正常流中，會在其框以前和以後生成「換行」

     

行內元素

     span之類的元素，不會在以前或以後生成「行分隔符」

 

根元素

     爲文檔樹頂端的元素，HTML文檔中，就是元素html

 

水平格式化——塊級元素

      CSS中元素的寬度是從左內邊距到右內邊距的距離

     正常流中塊級元素框的水平部分總和就等於父元素的width

 

水平屬性——塊級元素

     水平格式化的「7大屬性」margin-left border-left padding-left width padding-right border-right margin-right這些屬性與塊級框的水平佈局有關

     水平格式化的「7大屬性」只有三個屬性能夠設置auto值（margin-left、margin-right、width），其他都必須設置特定的值

     若是設置width、margin-left、margin-right中的某個值爲auto，餘下兩個屬性指定特定的值，那麼設置auto的屬性會肯定所須要的長度來等於父類元素寬度

     若是3個屬性都設置特定的值，即沒有任何一個屬性設置爲auto那麼，用戶代理將把右外邊距重置爲auto值「填補」所需的距離

     若是設置margin-left與margin-right的值爲auto而且顯式設置 width 那麼元素會設置爲相等的長度，所以元素在父元素中居中

     若是margin-left或者margin-right與width同時存在auto值，那麼外邊距取值會被減爲0

     經過指定負外邊距獲得更寬的子元素，由於外邊距能夠爲負數，而且「7大屬性」相加總和必定是父元素的width

     若是爲了知足內容元素總和比父類元素還寬，而且設置固定的margin-right值，因爲元素水平屬性過度受限時有一個規則，要求重置右外邊距，這也會獲得一個負右外邊距

 

垂直格式化——塊級元素

     一個元素的默認高度由其內容決定

     高度還會受到內容寬度的影響，段落越窄，相應就會越高，以便容納其中全部的內聯內容

     CSS中，能夠對任何塊級元素設置顯式高度

     若是假設高度大於顯示內容所需高度，多餘高度會產生一個視覺效果，好像有額外的內邊距同樣

     若是架設高度小於顯式內容所需高度，瀏覽器會提供某種方法來查看全部內容，而不是增長元素框的高度，也許是加一個滾動條

     

垂直屬性——塊級元素

     垂直格式化的「7大屬性」margin-top border-top padding-top height padding-bottom border-bottom margin-bottom這些屬性與塊級框的垂直佈局有關

     垂直格式化的「7大屬性」只有三個屬性能夠設置auto值（margin-top、margin-bottom、height），其他都必須設置特定的值

     垂直格式化的「7大屬性」的值等於元素包含塊的 height ，這每每是塊級元素父元素的 height 值（由於塊級元素的父元素幾乎都是塊級元素）

     若是 正常流中一個塊級元素的margin-top或margin-bottom設置爲auto，它會自動計算爲0，所以它沒有外邊距，同時也不能垂直居中

     height 必須設置爲 auto 或者是某種類型的非負值

     若是一個塊級正常流元素的 height 設置爲一個百分數，這個值則是包含塊的 height 的一個百分數

垂直屬性——塊級元素—— auto 高度

     若是塊級正常流元素設置 height: auto 顯示時其高度將剛好足以包含其內聯內容的行盒，會在段落設置一個邊框，並認爲沒有內邊距，下邊框在文本最後一行下面，上邊框在文本第一行的上面

     若是塊級正常流元素的高度設置爲 auto ，並且只有塊級子元素，其默認高度將是 從最高塊級子元素的外邊框邊界到最低塊級元素外邊框邊界之間的距離，所以子元素的外邊距會「超出」包含這些子元素的元素（這種行爲在下面進行解釋）。不過，若是塊級元素有上內邊距或下內邊距，或者有上邊框或者下邊框，其高度則是從最高子元素上外邊距邊界到最低子元素的下外邊距邊界之間的距離

     在上例中， 將邊框改成內邊距，對DIV高度的做用仍是同樣：一樣把段落的外邊距包含在內

 

合併垂直外邊距

     垂直格式化的另外一個重要方面是垂直相鄰外邊距的合併，這種合併行爲只應用於外邊距。

     兩個外邊距中較小的一個會被較大的一個合併

 

基本的術語和概念

     匿名文本 是指全部未包含在行內元素中的字符串，空格也是匿名文本的一部分，由於空格與其餘字符同樣都是正常的字符

     EM框   em框在字體中定義，也稱爲字符框。實際的字形可能比EM框更高或更矮，font-size 的值肯定了各個EM框的高度

     內容區 內容區能夠是元素中各字符的em 框串在一塊兒構成的框，也能夠是由元素中字符字形描述的框。 在替換元素中，內容區就是元素的固有高度再加上可能有的外邊距、邊框或內邊距

     行間距 行間距是 font-size 值和 line-height 值之差。這個差實際上要分爲兩半，分別應用到內容區的頂部和底部。行間距只應用於非替換元素

     行內框 這個框經過向內容區增長行間距來描述。對於非替換元素，元素行內框的高度恰好等於 line-height 的值。對於替換元素，元素行內框的高度則剛好等於內容區的高度，由於行間距不該用到替換元素

     行框     這是包含該行中出現的行內框的最高點和最低點的最小框。換句話說行框的上邊界要位於最高行框的上邊界，而行框的底邊要放在最低行內框的下邊界

 

• 內容區相似於一個塊級元素的內容框
• 行內元素的背景應用於內容區及全部內邊距
• 行內元素的邊框要包圍內容區及全部內邊距和邊框
• 非替換元素的內邊距、邊框和外邊距對行內元素或其生成的框沒有垂直效果，也就是說，它們不會影響元素行內框的高度（也不會影響包含該元素的行框的高度）
• 替換元素的外邊距和邊框確實會影響該元素行內框的高度，相應的，也可能影響包含該元素的行框的高度

 

行內元素

     行內框在行中根據其vertical-align 屬性值垂直對齊

 

行內格式化

     行的高度（或行框的高度）由其組成元素和其它內容（如文本）的高度肯定

     line-height實際上隻影響行內元素和其它行內內容，而不影響塊級元素

     只需爲塊級元素建立 line- height 規則，沒必要顯式的爲其全部行內元素聲明 line- height

     塊級元素上聲明 line-height 會爲該塊級元素的內容設置一個最小行框高度

     行內元素的邊框邊界由font-size而不是line-height控制

     內邊距、外邊距和邊框均可以應用於行內非替換元素，這些方面不會影響行框的高度

     能夠爲行內元素指定內邊距，這會把邊框從文本自己拉開

     外邊距不會應用到行內非替換元素的頂端和底端，它們不影響行框的高度，不過，行內元素的兩端則是另外一回事

     替換元素沒有本身的基線

     爲行內替換元素增長內邊距、邊框和外邊距會增大其行內框

     負外邊距是使行內替換元素擠入其餘行的惟一辦法

 

Vertical-align

• top將元素行內框的頂端與包含該元素的行框的頂端對齊
• bottom將元素行內框的底端與包含該元素的行框的底端對齊
• text-top將元素行內框的頂端與父元素內容區的頂端對齊
• text-bottom將元素行內框的底端與父元素內容區的底端對齊
• middle將元素行內框的垂直中心與父元素基線上0.5ex處的一點對齊
• super將元素的內容區和行內框上移。上移的距離未指定，可能因用戶代理的不一樣而不一樣
• sub與super相同，只不過元素會下移而不是上移

 

管理line-height

     經過爲元素設置一個 line-height，就提升了行框的總高度，line-height 使用值 1em ，元素的 line-height 將設置爲與font-size大小相等

 

縮放行高

     設置 line-height的最好辦法是使用一個原始數字值。由於這個數會成爲縮放因子，而該因子是一個繼承值而非計算值

     若是上述方法不但願生成太多行間距，能夠爲他另外指定 line-height值爲1.0得到與font-size徹底相等

 

行內塊元素 inline-block

• 是一個混合產物，塊級元素和行內元素的混合
• 行內塊元素做爲一個行內框與其餘元素和內容相關
• 它就像圖像同樣放在一個問本行中
• 行內塊元素會做爲替換元素放在行中
• 行內塊元素的底端默認地位於文本行的基線上，並且內部沒有行分隔符
• 行內塊元素內部會像塊級元素同樣設置內容的格式
• 若是增長height屬性，比周圍內容高，這些屬性會使行高增長

 

第八章 內邊距、邊框和外邊距

height

• 應用於塊級元素和替換元素
• 無繼承性
• 百分數相對於包含塊的 height 計算

margin

• 應用於全部元素
• 無繼承性
• 百分數相對於包含塊的 width 計算

 

第十章 浮動與定位

float

• 無繼承性
• 應用於全部元素
• 會以某種方式將浮動元素從文檔的正常流中刪除，不過它仍是會影響佈局
• 一個元素浮動時，其餘內容會「環繞」該元素
• 浮動元素周圍的外邊距不會合並，若是其它元素與此圖像相鄰（這表示水平相鄰和垂直相鄰），並且這些元素也有外邊距，那麼這些外邊距不會與浮動圖像的外邊距合併
• 元素比做有塑料邊的紙片，圖像周圍的塑料邊（外邊距）絕對不會與其餘浮動元素周圍的塑料邊重疊
• 浮動一個非替換元素（包括塊級元素），則必須爲該元素聲明一個width，不然瀏覽器可能使用最小值（也許CSS新規範有新的規定）
• 要獲得正常的非浮動行爲，必須有 none 雖然默認值就是不浮動
• 浮動元素會生成一個塊級框，不論這個元素自己是什麼（也許是行內元素）
• 浮動元素的左（或右）外邊界不能超出其包含塊的左（或右）內邊界
• 兩個或者多個浮動元素向一個方向浮動時，並不會覆蓋，依次擺放
• 左浮動元素的右邊界不會在其右邊右浮動元素的左外邊界的右邊
• 一個浮動元素的頂端不能比其父元素的內頂端更高
• 浮動元素的頂端也不可能比以前出現的浮動元素的頂端更高
• 若是浮動元素周圍有其它元素，那個元素的背景色和邊框會延伸到浮動元素的後面

 

position

• relative 元素框偏移某個距離，元素仍保持其未定位前的形狀，他本來所佔的空間仍保留
• absolute 元素框從文檔流徹底刪除，並相對於其包含塊定位，元素原先正常文檔流所佔空間會關閉，元素定位後生成一個塊級框
• static 元素框正常生成，塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中
• fixed 元素框的表現類將position設置爲absolute，不過包含塊是視窗自己
• 「根元素」的包含塊由用戶代理創建，根元素就是html有些瀏覽器會使用body做根元素，多數瀏覽器初始包含塊是一個視窗大小矩形
• 非根元素，若是其position是relative或static，包含塊則由最近的塊級框、表單元格或行內塊祖先框的內容邊界構成
• position值是absolute,包含塊設置爲最近的position值不是static的祖先元素（能夠是任何類型）
• • 若是這個祖先是塊級元素，包含塊則設置爲該元素的內邊距邊界，就是由邊框界定的區域
  • 若是這個祖先是行內元素，包含塊則設置爲該祖先元素的內容邊界
  • 若是沒有祖先，元素的包含塊定義爲初始包含塊
• 元素能夠定位到其包含塊的外面，也就是說明「包含塊」一詞實際上應該是「定位上下文」
• top 描述了定位元素上外邊距邊界離其包含塊的頂端多遠。若是 top 爲正值，會把定位元素的上外邊距邊界下移，若爲負值，則會把定位元素的上外邊距移到其包含塊的頂端之上
• 偏移定位元素的外邊距邊界時，帶來的影響是元素的全部一切（包括外邊距、邊框、內邊距和內容）都會在定位的過程當中移動
• 能夠爲定位元素設置外邊距、邊框、內邊距和內容，兵包含在偏移屬性定義的區域內
• 偏移屬性定義了距離包含塊相應邊的偏移
• 若是使用top、right、bottom、left來描述元素4個邊的放置位置，那麼元素的高度和寬度將由這些偏移隱含肯定
• 若是使用top、right、bottom、left來描述元素4個邊的放置位置，那麼元素的高度和寬度對佈局沒有任何做用，除非向元素增長了外邊距、邊框、內邊距
• 定位元素的 width 和 height 的默認值是 auto

 

流式佈局和固定寬度佈局

• 浮動三欄佈局，設置其寬度爲百分數
• 設置max-width控制最大寬度
• CSS樣式命名以及屬性以用途爲主，好比相一樣式的多組標籤能夠用羣組選擇器，贊成控制方便管理

 

影響式佈局

• 相關書籍 responsive web design

 

響應式佈局基礎

•      移動瀏覽器不會顯示100%大的頁面。若是這麼作，大多數高於屏幕的像素將放不下，一次只能看到頁面的一部分。其實手機瀏覽器會縮小網頁，以便在屏幕中能放得下，可是響應式網頁就是爲了改善網頁在手機中的外觀，因此不但願被縮小，致使文本過小而難以閱讀
• 簡單方法就能覆蓋瀏覽器的這種行爲 <meta name="viewport" content=" width=device-width" > viewport指代瀏覽器的顯示區域，device把瀏覽器設爲手機寬度
• 圖片響應佈局 img { max-width:100% } 這個樣式把圖像的最大寬度設爲容器寬度的100%（這裏max-width與width有何區別？）解釋：max-width權重大於width 當遇到width干擾時不會受影響
• 去掉浮動導航欄轉化行內塊級元素是居中顯示這些按鈕的惟一方式

使用Skeleton柵格系統

• Skeleton提供基礎的柵格樣式外還有額外的CSS，用於裝飾按鈕、表單和表格
• 未完待續...