CSS:層疊樣式表
(英文全稱：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。 CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。 作用
結(jié)構(gòu)與樣式分離的方式，便于后期維護(hù)與改版 可以用多套樣式，使網(wǎng)頁(yè)有任意樣式切換的效果 使頁(yè)面載入得更快，降低服務(wù)器的成本 等等… CSS入門
CSS選擇器
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> BaiDu
</ title> </ head> < body> < p> http://www.baidu.com
</ p> < p> 百度
</ p> < p> 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> </ body> </ html>
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> BaiDu
</ title> < styletype = " text/css" > p { background-color : red; font-size : 40px; } .p1 { font-family : 隸書(shū); } </ style> </ head> < body> < p> http://www.baidu.com
</ p> < pclass = " p1" > 百度
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> </ body> </ html>
背景樣式
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> BaiDu
</ title> < styletype = " text/css" > p { background-color : red; font-size : 40px; } .p1 { font-family : 隸書(shū); } body { background-color : yellow; background-image : url ( "img/baidu.jpg" ) ; background-repeat : no-repeat; background-attachment : fixed; background-position : top center; } </ style> </ head> < body> < p> http://www.baidu.com
</ p> < pclass = " p1" > 百度
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> </ body> </ html>
外部樣式表
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> BaiDu
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < p> http://www.baidu.com
</ p> < pclass = " p1" > 百度
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> </ body> </ html> index.css
p { background-color : red
; font-size : 40px
;
}
.p1 { font-family : 隸書(shū)
;
} body { background-color : yellow
; background-image : url ( "img/baidu.jpg" ) ; background-repeat : no-repeat
; background-attachment : fixed
; background-position : top center
;
}
文本類樣式
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> BaiDu
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < p> http://www.baidu.com
</ p> < pclass = " p1" > 百度
</ p> < p> 1 2 3 4 5 6 7 8 9
</ p> < p> A B C D E F G H I
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> </ body> </ html> p { color : green
; direction : rtl
; letter-spacing : 20px
; line-height : 40px
; text-align : justify
; text-shadow : 5px 5px 1px red
; text-transform : capitalize
; text-indent : 2em
; }
字體類樣式
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> BaiDu
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < p> http://www.baidu.com
</ p> < pclass = " p1" > 百度
</ p> < p> 1 2 3 4 5 6 7 8 9
</ p> < p> A B C D E F G H I
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> </ body> </ html> p { letter-spacing : 20px
; line-height : 40px
; text-transform : capitalize
; text-indent : 2em
; font-style : italic
; font-weight : bold
; font-size : 30px
; font-family : 隸書(shū)
; }
列表樣式
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> BaiDu
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < p> http://www.baidu.com
</ p> < pclass = " p1" > 百度
</ p> < p> 1 2 3 4 5 6 7 8 9
</ p> < p> A B C D E F G H I
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < ul> < li> AAAAAAA
</ li> < li> BBBBBBB
</ li> < li> CCCCCCC
</ li> < li> DDDDDDD
</ li> < li> EEEEEEE
</ li> </ ul> < ol> < li> AAAAAAA
</ li> < li> BBBBBBB
</ li> < li> CCCCCCC
</ li> < li> DDDDDDD
</ li> < li> EEEEEEE
</ li> </ ol> </ body> </ html> p { text-transform : uppercase
; text-indent : 2em
; font-style : italic
; font-weight : bold
; font-size : 30px
; font-family : 隸書(shū)
; } ul { list-style-type : circle
; list-style-position : inside
; list-style-image : url ( img/1.gif) ; } ol { list-style-type : lower-latin
; list-style : inside
url ( img/1.gif) ;
}
偽類的樣式設(shè)置
狀態(tài)偽類
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> 百度
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < p> http://www.baidu.com
</ p> < p> 百度
</ p> < ahref = " #" > 偽類
</ a> < label> 用戶名
</ label> </ body> </ html> a:link { color : red
;
} a:visited { color : green
;
} a:hover { color : yellow
; font-size : 50px
;
} a:active { color : blue
;
} label:hover { color : yellow
; font-size : 50px
;
}
結(jié)構(gòu)偽類
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> 百度
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < p> http://www.baidu.com
</ p> < p> 百度
</ p> < p> 淘寶
</ p> </ body> </ html> p:first-child { background-color : red
;
}
偽元素選擇器
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> 百度
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < h1> 好好學(xué)習(xí)，天天向上
</ h1> < p> http://www.baidu.com
</ p> < p> 百度
</ p> < p> 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < tableborder = " 1" width = " 400px" > < tr> < td> A
</ td> < td> A
</ td> < td> A
</ td> < td> A
</ td> </ tr> < tr> < td> B
</ td> < td> B
</ td> < td> B
</ td> < td> B
</ td> </ tr> < tr> < td> C
</ td> < td> C
</ td> < td> C
</ td> < td> C
</ td> </ tr> </ table> </ body> </ html> body::before { content : "body，h1，p任何一個(gè)能獨(dú)立區(qū)分的標(biāo)簽都能使用 before在最前面添加文字 " ;
}
body::after { content : "body，h1，p任何一個(gè)能獨(dú)立區(qū)分的標(biāo)簽都能使用 after在最后面添加文字" ;
} h1::before { content : "開(kāi)始>>>>: " ;
}
h1::after { content : ":<<<<結(jié)束 " ;
} p::before { content : "開(kāi)始>>>>: " ;
}
p::after { content : ":<<<<結(jié)束 " ;
} p::first-line { background : yellow
;
} p::first-letter { font-size : 30px
;
} p::selection { background-color : red
}
其他選擇器
CSS浮動(dòng)
DIV樣式設(shè)置
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> 百度
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < h1> 好好學(xué)習(xí)，天天向上
</ h1> < p> http://www.baidu.com
</ p> < p> 百度
</ p> < divid = " div1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ div> </ body> </ html> index.css
#div1 { background-color : yellow
; width : 150px
; height : 150px
; }
#div1 { background-color : yellow
; width : 150px
; height : 150px
; top : 200px
; left : 200px
; position : absolute
; overflow : scroll
;
}
#div1 { background-color : yellow
; width : 150px
; height : 150px
; top : 200px
; left : 200px
; position : absolute
; overflow : scroll
; outline : dashed
;
}
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> 百度
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < h1> 好好學(xué)習(xí)，天天向上
</ h1> < p> http://www.baidu.com
</ p> < p> 百度
</ p> < divid = " div1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ div> < divid = div2> < label> 姓名:
</ label> < inputtype = " text" > </ div> </ body> </ html> #div1 { background-color : yellow
; width : 150px
; height : 150px
; top : 200px
; left : 200px
; position : absolute
; overflow : scroll
; outline : dashed
;
}
#div2 { top : 400px
; left : 200px
; position : absolute
;
} input { border : none
; border-bottom : solid
; outline : none
;
}
盒子模型
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> 百度
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < divid = " div1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ div> < divid = " div2" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過(guò)千億的中文網(wǎng)頁(yè)數(shù)據(jù)庫(kù)，可以瞬間找到相關(guān)的搜索結(jié)果。
</ div> </ body> </ html> #div1 { width : 200px
; height : 200px
; overflow : hidden
;
}
#div1 { background-color : yellow
; margin-top : 50px
; margin-left : 50px
; margin-bottom : 50px
; } #div2 { background-color : blue
;
} * { margin : 50px 50px 50px 50px
;
}
浮動(dòng)
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> DIV
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < divid = " div1" > DIV1
</ div> < divid = " div2" > DIV2
</ div> < divid = " div3" > DIV3
</ div> </ body> </ html> div { width : 200px
; height : 200px
; text-align : center
; line-height : 200px
;
} #div1 { background-color : yellow
;
}
#div2 { background-color : red
;
}
#div3 { background-color : blue
;
}
文檔流依次從上往下顯示
div { width : 200px
; height : 200px
; text-align : center
; line-height : 200px
;
} #div1 { background-color : yellow
; float : left
;
}
#div2 { background-color : red
; width : 300px
;
}
#div3 { background-color : blue
; width : 400px
;
}
float初衷，包裹，崩潰
崩潰
正常的情況，不會(huì)出現(xiàn)崩潰的情況
（1）一個(gè)空白的div中，如果不進(jìn)行任何尺寸的設(shè)定，并且div里面沒(méi)有任何內(nèi)容時(shí)，div是沒(méi)有高度的：
（2）當(dāng)在div中添加內(nèi)容時(shí)候：div中內(nèi)容的高度就是div的高度；即div中的內(nèi)容會(huì)把div給撐起來(lái)；
（3）總結(jié)：元素的寬度默認(rèn)占滿父一級(jí)元素；；；；元素的高度由子元素?fù)纹饋?lái)。
2.出現(xiàn)了崩潰：浮動(dòng)的子元素不能撐起非浮動(dòng)的父元素
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> DIV
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < divid = " div1" > < divid = " div2" > </ div> </ div> </ body> </ html> #div1 { border : 1px solid black
; background-color : yellow
; } #div2 { background-color : red
; height : 230px
; width : 450px
;
}
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> DIV
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < divid = " div1" > < divid = " div2" > </ div> < divid = " div3" > </ div> </ div> </ body> </ html> #div1 { border : 1px solid black
; background-color : yellow
; } #div2 { background-color : red
; height : 230px
; width : 450px
; float : left
;
} #div3 { background-color : blue
; height : 160px
; width : 500px
; float : left
;
}
div2，div3增加了浮動(dòng)效果，我們無(wú)法看見(jiàn)div1了
包裹
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> DIV
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < divid = " div1" > < imgsrc = " img/11.jpg" > </ div> </ body> </ html> #div1 { background-color : yellow
; float : left
;
} img { vertical-align : bottom
;
}
初衷
浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> DIV
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < divid = " div1" > < imgsrc = " img/2.jpg" > < p> 浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動(dòng)能將一個(gè)元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。
</ p> </ div> </ body> </ html> #div1 { background-color : yellow
; float : left
;
} img { vertical-align : bottom
; float : left
;
} p { margin-top : 0px
; text-align : justify
; line-height : 1em
;
}
清除浮動(dòng)
div1，div4文檔流 div2，div3浮動(dòng) 導(dǎo)致4被覆蓋 <! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> DIV
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < divid = " div1" > < divid = " div2" > </ div> < divid = " div3" > </ div> < divid = " div4" > </ div> </ div> </ body> </ html> #div1 { background-color : red
;
}
#div2 { background-color : yellow
; float : left
; width : 200px
; height : 200px
;
} #div3 { background-color : blue
; float : left
; width : 220px
; height : 220px
;
} #div4 { background-color : black
; width : 240px
; height : 240px
;
}
#div1 { background-color : red
;
}
#div2 { background-color : yellow
; float : left
; width : 200px
; height : 200px
;
} #div3 { background-color : blue
; float : left
; width : 220px
; height : 220px
;
} #div4 { background-color : black
; width : 240px
; height : 240px
; clear : both
;
}
CSS定位
相對(duì)定位
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> DIV
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < divclass = " main" > < divclass = " div1" > </ div> 天不生我李淳罡，劍道萬(wàn)古如長(zhǎng)夜。劍來(lái)！”要說(shuō)雪中悍刀行哪一句話最牛皮，得到最廣泛的傳播，那必然是這一句“天不生我李淳罡”。雖然這句話是烽火大總管對(duì)“天不生夫子，萬(wàn)古如長(zhǎng)夜”的改編，但是和李淳罡這個(gè)羊皮裘老頭結(jié)合在一起，就具有了新生命。只要是看過(guò)雪中的書(shū)友，基本上忘不了李淳罡，忘不了“天不生我李淳罡”的劍神風(fēng)范。而且，很搞笑的是，由于這一句太流行了，網(wǎng)上有太多模仿這句話的梗。比如說(shuō)：“天不生我王境澤，飯道萬(wàn)古如長(zhǎng)夜，飯來(lái)”，“天不生我呂小樹(shù)，賤道萬(wàn)古如長(zhǎng)夜...
</ div> </ body> </ html> .main { width : 600px
; height : 600px
; background-color : #123456
;
} .div1 { width : 100px
; height : 100px
; background-color : red
; position : relative
; top : 50px
; left : 50px
;
}
絕對(duì)定位
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> DIV
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < divclass = " main" > < divclass = " div1" > </ div> 天不生我李淳罡，劍道萬(wàn)古如長(zhǎng)夜。劍來(lái)！”要說(shuō)雪中悍刀行哪一句話最牛皮，得到最廣泛的傳播，那必然是這一句“天不生我李淳罡”。雖然這句話是烽火大總管對(duì)“天不生夫子，萬(wàn)古如長(zhǎng)夜”的改編，但是和李淳罡這個(gè)羊皮裘老頭結(jié)合在一起，就具有了新生命。只要是看過(guò)雪中的書(shū)友，基本上忘不了李淳罡，忘不了“天不生我李淳罡”的劍神風(fēng)范。而且，很搞笑的是，由于這一句太流行了，網(wǎng)上有太多模仿這句話的梗。比如說(shuō)：“天不生我王境澤，飯道萬(wàn)古如長(zhǎng)夜，飯來(lái)”，“天不生我呂小樹(shù)，賤道萬(wàn)古如長(zhǎng)夜...
</ div> </ body> </ html> .main { width : 600px
; height : 600px
; background-color : #123456
; position : absolute
; top : 50px
; left : 50px
;
} .div1 { width : 100px
; height : 100px
; background-color : red
; position : absolute
; top : 50px
; left : 50px
;
}
相對(duì)和絕對(duì)
絕對(duì)
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> DIV
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < divclass = " div1" > </ div> < divclass = " div2" > </ div> < divclass = " div3" > </ div> </ body> </ html> div { width : 100px
; height : 100px
;
} .div1 { background-color : red
; position : absolute
; top : 100px
; left : 100px
;
}
.div2 { background-color : green
;
}
.div3 { background-color : blue
;
}
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> DIV
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < divclass = " div1" > </ div> < divclass = " div2" > </ div> < divclass = " div3" > </ div> </ body> </ html> div { width : 100px
; height : 100px
;
} .div1 { background-color : red
; position : relative
; top : 100px
; left : 100px
;
}
.div2 { background-color : green
; position : relative
; top : 100px
; left : 100px
;
}
.div3 { background-color : blue
; position : relative
; top : 100px
; left : 100px
;
}
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> DIV
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < divclass = " div0" > < divclass = " div1" > </ div> < divclass = " div2" > </ div> < divclass = " div3" > </ div> </ div> </ body> </ html> div { width : 100px
; height : 100px
;
}
.div0 { position : relative
; left : 200px
;
}
.div1 { background-color : red
;
}
.div2 { background-color : green
;
}
.div3 { background-color : blue
;
}
div { width : 100px
; height : 100px
;
}
.div0 { position : absolute
; left : 200px
;
}
.div1 { background-color : red
;
}
.div2 { background-color : green
;
}
.div3 { background-color : blue
;
}
在父級(jí)元素偏移，相對(duì)和絕對(duì)基本上無(wú)變化
z-index
決定誰(shuí)前誰(shuí)后，數(shù)字越大越前 <! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> DIV
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < divclass = " div0" > < divclass = " div1" > </ div> < divclass = " div2" > </ div> < divclass = " div3" > </ div> </ div> </ body> </ html> div { width : 100px
; height : 100px
;
}
.div0 { left : 200px
;
}
.div1 { background-color : red
; position : absolute
; top : 20px
; left : 100px
;
}
.div2 { background-color : green
; position : absolute
; top : 40px
; left : 120px
;
}
.div3 { background-color : blue
; position : absolute
; top : 60px
; left : 140px
;
}
div { width : 100px
; height : 100px
;
}
.div0 { left : 200px
;
}
.div1 { background-color : red
; position : absolute
; top : 20px
; left : 100px
; z-index : 1
;
}
.div2 { background-color : green
; position : absolute
; top : 40px
; left : 120px
; z-index : 3
;
}
.div3 { background-color : blue
; position : absolute
; top : 60px
; left : 140px
; z-index : 2
;
}
固定定位
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1" > < title> DIV
</ title> < linkrel = " stylesheet" type = " text/css" href = " index.css" > </ head> < body> < divclass = " div1" > 李淳罡
</ div> < divclass = " div2" > < p> 天不生我李淳罡，劍道萬(wàn)古如長(zhǎng)夜。劍來(lái)！”要說(shuō)雪中悍刀行哪一句話最牛皮，得到最廣泛的傳播，那必然是這一句“天不生我李淳罡”。雖然這句話是烽火大總管對(duì)“天不生夫子，萬(wàn)古如長(zhǎng)夜”的改編，但是和李淳罡這個(gè)羊皮裘老頭結(jié)合在一起，就具有了新生命。只要是看過(guò)雪中的書(shū)友，基本上忘不了李淳罡，忘不了“天不生我李淳罡”的劍神風(fēng)范。而且，很搞笑的是，由于這一句太流行了，網(wǎng)上有太多模仿這句話的梗。比如說(shuō)：“天不生我王境澤，飯道萬(wàn)古如長(zhǎng)夜，飯來(lái)”，“天不生我呂小樹(shù)，賤道萬(wàn)古如長(zhǎng)夜...
</ p> </ div> < divclass = " div3" > 木馬牛
</ div> </ body> </ html> .div1 { width : 5%
; height : 100px
; position : fixed
; top : 200px
; left : 10px
; background-color : yellow
;
}
.div2 { width : 70%
; position : relative
; left : 10%
;
}
.div3 { width : 5%
; height : 100px
; position : fixed
; top : 200px
; right : 10px
; background-color : yellow
;
}
總結(jié)
以上是生活随笔 為你收集整理的前端基础-02-CSS 的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔 推薦給好友。
