css權威指南筆記

1. 替換元素和非替換元素

替換元素：用來替換元素內容的部分並不是由文檔內容直接表示，用做其餘內容的佔位符（img, 表單元素，embed等嵌入元素）

非替換元素：元素的內容內容包含在文檔流中，大部分元素都是替換元素。

替換元素和非替換行內元素的區別：替換元素能夠設置width、height、margin和padding；非替換行內元素不能夠設置width、heigt、垂直margin和padding，能夠設置水平margin和padding。

2. 候選樣式表

將link標籤的rel屬性設置爲alternate stylesheet，設置title屬性，若是瀏覽器支持候選樣式表，title屬性值會顯示在候選樣式表列表中，只有當用戶選擇該樣式表時，該樣式表纔會生效。

<link rel="alternate stylesheet" title="common" href="css/common.css"/>

3.@import

@import url media(@import ‘main.css’ screen),能夠放在style標籤裏和css文件裏，可是必須放在全部樣式的前面。

4.多類選擇器

.warning.red 選擇同時包含這些類名的選擇器

5.選擇器優先級（權重）

特殊性：內聯樣式（1000），id（100），類、屬性、僞類（10），元素、僞元素（1），*（0），繼承樣式無特殊性；特殊性爲0大於無特殊性。

重要性（！important）：讀者的重要性大於創做人員的重要性

權重：讀者的重要性>創做人員的重要性>創做人員的正常申明>創做人員的正常申明>用戶代理聲明

6.em和px的關係

1em=font-size聲明的px數(font-size: 16px,則1em = 16px)

7. font

font-size的做用是爲給定字體的em框提供一個大小，而不能保證明際顯示的字符就是這種大小，一般顯示的字符會比em框小，以便每一個em框可以容納下全部的字符（1個em框是一個字符的容器，font-size相對大小的縮放因子是向上1.5向下0.66，絕對大小的縮放因子是1.2）

縮寫（font: font-style font-variant font-weight font-size/line-height font-family，縮寫必須包含font-size和font-family，前面屬性順序不定）

百分數（Font-size相對於父元素計算、line-height相對於font-size計算）

8. line-box, inline-box, em盒

行盒的內容默認讓全部inline-box字體的底部、匿名inline-box字體的底部、替換元素的底部延行框的基線對其；對inline-box和替換元素用vertical-align會移動inline-box和替換元素，所以有可能影響line-box的高度。可替換元素的行內框高度就是元素的高度+padding+margin+border，行間距不會應用到可替換元素；不可替換元素垂直margin和padding和border不影響行內框的高度。

9. white-space

處理空格和換行符

pre: 保留空格和換行符，不容許自動換行

nowrap: 合併空格忽略換行符，不容許自動換行

pre-line: 合併空格保留換行符，容許自動換行

pre-wrap: 保留空格保留換行符，容許自動換行

normal: 合併空格忽略換行符， 容許自動換行

10. 元素框

只有width、height、margin能夠設置爲auto。

Width+border+margin+padding = 父元素的width

a.       若是width、margin-left、margin-right都不爲auto，則會忽略margin-right，強制將margin-right設爲auto，以補全父元素的width

b.       若是width、margin-left、margin-right中只有一個爲auto，則這個值會自動補全，以適應父元素的width。

c.       若是width不爲auto，margin-left、margin-right爲auto，則margin-left、margin-right會設置爲相等的值，此時元素居中顯示

d.       若是width和margin-left、margin-right之一爲auto，則margin-left、margin-right爲auto的會強制置爲0，width自動設爲所需的值，以補全父元素的width

e.       若是width、margin-left、margin-right都爲auto，則margin-left、margin-right會強制置爲0，width等於父元素的width

f.        若是margin-top、margin-bottom爲auto，則都會重置爲0

11. 垂直外邊距合併

a. 兩個相鄰元素的垂直外邊距合併，若是兩個都爲整數則取較大的做爲垂直margin；若是一正一負則正數減去負數的絕對值做爲垂直margin；若是都爲負數，則取絕對值較大的margin做爲垂直margin

b. 三個個相鄰元素的垂直外邊距合併（一個負元素包含一個子元素和一個相鄰的元素垂直外邊距合併），若是三個都爲正數則取較大的正數做爲垂直外邊距；若是一正兩負，則正數減去負數絕對值的最大值做爲垂直外邊距；若是兩正一負，則正的最大值減去負的絕對值做爲垂直外邊距，若是三個都是負數，則取絕對值最大的margin做爲垂直外邊距。

C．四個元素垂直外邊距合併，以此類推，若兩正兩負，則取正的最大值減去負的最大絕對值做爲垂直外邊距；若一正三負，則取正值減去負的最大絕對值做爲垂直外邊距；若一負三正，則取最大正值減去負的絕對值做爲垂直外邊距；若全爲正值，則取最大值做爲垂直外邊距；若全爲負值，則取最大絕對值的margin做爲垂直外邊距。

d. 若父元素有border或者padding，則父元素和子元素不會出現垂直外邊距合併。

e. 只有父元素的height爲auto時，子元素和父元素的margin-bottom纔有可能合併。

10. body和html是惟一的兩個能夠向上繼承css屬性的元素，這就是爲何平時body的高度爲0，咱們設置body的background-color時，整個屏幕都會有顏色的緣由，background-color會向上繼承到html的包含塊即初始包含塊，而初始包含塊爲整個可視區域。

11. margin-top、margin-bottom、padding-top、padding-bottom爲百分數時，是相對於父元素的寬度而不是高度。

12. 只要設置了border-style，border-width就默認爲medium，邊框顏色默認是內容的前景色。

13. 浮動

浮動的本質是文字環繞浮動元素，浮動元素不能比行框頂端高，浮動元素外邊距不會合並。

a．  行內框與一個浮動元素重疊時，其內容、邊框、背景都在該浮動元素之上顯示。

b．  塊框與一個浮動元素重疊時，其邊框、背景都在該浮動元素之下顯示，內容在該浮動元素之上顯示。

c．  浮動元素不能超過行框的頂部。

d．  浮動元素會包含住全部的後代浮動元素。

e．  Clear只能用於塊級元素不能用於inline和inline-block。

14. 定位

定位元素width+padding+margin+border+left+right=包含塊的width

a.       除bottom外，top，left，right爲auto時表示該定位元素放置在沒定位以前的位置。

b.       width、left、right爲auto，則放置在沒定位前的位置，width爲剛好能包圍住其內容，而餘下的寬度則由right從新計算填充；若是left和right，margin-left，margin-right一個爲auto，那麼這個auto會從新計算以適應包含塊的width。

c.       若是左右margin爲auto，left，width，right不爲auto，此時左右外邊距會設置爲相等的值[(包含塊width – left –right – width）/2]，若設置left與right相等，此時會水平居中。

d.       若是上下margin爲auto，top，bottom，height不爲auto，此時上下外邊距會設置爲相等的值[(包含塊height – top –bottom – height）/2]，若設置top與bottom相等，此時會垂直居中。

e.       若是左右margin，left，width，right都不爲auto，而此時的和又與包含塊的width不相等，此時會忽略right，從新計算以適應包含塊的width。

f.        若是左右margin，top，height，bottom都不爲auto，而此時的和又與包含塊的height不相等，此時會忽略bottom，從新計算以適應包含塊的height。

g.       絕對定位的可替換元素（圖像等），只設置了width或者height，那麼height或者width會按照原始比例繪製。

15. content

a．content生成的都是inline-box（內聯元素）

b．content： 字符串|url|counter|attr|open-quote|close-quote|no-open-quote|no-close-quote

c．quotes、open-quote、close-quote

p{quotes：‘a’ ‘b’ ‘c’ ‘d’}  p:before{content: open-quote}  p:after{content: close-quote}  p>span:before{content: open-quote}  p>span: after {content: close -quote}

d. counter, counters, counter-reset, counter-increment

.reset {
    counter-reset: wangxiaoer;
 }
 .counter:before {
    counter-increment: wangxiaoer;
    content: counters(wangxiaoer, '-') '. ';
    font-family: arial black;
 }

Counter嵌套時，遇到counter-reset會重置

 

 

14. HTML XHTML

a.  XHTML標籤必須小寫，HTML標籤能夠大寫

b.  屬性都要小寫

c.  XHTML標籤必須嚴格嵌套，HTML標籤沒必要嚴格嵌套

d．XHTML標籤必須封閉，HTML標籤比必定封閉

e．XHTML屬性值必須用引號引發來，HTML不必定用引號

f．XHTML屬性值必須用完整形式，HTML不必定用完整形式

g．XHTML中應該區份內容標記和結構標記(例如不準將div嵌入p)