摘要：如內(nèi)可以包含塊級元素與塊級元素并列內(nèi)聯(lián)元素與內(nèi)聯(lián)元素并列。而對于使用脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會無視它。

css概念

　　CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網(wǎng)頁數(shù)據(jù)的表現(xiàn)，可以使網(wǎng)頁的表現(xiàn)與數(shù)據(jù)內(nèi)容分離。

css引入方式

1. 行內(nèi)式

　　行內(nèi)式是在標(biāo)記的style屬性中設(shè)定CSS樣式。這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢，不推薦使用。

hello yuan

2.嵌入式

　　嵌入式是將CSS樣式集中寫在網(wǎng)頁的標(biāo)簽對的標(biāo)簽對中。格式如下：

[object Object]

3.鏈接式

　　將一個.css文件引入到HTML文件中

[object Object]

4.導(dǎo)入式

 　　將一個獨(dú)立的.css文件引入HTML文件中，導(dǎo)入式使用CSS規(guī)則引入外部CSS文件，　

　　注意：

      導(dǎo)入式會在整個網(wǎng)頁裝載完后再裝載CSS文件，因此這就導(dǎo)致了一個問題，如果網(wǎng)頁比較大則會兒出現(xiàn)先顯示無樣式的頁面，閃爍一下之后，再出現(xiàn)網(wǎng)頁的樣式。這是導(dǎo)入式固有的一個缺　　陷。使用鏈接式時與導(dǎo)入式不同的是它會以網(wǎng)頁文件主體裝載前裝載CSS文件，因此顯示出來的網(wǎng)頁從一開始就是帶樣式的效果的，它不會象導(dǎo)入式那樣先顯示無樣式的網(wǎng)頁，然后再顯示　　有樣式的網(wǎng)頁，這是鏈接式的優(yōu)點(diǎn)。

css選擇器

　　“選擇器”指明了{(lán)}中的“樣式”的作用對象，也就是“樣式”作用于網(wǎng)頁中的哪些元素

1 基礎(chǔ)選擇器

＊ ：  通用元素選擇器，匹配任何元素                    * { margin:0; padding:0; }
E  ：  標(biāo)簽選擇器，匹配所有使用E標(biāo)簽的元素               p { color:green; }
.info和E.info: class選擇器，匹配所有class屬性中包含info的元素   .info { background:#ff0; }    p.info { background:blue; }
#info和E#info  id選擇器，匹配所有id屬性等于footer的元素         #info { background:#ff0; }   p#info { background:#ff0; }

 2 組合選擇器

E,F         多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔         div,p { color:#f00; }
E F         后代元素選擇器，匹配所有屬于E元素后代的F元素，E和F之間用空格分隔    li a { font-weight:bold;
E > F       子元素選擇器，匹配所有E元素的子元素F                            div > p { color:#f00; }
E + F       毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F                  div + p { color:#f00; }

　　注意嵌套規(guī)則：

1. 塊級元素可以包含內(nèi)聯(lián)元素或某些塊級元素，但內(nèi)聯(lián)元素不能包含塊級元素，它只能包含其它內(nèi)聯(lián)元素。
2. 有幾個特殊的塊級元素只能包含內(nèi)聯(lián)元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
3. li內(nèi)可以包含div
4. 塊級元素與塊級元素并列、內(nèi)聯(lián)元素與內(nèi)聯(lián)元素并列。

3 屬性選擇器

E[att]         匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略，比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
E[att=val]     匹配所有att屬性等于“val”的E元素                                 div[class=”error”] { color:#f00; }
E[att~=val]    匹配所有att屬性具有多個空格分隔的值、其中一個值等于“val”的E元素      td[class~=”name”] { color:#f00; }
E[attr^=val]    匹配屬性值以指定值開頭的每個元素                     div[class^="test"]{background:#ffff00;}
E[attr$=val]    匹配屬性值以指定值結(jié)尾的每個元素                     div[class$="test"]{background:#ffff00;}
E[attr*=val]    匹配屬性值中包含指定值的每個元素                     div[class*="test"]{background:#ffff00;}

4 偽類(Pseudo-classes)

　　CSS偽類是用來給選擇器添加一些特殊效果。

　　anchor偽類：專用于控制鏈接的顯示效果

a:link（沒有接觸過的鏈接）,用于定義了鏈接的常規(guī)狀態(tài)。
a:hover（鼠標(biāo)放在鏈接上的狀態(tài)）,用于產(chǎn)生視覺效果。
a:visited（訪問過的鏈接）,用于閱讀文章，能清楚的判斷已經(jīng)訪問過的鏈接。
a:active（在鏈接上按下鼠標(biāo)時的狀態(tài)）,用于表現(xiàn)鼠標(biāo)按下時的鏈接狀態(tài)。
偽類選擇器 : 偽類指的是標(biāo)簽的不同狀態(tài):
        a ==> 點(diǎn)過狀態(tài) 沒有點(diǎn)過的狀態(tài) 鼠標(biāo)懸浮狀態(tài) 激活狀態(tài)
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標(biāo)移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標(biāo)簽:偽類名稱{ css代碼; }

hello-world

 　　before after偽類 ：

:before    p:before       在每個

5 css優(yōu)先級和繼承

　　CSS優(yōu)先級:

　　所謂CSS優(yōu)先級，即是指CSS樣式在瀏覽器中被解析的先后順序。

樣式表中的特殊性描述了不同規(guī)則的相對權(quán)重，它的基本規(guī)則是：
      1 內(nèi)聯(lián)樣式表的權(quán)值最高       style=""-------------------1000；
　　 2 統(tǒng)計選擇符中的ID屬性個數(shù)。    #id    －－－－－－－－－－－－－100
　　3 統(tǒng)計選擇符中的CLASS屬性個數(shù)。 .class  －－－－－－－－－－－－－10
 4 統(tǒng)計選擇符中的HTML標(biāo)簽名個數(shù)。     p     －－－－－－－－－－－－－-1

 　　按這些規(guī)則將數(shù)字符串逐位相加，就得到最終的權(quán)重，然后在比較取舍時按照從左到右的順序逐位比較。

　　CSS的繼承性:       繼承是CSS的一個主要特征，它是依賴于祖先-后代的關(guān)系的。繼承是一種機(jī)制，它允許樣式不僅可以應(yīng)用于某個特定的元素，還可以應(yīng)用于它的后代。例如一個BODY定義了的顏色值也會　　應(yīng)用到段落的文本中。

body{color:red;}

 　　這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權(quán)重是非常低的，是比普通元素的權(quán)重還要低的0。

p{color:green}

　　發(fā)現(xiàn)只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。由此可見：任何顯示申明的規(guī)則都可以覆蓋其繼承樣式?！?/p>

      此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

div{
  border:1px solid #222
}

 　　附加說明:

1、文內(nèi)的樣式優(yōu)先級為1,0,0,0，所以始終高于外部定義。這里文內(nèi)樣式指形如<div brush:html;gutter:true;"="">border-style: solid;
border-color: chartreuse; 
border-width: 20px;
簡寫：border: 30px rebeccapurple solid;

2  字體屬性

ont-size: 20px/50%/larger
font-family:Lucida Bright
font-weight: lighter/bold/border/

3  背景屬性

background-color: cornflowerblue
background-image: url(1.jpg);
background-repeat: no-repeat;(repeat:平鋪滿)
background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom)
      簡寫：

4  文本屬性

font-size: 10px;
text-align: center;   橫向排列
line-height: 200px;   文本行高 通俗的講，文字高度加上文字上下的空白區(qū)域的高度 50%:基于字體大小的百分比
vertical-align:－4px  設(shè)置元素內(nèi)容的垂直對齊方式 ,只對行內(nèi)元素有效，對塊級元素?zé)o效

text-indent: 150px;   首行縮進(jìn)
letter-spacing: 10px;
word-spacing: 20px;
text-transform: capitalize;

5   邊框?qū)傩?/h2>

border-style: solid;
border-color: chartreuse;
border-width: 20px;
簡寫：border: 30px rebeccapurple solid;

6   列表屬性

ul,ol{   list-style: decimal-leading-zero;
         list-style: none; 
         list-style: circle;
         list-style: upper-alpha;
         list-style: disc; }

7  dispaly屬性

none
block
inline

　　display:inline-block可做列表布局，其中的類似于圖片間的間隙小bug可以通過如下設(shè)置解決：

#outer{
            border: 3px dashed;
            word-spacing: -5px;
        }

8  外邊距和內(nèi)邊

• margin:            用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達(dá)到相互隔開的目的。
• padding:           用于控制內(nèi)容與邊框之間的距離；   
• Border(邊框)      圍繞在內(nèi)邊距和內(nèi)容外的邊框。
• Content(內(nèi)容)    盒子的內(nèi)容，顯示文本和圖像。

　　元素的寬度和高度:

　　重要: 當(dāng)您指定一個CSS元素的寬度和高度屬性時，你只是設(shè)置內(nèi)容區(qū)域的寬度和高度。要知道，完全大小的元素，你還必須添加填充，邊框和邊距。

margin:10px 5px 15px 20px;-----------上 右 下 左
margin:10px 5px 15px;----------------上 右左 下
margin:10px 5px;---------------------上下  右左
margin:10px;    ---------------------上右下左

　　思考1:

      邊框在默認(rèn)情況下會定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框，這是因?yàn)閎ody本身也是一個盒子（外層還有html），在默認(rèn)情況下， body距離html會有若干像素　　的margin，具體數(shù)值因各個瀏覽器不盡相同，所以body中　　的盒子不會緊貼瀏覽器窗口的邊框了，為了驗(yàn)證這一點(diǎn)，加上：

body{
    border: 1px solid;
    background-color: cadetblue;
}

　　>>>>解決方法：

body{
    margin: 0;
}

　　思考2：

      margin collapse（邊界塌陷或者說邊界重疊）

      外邊距的重疊只產(chǎn)生在普通流文檔的上下外邊距之間，這個看起來有點(diǎn)奇怪的規(guī)則，其實(shí)有其現(xiàn)實(shí)意義。設(shè)想，當(dāng)我們上下排列一系列規(guī)則的塊級元素（如段落P）時，那么塊元素之間因?yàn)椤　⊥膺吘嘀丿B的存在，段落之間就不會產(chǎn)生雙倍的距離。又比如停車場

      1兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin里最大值作為顯示值

      2父子div：如果 父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個標(biāo)簽包括border，padding，inline content中的其中一個，然后按此div 　　進(jìn)行margin；

[object Object]

　　解決方法：

1: border:1px solid transparent
2:  padding:1px
3: over-flow:hidden;

 float屬性

block元素在文檔流中的排列方式

• block元素通常被現(xiàn)實(shí)為獨(dú)立的一塊，獨(dú)占一行；
• 多個block元素會各自新起一行，默認(rèn)block元素寬度自動填滿其父元素寬度；
• block元素可以設(shè)置width、height、margin、padding屬性；

inline元素在文檔流中的排列方式

• inline元素不會獨(dú)占一行，多個相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化；
• inline元素設(shè)置width、height屬性無效；
• 水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果；
• 豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產(chǎn)生邊距效果。  
• 常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
• 常見的內(nèi)聯(lián)元素有span、a、strong、em、label、input、select、textarea、img、br等

文檔流

• 指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。
• 脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當(dāng)做脫離文檔流的元素不存在而進(jìn)行定位。
• 只有絕對定位absolute和浮動float才會脫離文檔流。

部分無視和完全無視的區(qū)別

　　需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內(nèi)的文本依然會為這個元素讓出位置，環(huán)繞在周圍(可以說是部分無視)。而對于使用absolute position脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會無視它。(可以　　說是完全無視)

浮動的表現(xiàn)

      定義：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框?yàn)橹埂Ｓ捎诟涌虿辉谖臋n的普通流中，所以文檔的普通流中的浮動框之后的塊框表現(xiàn)得就像浮動框不存在一樣。（注意這里是塊框而不是內(nèi)聯(lián)元素；浮動框只對它后面的元素造成影響）

　　注意 當(dāng)初float被設(shè)計的時候就是用來完成文本環(huán)繞的效果，所以文本不會被擋住，這是float的特性，即float是一種不徹底的脫離文檔流方式。無論多么復(fù)雜的布局，其基本出發(fā)點(diǎn)均是:  “如何在一行顯示多個div元素”。

　　現(xiàn)象1:

      假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標(biāo)準(zhǔn)流中的元素，那么A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的框之后的block元素元素會認(rèn)為這個框不存在，但其中的文本依然會為這個元素讓出位置。 浮動的框之后的inline元素，會為這個框空出位置，然后按順序排列。

　　現(xiàn)象2:

(1)左右結(jié)構(gòu)div盒子重疊現(xiàn)象，一般是由于相鄰兩個DIV一個使用浮動一個沒有使用浮動。如上面的例1：相鄰的兩個盒子box2向左浮動、box3未浮動。一個使用浮動一個沒有導(dǎo)致DIV不是在同個“平面”上，但內(nèi)容不會照成覆蓋現(xiàn)象，只有DIV形成覆蓋現(xiàn)象。

解決方法：要么都不使用浮動；要么都使用float浮動；要么對沒有使用float浮動的DIV設(shè)置margin樣式。

(2)上下結(jié)構(gòu)div盒子重疊現(xiàn)象

[object Object]

　　例子如上：.container和box3的布局是上下結(jié)構(gòu)，上圖發(fā)現(xiàn)box3跑到了上面，與.container產(chǎn)生了重疊，但文本內(nèi)容沒有發(fā)生覆蓋，只有div發(fā)生覆蓋現(xiàn)象。這個原因是因?yàn)榈谝粋€大盒子里　　的子元素使用了浮動，脫離了文檔流，導(dǎo)致.container沒有被撐開。box3認(rèn)為.container沒有高度（未被撐開），因此跑上去了。

　　解決方法：

　　1、要么給.container設(shè)置固定高度，一般情況下文字內(nèi)容不確定多少就不能設(shè)置固定高度，所以一般不能設(shè)置“.container”高度(當(dāng)然能確定內(nèi)容多高，這種情況下“.container是可以設(shè)置一　　個高度即可解決覆蓋問題。

　　2、要么清除浮動。

　　清除浮動：

　　在非IE瀏覽器（如Firefox）下，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到　　容器外面而影響（甚至破壞）布局的現(xiàn)象。這個現(xiàn)象叫浮動溢出，為了防止這個現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理，就叫CSS清除浮動。

clear語法：
clear : none | left | right | both

取值：
none : 默認(rèn)值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象

但是需要注意的是：clear屬性只會對自身起作用，而不會影響其他元素。如果一個元素的右側(cè)有一浮動對象，而這個元素設(shè)置了不允許右邊有浮動對象，即clear：right，則這個元素會自動下移一格，達(dá)到本元素右邊沒有浮動對象的目的。

 　　方法1（推薦）

.clearfix:after {             <----在類名為“clearfix”的元素內(nèi)最后面加入內(nèi)容； 
content: ".";                 <----內(nèi)容為“.”就是一個英文的句號而已。也可以不寫。 
display: block;               <----加入的這個元素轉(zhuǎn)換為塊級元素。 
clear: both;                  <----清除左右兩邊浮動。 
visibility: hidden;           <----可見度設(shè)為隱藏。注意它和display:none;是有區(qū)別的。visibility:hidden;仍然占據(jù)空間，只是看不到而已； 
line-height: 0;               <----行高為0； 
height: 0;                    <----高度為0； 
font-size:0;                  <----字體大小為0； 
} 
.clearfix { *zoom:1;}         <----這是針對于IE6的，因?yàn)镮E6不支持:after偽類，這個神奇的zoom:1讓IE6的元素可以清除浮動來包裹內(nèi)部元素。

 　　整段代碼就相當(dāng)于在浮動元素后面跟了個寬高為0的空div，然后設(shè)定它c(diǎn)lear:both來達(dá)到清除浮動的效果。之所以用它，是因?yàn)?，你不必在html文件中寫入大量無意義的空標(biāo)簽，又能清除浮動。
　　話說回來，你這段代碼真是個累贅啊，這樣寫不利于維護(hù)。
　　只要寫一個.clearfix就行了，然后在需要清浮動的元素中 添加clearfix類名就好了。

 　　方法2:

[object Object]

overflow:hidden;

 　　overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明確設(shè)定包　　含容器高度的情況下，它要計算內(nèi)容的全部高度才能確定在什么位置hidden，這樣浮動元素的高度就要被計算進(jìn)去。這樣包含容器就會被撐開，清除浮動。

position定位

1 static

　　static 默認(rèn)值，無定位，不能當(dāng)作絕對定位的參照物，并且設(shè)置標(biāo)簽對象的left、top等值是不起作用的的。

2  position: relative／absolute

      relative 相對定位

　　相對定位是相對于該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設(shè)定了元素的相對定位以及偏移值，元素還占有著原來的位置，即占據(jù)文檔流空間。對象遵　　循正常文檔流，但將依據(jù)top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。

　　注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。

     absolute 絕對定位

      定義：設(shè)置為絕對定位的元素框從文檔流完全刪除，并相對于最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊（即body元素）。元素原先　　在正常文檔流中所占的空間會關(guān)閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

　　重點(diǎn)：如果父級設(shè)置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點(diǎn)進(jìn)行定位。這樣能很好的解決自適應(yīng)網(wǎng)站的標(biāo)簽偏離問題，即父級為自適應(yīng)的，那我　　子元素就設(shè)置position:absolute;父元素設(shè)置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。

      另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進(jìn)行絕對定位。而其層疊通過z-index屬性定義。

　　總結(jié)：參照物用相對定位，子元素用絕對定位，并且保證相對定位參照物不會偏移即可。

3  position:fixed

      fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點(diǎn)進(jìn)行定位，當(dāng)出現(xiàn)滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性 定義。 注意點(diǎn)： 一個元素　　若設(shè)置了 position:absolute | fixed; 則該元素就不能設(shè)置float。這 是一個常識性的知識點(diǎn)，因?yàn)檫@是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因?yàn)樗尽　∷嫉目臻g仍然占據(jù)文檔流。

      在理論上，被設(shè)置為fixed的元素會被定位于瀏覽器窗口的一個指定坐標(biāo)，不論窗口是否滾動，它都會固定在這個位置。

4 僅使用margin屬性布局絕對定位元素

　　此情況，margin-bottom 和margin-right的值不再對文檔流中的元素產(chǎn)生影響，因?yàn)樵撛匾呀?jīng)脫離了文檔流。另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏　　移參照物。  
　　圖中，使用margin屬性布局相對定位元素。
　　層級關(guān)系為：

　<div &mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;="" position:relative;="" 　　<div&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;-沒有設(shè)置為定位元素，不是參照物="" 　　<div&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;-沒有設(shè)置為定位元素，不是參照物="" 　　<div="" box1="" box2="" &mdash;&mdash;&ndash;position:absolute;="" margin-top:50px;="" margin-left:120px;="" box3=""