CSS:層疊樣式表
(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標準通用標記語言的一個應(yīng)用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。 CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。 作用
結(jié)構(gòu)與樣式分離的方式，便于后期維護與改版 可以用多套樣式，使網(wǎng)頁有任意樣式切換的效果 使頁面載入得更快，降低服務(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)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(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 : 隸書; } </ style> </ head> < body> < p> http://www.baidu.com
</ p> < pclass = " p1" > 百度
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(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 : 隸書; } 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)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(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)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> </ body> </ html> index.css
p { background-color : red
; font-size : 40px
;
}
.p1 { font-family : 隸書
;
} 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)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(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)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ p> < pclass = " p1" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(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 : 隸書
; }
列表樣式
<! 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)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(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 : 隸書
; } 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)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(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任何一個能獨立區(qū)分的標簽都能使用 before在最前面添加文字 " ;
}
body::after { content : "body，h1，p任何一個能獨立區(qū)分的標簽都能使用 after在最后面添加文字" ;
} h1::before { content : "開始>>>>: " ;
}
h1::after { content : ":<<<<結(jié)束 " ;
} p::before { content : "開始>>>>: " ;
}
p::after { content : ":<<<<結(jié)束 " ;
} p::first-line { background : yellow
;
} p::first-letter { font-size : 30px
;
} p::selection { background-color : red
}
其他選擇器
CSS浮動
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)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(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)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(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)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。
</ div> < divid = " div2" > 全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(guān)的搜索結(jié)果。全球領(lǐng)先的中文搜索引擎、致力于讓網(wǎng)民更便捷地獲取信息，找到所求。百度超過千億的中文網(wǎng)頁數(shù)據(jù)庫，可以瞬間找到相關(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
;
}
浮動
<! 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初衷，包裹，崩潰
崩潰
正常的情況，不會出現(xiàn)崩潰的情況
（1）一個空白的div中，如果不進行任何尺寸的設(shè)定，并且div里面沒有任何內(nèi)容時，div是沒有高度的：
（2）當(dāng)在div中添加內(nèi)容時候：div中內(nèi)容的高度就是div的高度；即div中的內(nèi)容會把div給撐起來；
（3）總結(jié)：元素的寬度默認占滿父一級元素；；；；元素的高度由子元素撐起來。
2.出現(xiàn)了崩潰：浮動的子元素不能撐起非浮動的父元素
<! 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增加了浮動效果，我們無法看見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
;
}
初衷
浮動能將一個元素（通常是一張圖片）拉到容器的一側(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> 浮動能將一個元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動能將一個元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動能將一個元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動能將一個元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動能將一個元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動能將一個元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動能將一個元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動能將一個元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動能將一個元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動能將一個元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動能將一個元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動能將一個元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動能將一個元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動能將一個元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動能將一個元素（通常是一張圖片）拉到容器的一側(cè)，這樣文檔流就能夠包圍它。浮動能將一個元素（通常是一張圖片）拉到容器的一側(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
;
}
清除浮動
div1，div4文檔流 div2，div3浮動 導(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定位
相對定位
<! 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> 天不生我李淳罡，劍道萬古如長夜。劍來！”要說雪中悍刀行哪一句話最牛皮，得到最廣泛的傳播，那必然是這一句“天不生我李淳罡”。雖然這句話是烽火大總管對“天不生夫子，萬古如長夜”的改編，但是和李淳罡這個羊皮裘老頭結(jié)合在一起，就具有了新生命。只要是看過雪中的書友，基本上忘不了李淳罡，忘不了“天不生我李淳罡”的劍神風(fēng)范。而且，很搞笑的是，由于這一句太流行了，網(wǎ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
;
}
絕對定位
<! 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> 天不生我李淳罡，劍道萬古如長夜。劍來！”要說雪中悍刀行哪一句話最牛皮，得到最廣泛的傳播，那必然是這一句“天不生我李淳罡”。雖然這句話是烽火大總管對“天不生夫子，萬古如長夜”的改編，但是和李淳罡這個羊皮裘老頭結(jié)合在一起，就具有了新生命。只要是看過雪中的書友，基本上忘不了李淳罡，忘不了“天不生我李淳罡”的劍神風(fēng)范。而且，很搞笑的是，由于這一句太流行了，網(wǎ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
;
}
相對和絕對
絕對
<! 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
;
}
在父級元素偏移，相對和絕對基本上無變化
z-index
<! 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> 天不生我李淳罡，劍道萬古如長夜。劍來！”要說雪中悍刀行哪一句話最牛皮，得到最廣泛的傳播，那必然是這一句“天不生我李淳罡”。雖然這句話是烽火大總管對“天不生夫子，萬古如長夜”的改編，但是和李淳罡這個羊皮裘老頭結(jié)合在一起，就具有了新生命。只要是看過雪中的書友，基本上忘不了李淳罡，忘不了“天不生我李淳罡”的劍神風(fēng)范。而且，很搞笑的是，由于這一句太流行了，網(wǎ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 的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔 推薦給好友。
