you 逗號 visit content 下載 傳播 適用於 給定 輸入

前言：

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

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

流式布局 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/ 編寫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）大多數情況基於基準字號而定，

選擇器 *選擇器分組 多個元素以逗號分隔可以同時應用這些樣式。 *鏈接選擇器 選擇器並排中間無空格和逗號，那麽該樣式僅應用於同時存在該選擇器的元素比如(#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，用於裝飾按鈕、表單和表格
• 未完待續...

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