文章目錄
css核心
復(fù)雜選擇器
1.兄弟選擇器
兄弟元素:具備相同父元素的平級(jí)元素
兄弟選擇器,只能往后找,不能往前找
①相鄰兄弟選擇器
選擇器1+選擇器2{}
獲取緊緊挨在選擇器1元素后面的選擇器2的元素
②通用兄弟選擇器
選擇器1~選擇器2{}
獲取選擇器1后面所有符合選擇器2的弟弟元素
多用于一組元素,設(shè)置除了老大以外,其它元素的公共樣式
2.屬性選擇器
1.[attr]{} attr表示屬性名稱匹配頁面中所有帶有attr屬性的元素[class] {color:#f00;}
2.[attr1][attr2]....{}匹配頁面中同時(shí)帶有attr1,attr2,.....屬性的元素[class] [title] { }
3.elem[attr1][attr2]..{}匹配頁面中同時(shí)帶有attr1,attr2,.....屬性的elem元素span[title]{color:#f00;}
4.elem[attr1=v1][attr2=v2]....{}匹配頁面中同時(shí)帶有attr1并且值為v1,attr2并且值為v2,.....屬性的elem元素
p[title="千里眼順風(fēng)耳"]{color:#f00;}
5.屬性值的模糊查詢
[attr^=value]{} 匹配attr的值以value開頭的元素
[attr$=value]{} 匹配attr的值以value結(jié)尾的元素
[attr*=value]{} 匹配attr的值中有value的元素
[attr~=value]{} 匹配attr的值中有value這個(gè)獨(dú)立的單詞的元素(value前后有空格)
3.偽類選擇器
:link :visited :hover :active :focus
①目標(biāo)偽類
讓被激活的錨點(diǎn),應(yīng)用的樣式
:target{}
②結(jié)構(gòu)偽類
selector:first-child{}
找的是selector的父元素的第一個(gè)兒子
而且第一個(gè)兒子還得符合selector
selector:last-child{}
找的是selector的父元素的最后一個(gè)兒子
而且最后一個(gè)兒子還得符合selector
selector:nth-child(n){} n從1開始
③:empty
匹配內(nèi)部沒有任何元素的標(biāo)簽
內(nèi)部不許有空格,文字,元素,回車
④:only-child
匹配屬于其父元素唯一子元素
唯一:僅限于元素,可以添加文本,空格,回車
⑤否定偽類
:not(selector) 符合selector的都不要
4.偽元素選擇器
:first-letter 或者 : :first-letter
匹配第一個(gè)字符
:first-line 或者 ::first-line
匹配第一行文本(如果與首字母沖突,聽首字母的樣式)
::selection
匹配用戶鼠標(biāo)選中的文本
必須是雙::,首字母無效,只能設(shè)置背景色和字體顏色
5.偽元素選擇器----內(nèi)容生成
使用css代碼,動(dòng)態(tài)的添加html元素
::before 或者 :before
是在當(dāng)前元素的內(nèi)容區(qū)域的最前方(還是在內(nèi)容區(qū)中),添加一個(gè)假的元素
這個(gè)元素默認(rèn)是行內(nèi)元素
使用content添加內(nèi)容 (content只能設(shè)置文本和圖片)
可以設(shè)置其他任意樣式
可以設(shè)置display改變?cè)氐娘@示方式
::after或者 : after
是在當(dāng)前元素的內(nèi)容區(qū)域的最后面(還是在內(nèi)容區(qū)中),添加一個(gè)假的元素偽元素內(nèi)容生成,可以解決的問題
1.外邊距溢出
#parent:before{content:"";display:table;
}
2.解決高度坍塌
#parent:after{content:"";display:block;clear:both;
}
代碼演示
①相鄰兄弟選擇器
選擇器1+選擇器2{}
獲取緊緊挨在選擇器1元素后面的選擇器2的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p+p { color : #f00
; } .c+span { color : #f00
; } </style>
</head>
<body><p>大娃</p><p class=
"c" >二娃</p><span title=
"nozuonodie" >三娃</span><b>四娃</b><p>五娃</p><div class=
"c" >六娃</div><h3 title=
"no zuo no die" >七娃</h3>
</body>
</html>
看效果
②通用兄弟選擇器
選擇器1~選擇器2{}
獲取選擇器1后面所有符合選擇器2的弟弟元素
多用于一組元素,設(shè)置除了老大以外,其它元素的公共樣式
看代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p~p { color : red
; } </style>
</head>
<body><p>大娃</p><p class=
"c" >二娃</p><span title=
"nozuonodie" >三娃</span><b>四娃</b><p>五娃</p><div class=
"c" >六娃</div><h3 title=
"no zuo no die" >七娃</h3>
</body>
</html>
看效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* { margin : 0
; padding : 0
; } p~p { color : red
; } ul { list-style : none
; } ul>li { float : left
; } li+li { margin-left : 20px
; } </style>
</head>
<body><p>大娃</p><p class=
"c" >二娃</p><span title=
"nozuonodie" >三娃</span><b>四娃</b><p>五娃</p><div class=
"c" >六娃</div><h3 title=
"no zuo no die" >七娃</h3><ul><li data-click=
"" >又雙叒叕</li><li data-click=
"" >火炎焱燚</li><li data-click=
"" >我喜歡你</li><li data-click=
"" >你喜歡她</li></ul>
</body>
</html>
1.[attr]{} attr表示屬性名稱匹配頁面中所有帶有attr屬性的元素[class] {color:#f00;}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>[class] { color : red
; } </style>
</head>
<body><p>大娃</p><p class=
"c" >二娃</p><span title=
"nozuonodie" >三娃</span><b>四娃</b><p>五娃</p><div class=
"c" >六娃</div><h3 title=
"no zuo no die" >七娃</h3><ul><li data-click=
"" >又雙叒叕</li><li data-click=
"" >火炎焱燚</li><li data-click=
"" >我喜歡你</li><li data-click=
"" >你喜歡她</li></ul>
</body>
</html>
2.[attr1][attr2]....{}匹配頁面中同時(shí)帶有attr1,attr2,.....屬性的元素[class] [title] { }
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>[class][title] { color : red
; } </style>
</head>
<body><p>大娃</p><p class=
"c" title=
"千里眼順風(fēng)耳" >二娃</p><span title=
"nozuonodie" >三娃</span><b>四娃</b><p>五娃</p><div class=
"c" >六娃</div><h3 title=
"no zuo no die" >七娃</h3><ul><li data-click=
"" >又雙叒叕</li><li data-click=
"" >火炎焱燚</li><li data-click=
"" >我喜歡你</li><li data-click=
"" >你喜歡她</li></ul>
</body>
</html>
3.elem[attr1][attr2]..{}匹配頁面中同時(shí)帶有attr1,attr2,.....屬性的elem元素span[title]{color:#f00;}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span[title] { color : red
; } </style>
</head>
<body><p>大娃</p><p class=
"c" title=
"千里眼順風(fēng)耳" >二娃</p><span title=
"nozuonodie" >三娃</span><b>四娃</b><p>五娃</p><div class=
"c" >六娃</div><h3 title=
"no zuo no die" >七娃</h3><ul><li data-click=
"" >又雙叒叕</li><li data-click=
"" >火炎焱燚</li><li data-click=
"" >我喜歡你</li><li data-click=
"" >你喜歡她</li></ul>
</body>
</html>
4.elem[attr1=v1][attr2=v2]....{}匹配頁面中同時(shí)帶有attr1并且值為v1,attr2并且值為v2,.....屬性的elem元素
p[title="千里眼順風(fēng)耳"]{color:#f00;}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span[title=nozuonodie] { color : red
; } </style>
</head>
<body><p>大娃</p><p class=
"c" title=
"千里眼順風(fēng)耳" >二娃</p><span title=
"nozuonodie" >三娃</span><b>四娃</b><p>五娃</p><div class=
"c" >六娃</div><h3 title=
"no zuo no die" >七娃</h3><ul><li data-click=
"" >又雙叒叕</li><li data-click=
"" >火炎焱燚</li><li data-click=
"" >我喜歡你</li><li data-click=
"" >你喜歡她</li></ul>
</body>
</html>
5.屬性值的模糊查詢
[attr^=value]{} 匹配attr的值以value開頭的元素
[attr$=value]{} 匹配attr的值以value結(jié)尾的元素
[attr*=value]{} 匹配attr的值中有value的元素
[attr~=value]{} 匹配attr的值中有value這個(gè)獨(dú)立的單詞的元素(value前后有空格)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>[title$='e'] { color : red
; } </style>
</head>
<body><p>大娃</p><p class=
"c" title=
"千里眼順風(fēng)耳" >二娃</p><span title=
"nozuonodie" >三娃</span><b>四娃</b><p>五娃</p><div class=
"c" >六娃</div><h3 title=
"no zuo no die" >七娃</h3><ul><li data-click=
"" >又雙叒叕</li><li data-click=
"" >火炎焱燚</li><li data-click=
"" >我喜歡你</li><li data-click=
"" >你喜歡她</li></ul>
</body>
</html>
①目標(biāo)偽類
讓被激活的錨點(diǎn),應(yīng)用的樣式
:target{}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div { display : none
; } div:target { background : #0aa1ed
; display : block
; font : 32px mv boli
; } </style>
</head>
<body><a href=
"#hz" >海賊王</a><a href=
"#hy" >火影忍者</a><a href=
"#yq" >一拳超人</a><div id=
"hz" >海賊王Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem possimus, aut explicabo, asperiores soluta fugit corporis quisquam nostrum dignissimos, sint consequatur hic distinctio eveniet. Sit mollitia beatae fugit odio repellat provident perferendis aperiam! Dolores corrupti corporis minima minus obcaecati maiores iste molestias, rerum eveniet sapiente, nesciunt velit, delectus rem possimus reiciendis debitis maxime aperiam consequuntur? Illum sit ut quas facilis a. Ducimus explicabo magni suscipit iusto molestias, voluptate saepe hic quis similique, dolor consequatur incidunt nobis odit delectus quasi numquam asperiores harum porro nesciunt amet repellendus. Provident iure accusantium similique officiis necessitatibus eligendi, culpa vel eveniet laudantium sit asperiores error!</div><div id=
"hy" >火影忍者Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat, laudantium. Obcaecati repudiandae mollitia architecto delectus corrupti assumenda eius soluta odit vero. Quas ratione autem commodi enim amet vero dicta, ad, sequi accusamus pariatur nobis cumque doloremque culpa ex quos tempore ducimus consequatur ipsa veritatis obcaecati. Autem voluptas amet atque non labore animi facilis laudantium earum, tempora vel, repudiandae repellendus reprehenderit perferendis, a obcaecati explicabo blanditiis ad voluptatem eveniet sint laboriosam. Repellendus exercitationem quaerat perferendis ipsam rem? Quod consequuntur perspiciatis quas harum sit, qui veritatis et reprehenderit id alias voluptatum. Repudiandae incidunt nemo dolorum eveniet voluptate repellat blanditiis vitae? Nobis, dolores.</div><div id=
"yq" >一拳超人Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo ab assumenda obcaecati, tempora, consequatur consectetur eaque delectus perferendis repudiandae minus, incidunt necessitatibus odit animi deserunt quasi quaerat dolorem quod sit illum similique aspernatur ad. Atque a doloremque officiis, sunt veritatis ea odio velit debitis distinctio nobis, laudantium facere dicta reprehenderit fugiat, qui et deleniti voluptates? Velit quo mollitia est doloremque enim iusto dolorum porro similique blanditiis aliquam soluta obcaecati placeat, quidem hic ut facilis nihil inventore, vero sequi explicabo. Vero est quis libero! Accusantium delectus maiores amet minima facere nostrum, beatae molestias! Placeat sapiente laborum repellendus delectus ullam hic porro.</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul { list-style : none
; } li { float : left
; } li+li { margin-left : 10px
; } a { text-decoration : none
; } img { display : none
; } img:target { display : block
; } </style>
</head>
<body><ul><li><a href=
"#hx" >海鮮面</a></li><li><a href=
"#sj" >四季春餅</a></li><li><a href=
"#hh" >豪華八大碗</a></li></ul><img id=
"hx" src=
"img1.png" alt=
"" ><img id=
"sj" src=
"img2.png" alt=
"" ><img id=
"hh" src=
"img3.png" alt=
"" >
</body>
</html>
selector:first-child{}
找的是selector的父元素的第一個(gè)兒子
而且第一個(gè)兒子還得符合selector
selector:last-child{}
找的是selector的父元素的最后一個(gè)兒子
而且最后一個(gè)兒子還得符合selector
selector:nth-child(n){} n從1開始
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p:first-child { color : red
; } p:last-child { color : #0aa1ed
; } p:nth-child(3) { color : yellowgreen
; } </style>
</head>
<body><p>老大</p><p>老二</p><p>老三</p><p>老四</p><p>老五</p><p>老六</p><p>老七</p><div><p>我愛你</p></div><div><span>123</span><p>我喜歡你</p></div>
</body>
</html>
練習(xí):創(chuàng)建4*4表格
通過結(jié)構(gòu)偽類,完成下列樣式
第一行背景色#0ff;
最后一行背景色#ff0
第三行第二列背景色#f0f
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>td { border : 1px solid #0aa1ed
; width : 80px
; height : 80px
; } tr:first-child { background : #0ff
; } tr:last-child { background : #ff0
; } tr:nth-child(3) td:nth-child(2) { background : #f0f
; } </style>
</head>
<body><table><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table>
</body>
</html>
③:empty
匹配內(nèi)部沒有任何元素的標(biāo)簽
內(nèi)部不許有空格,文字,元素,回車
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h3:empty { width : 100px
; height : 100px
; background : #0aa1ed
; } </style>
</head>
<body><h3></h3>
</body>
</html>
匹配屬于其父元素唯一子元素
唯一:僅限于元素,可以添加文本,空格,回車
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h6:only-child { background : #0aa1ed
; } </style>
</head>
<body><div><h6>111</h6></div><span><h6>我愛你</h6></span><h6>我喜歡你</h6>
</body>
</html>
⑤否定偽類
:not(selector) 符合selector的都不要
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h6:not(:only-child) { background : #0aa1ed
; } </style>
</head>
<body><div><h6>111</h6></div><span><h6>我愛你</h6></span><h6>我喜歡你</h6>
</body>
</html>
4.偽元素選擇器
:first-letter 或者 : :first-letter
匹配第一個(gè)字符
:first-line 或者 ::first-line
匹配第一行文本(如果與首字母沖突,聽首字母的樣式)
::selection
匹配用戶鼠標(biāo)選中的文本
必須是雙::,首字母無效,只能設(shè)置背景色和字體顏色
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#d1 { background : #000
; color : #0aedc7
; font : 32px mv boli
; } #d1::first-letter { color : yellow
; } #d1::first-line { background-color : thistle
; color : white
; } #d1::selection { background : yellowgreen
; color : white
; } </style>
</head>
<body><div id=
"d1" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta distinctio consequuntur reiciendis dolor veniam id voluptatum officia est? Vero assumenda facilis quis blanditiis quod iusto eveniet laborum odit ipsum aspernatur, excepturi exercitationem dolor porro modi earum aliquam vel error quo optio quam suscipit beatae! Explicabo sunt, doloremque tenetur nisi obcaecati dolor pariatur aut ex. Neque debitis doloremque consectetur nesciunt officia voluptate, enim velit similique quia ipsam, qui dolores quae eius ex officiis veniam explicabo totam atque temporibus nam repellendus cupiditate? Iusto veniam dicta inventore animi eveniet minima veritatis placeat dignissimos, quis quia distinctio doloribus cum repellendus vero exercitationem. Exercitationem repudiandae assumenda odio totam dolorem commodi vitae reprehenderit eos ipsa sint nostrum quibusdam, saepe aperiam consequatur porro facilis doloremque quis! Distinctio magnam eos porro saepe non delectus inventore suscipit nemo maxime, quo officia enim quaerat ab quisquam sapiente quia quasi corporis ratione voluptas! Ea eius ab nam placeat culpa, numquam cumque laboriosam maiores temporibus qui omnis vero fugiat. Doloremque quasi sapiente asperiores! Dicta eaque dolorem voluptas quisquam, dolorum iusto quidem optio. Iusto voluptas eos maiores neque dolorem sequi modi obcaecati tempore praesentium, aut quam ipsa quasi ullam, mollitia vero blanditiis sunt amet est ratione soluta distinctio. Recusandae odio ut autem magni, magnam, omnis illo veritatis animi fuga natus unde, quasi sapiente minus enim nisi. Nostrum hic maxime debitis enim praesentium doloribus accusamus dolore quibusdam quidem itaque consectetur tenetur inventore, rerum sapiente beatae aliquam fugit veritatis ipsam? Consectetur nihil voluptates, cupiditate tempore amet placeat sed, molestiae ipsa porro similique est veniam excepturi quia! Facilis omnis hic exercitationem labore error eaque vel a beatae repellat doloremque consequuntur modi expedita reprehenderit, mollitia culpa perferendis. Voluptatum distinctio dolorum repudiandae eaque voluptatem nobis ipsa perferendis veniam omnis sint laboriosam deleniti nulla modi sit voluptatibus aperiam eligendi, quas temporibus esse exercitationem facilis suscipit consequuntur. Alias illum, error quaerat vel adipisci, sunt consequatur animi sed, minus magni doloribus! Tempora, maiores. Sequi a fugit, ducimus harum perferendis ipsa cum voluptates ea ab doloremque ipsam saepe rerum, assumenda eos provident magnam, eaque praesentium atque optio totam maxime sint minus! Consequuntur eius corrupti, repellendus, provident placeat consectetur corporis repudiandae in molestias rem facere saepe. Quaerat, sunt. Cupiditate at nihil, ipsum non nostrum culpa sequi ex impedit alias quia iste, neque obcaecati, temporibus dolor nam. Reprehenderit eveniet aperiam quos quidem inventore, assumenda laudantium quibusdam impedit eligendi quasi tenetur, aspernatur fugit blanditiis enim sint doloremque obcaecati cum exercitationem nostrum ex tempore. Reprehenderit, iste.</div>
</body>
</html>
5.偽元素選擇器----內(nèi)容生成
使用css代碼,動(dòng)態(tài)的添加html元素
::before 或者 :before
是在當(dāng)前元素的內(nèi)容區(qū)域的最前方(還是在內(nèi)容區(qū)中),添加一個(gè)假的元素
這個(gè)元素默認(rèn)是行內(nèi)元素
使用content添加內(nèi)容 (content只能設(shè)置文本和圖片)
可以設(shè)置其他任意樣式
可以設(shè)置display改變?cè)氐娘@示方式
::after或者 : after
是在當(dāng)前元素的內(nèi)容區(qū)域的最后面(還是在內(nèi)容區(qū)中),添加一個(gè)假的元素偽元素內(nèi)容生成,可以解決的問題
1.外邊距溢出
#parent:before{content:"";display:table;
}
2.解決高度坍塌
#parent:after{content:"";display:block;clear:both;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#d2::before { content : url(2.jpg) "蒙奇.D.路飛說:" ; } </style>
</head>
<body><div id=
"d2" >我是要成為海賊王的男人！</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#d1 { width : 200px
; height : 200px
; background : #ff0
; } #d2 { width : 100px
; height : 100px
; background : #0aa1ed
; margin-top : 50px
; } #d1::before { content : '' ; display : table
; } </style>
</head>
<body><div id=
"d1" ><div id=
"d2" ></div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#parent div { float : left
; width : 200px
; height : 200px
; } #d1 { background : #f00
; } #d2 { background : #0f0
; } #parent::after { content : "" ; display : block
; clear : both
; } #parent { border : 2px solid #0aa1ed
; } </style>
</head>
<body><div id=
"parent" ><div id=
"d1" ></div><div id=
"d2" ></div></div>
</body>
</html>
彈性布局
1.什么是彈性布局
就是一種布局方式,
主要解決某個(gè)元素的子元素的布局方式(橫向排列,或者縱向排列)
為布局提供很大的靈活性
2.彈性布局的相關(guān)概念
容器:
要發(fā)生彈性布局的子元素們的父元素,稱之為容器
也就是設(shè)置了display:flex的元素.
這個(gè)元素本身不是彈性布局,他的兒子們是彈性布局
項(xiàng)目:
要做彈性布局的子元素們,稱之為項(xiàng)目
就是設(shè)置了display:flex的元素的子元素們
主軸:(4根)
項(xiàng)目們的排列的方向的一根軸,稱之為主軸
如果項(xiàng)目們橫向排列,x軸就是主軸
如果項(xiàng)目們縱向排列,y軸就是主軸
項(xiàng)目們?cè)谥鬏S上的排列順序,就是主軸的起點(diǎn)和終點(diǎn)
交叉軸(2根)
與垂直相交的一根軸,叫做交叉軸
項(xiàng)目們?cè)诮徊孑S上的對(duì)齊方式,就是交叉軸的起點(diǎn)和終點(diǎn)
3.語法
在項(xiàng)目中,設(shè)置display:flex 將塊級(jí)元素設(shè)置為彈性容器inline-flex 將行內(nèi)元素設(shè)置彈性容器
特點(diǎn):容器的text-align vertical-align 失效項(xiàng)目的float clear失效
4.容器的屬性
①主軸方向
flex-direction:
row 默認(rèn)值,主軸是x軸,主軸起點(diǎn)在左邊
row-reverse 主軸是x軸,主軸起點(diǎn)在右邊
column 主軸是y軸,主軸起點(diǎn)在頂端
column-reverse 主軸是y軸,主軸起點(diǎn)在底部
②設(shè)置項(xiàng)目是否換行
flex-wrap:
nowrap 默認(rèn)值,不換行
wrap 換行
wrap-reverse 換行,并反轉(zhuǎn)
③主軸方向和換行的縮寫
flex-flow:direction wrap;
flex-flow:row-reverse wrap;
④項(xiàng)目在主軸上的對(duì)齊方式
justify-content:
flex-start 默認(rèn)值,主軸起點(diǎn)對(duì)齊
flex-end 主軸終點(diǎn)對(duì)齊
center 主軸中間對(duì)齊
space-between 兩端對(duì)齊,兩端無空白
space-around 每個(gè)間距大小相同,兩端有空白
⑤項(xiàng)目在交叉軸的對(duì)齊方式
align-items:
flex-start 默認(rèn)值,在交叉軸起點(diǎn)對(duì)齊
flex-end 在交叉軸終點(diǎn)
center 在交叉軸中間對(duì)齊
stretch 前提 項(xiàng)目不定義高度,設(shè)置stretch,項(xiàng)目充滿整個(gè)交叉軸
練習(xí),使用彈性完成品質(zhì)保障
5.項(xiàng)目的屬性,只能設(shè)置在某一個(gè)項(xiàng)目上,不影響其他項(xiàng)目的效果
①項(xiàng)目排列順序
order:無單位整數(shù);
定義項(xiàng)目排列順序,值越小,越靠近主軸起點(diǎn),默認(rèn)值為0
②flex-grow
定義項(xiàng)目的放大比例
如果容器有足夠大的剩余空間,項(xiàng)目將變大
默認(rèn)值 0 不放大,取值越大,項(xiàng)目放大的越快
③flex-shrink
如果容器空間不足,設(shè)置項(xiàng)目該如何縮小
默認(rèn)值 1. 設(shè)置為0不縮小,取值越大,項(xiàng)目縮小越快
④align-self
單獨(dú)設(shè)置每一個(gè)項(xiàng)目交叉軸的對(duì)齊
flex-start 默認(rèn)值,在交叉軸起點(diǎn)對(duì)齊
flex-end 在交叉軸終點(diǎn)
center 在交叉軸中間對(duì)齊
stretch 前提 項(xiàng)目不定義高度,設(shè)置stretch,項(xiàng)目充滿整個(gè)交叉軸
auto 使用給容器定義的align-items的值
代碼演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#parent { width : 800px
; height : 200px
; font : 42px mv boli
; display : flex
; border : 2px solid #0aa1ed
; text-align : right
; } #d1,#d2,#d3 { width : 200px
; height : 200px
; float : right
; } #d1 { background : #ff0
; } #d2 { background : #0ff
; } #d3 { background : #f0f
; } </style>
</head>
<body><div id=
"parent" ><div id=
"d1" >1</div><div id=
"d2" >2</div><div id=
"d3" >3</div></div>
</body>
</html>
可以看到 div中的1 2 3右對(duì)齊了,那是因?yàn)槔^承
①主軸方向
flex-direction:
row 默認(rèn)值,主軸是x軸,主軸起點(diǎn)在左邊
row-reverse 主軸是x軸,主軸起點(diǎn)在右邊
column 主軸是y軸,主軸起點(diǎn)在頂端
column-reverse 主軸是y軸,主軸起點(diǎn)在底部
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#parent { width : 800px
; font : 42px mv boli
; display : flex
; border : 2px solid #0aa1ed
; text-align : right
; flex-direction : column
; } #d1,#d2,#d3 { width : 200px
; height : 200px
; float : right
; } #d1 { background : #ff0
; } #d2 { background : #0ff
; } #d3 { background : #f0f
; } </style>
</head>
<body><div id=
"parent" ><div id=
"d1" >1</div><div id=
"d2" >2</div><div id=
"d3" >3</div></div>
</body>
</html>
②設(shè)置項(xiàng)目是否換行
flex-wrap:
nowrap 默認(rèn)值,不換行
wrap 換行
wrap-reverse 換行,并反轉(zhuǎn)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#parent { font : 42px mv boli
; display : flex
; border : 2px solid #0aa1ed
; flex-wrap : wrap
; } #d1,#d2,#d3 { width : 200px
; height : 200px
; } #d1 { background : #f00
; } #d2 { background : #0f0
; } #d3 { background : #f0f
; } </style>
</head>
<body><div id=
"parent" ><div id=
"d1" >1</div><div id=
"d2" >2</div><div id=
"d3" >3</div></div>
</body>
</html>
③主軸方向和換行的縮寫
flex-flow:direction wrap;
flex-flow:row-reverse wrap;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#parent { font : 42px mv boli
; display : flex
; border : 2px solid #0aa1ed
; flex-flow : row-reverse wrap
; } #d1,#d2,#d3 { width : 200px
; height : 200px
; } #d1 { background : #f00
; } #d2 { background : #0f0
; } #d3 { background : #f0f
; } </style>
</head>
<body><div id=
"parent" ><div id=
"d1" >1</div><div id=
"d2" >2</div><div id=
"d3" >3</div></div>
</body>
</html>
④項(xiàng)目在主軸上的對(duì)齊方式
justify-content:
flex-start 默認(rèn)值,主軸起點(diǎn)對(duì)齊
flex-end 主軸終點(diǎn)對(duì)齊
center 主軸中間對(duì)齊
space-between 兩端對(duì)齊,兩端無空白
space-around 每個(gè)間距大小相同,兩端有空白
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#parent { font : 42px mv boli
; display : flex
; border : 2px solid #0aa1ed
; flex-direction : row
; justify-content : center
; } #d1,#d2,#d3 { width : 200px
; height : 200px
; } #d1 { background : #f00
; } #d2 { background : #0f0
; } #d3 { background : #f0f
; } </style>
</head>
<body><div id=
"parent" ><div id=
"d1" >1</div><div id=
"d2" >2</div><div id=
"d3" >3</div></div>
</body>
</html>
如果換成這個(gè)值 justify-content: space-around;
⑤項(xiàng)目在交叉軸的對(duì)齊方式
align-items:
flex-start 默認(rèn)值,在交叉軸起點(diǎn)對(duì)齊
flex-end 在交叉軸終點(diǎn)
center 在交叉軸中間對(duì)齊
stretch 前提 項(xiàng)目不定義高度,設(shè)置stretch,項(xiàng)目充滿整個(gè)交叉軸
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#parent { height : 300px
; font : 42px mv boli
; display : flex
; border : 2px solid #0aa1ed
; flex-direction : row
; justify-content : space-around
; align-items : center
; } #d1,#d2,#d3 { width : 200px
; height : 200px
; } #d1 { background : #f00
; } #d2 { background : #0f0
; } #d3 { background : #f0f
; } </style>
</head>
<body><div id=
"parent" ><div id=
"d1" >1</div><div id=
"d2" >2</div><div id=
"d3" >3</div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#parent { height : 300px
; font : 42px mv boli
; display : flex
; border : 2px solid #0aa1ed
; flex-direction : row
; justify-content : space-around
; align-items : center
; } #d1,#d2,#d3 { width : 200px
; height : 200px
; } #d1 { background : #f00
; } #d2 { background : #0f0
; } #d3 { background : #f0f
; } #content { width : 1004px
; height : 200px
; background : rgba ( 134, 229, 190, 0.548
) ; list-style : none
; display : flex
; justify-content : space-around
; align-items : center
; padding : 0
; } li { text-align : center
; } a { text-decoration : none
; } </style>
</head>
<body><div id=
"parent" ><div id=
"d1" >1</div><div id=
"d2" >2</div><div id=
"d3" >3</div></div><br><hr><br><ul id=
"content" ><li><a href=
"" ><img src=
"icon1.png" alt=
"" ><p>品質(zhì)保證</p></a></li><li><a href=
"" ><img src=
"icon1.png" alt=
"" ><p>品質(zhì)保證</p></a></li><li><a href=
"" ><img src=
"icon1.png" alt=
"" ><p>品質(zhì)保證</p></a></li><li><a href=
"" ><img src=
"icon1.png" alt=
"" ><p>品質(zhì)保證</p></a></li></ul>
</body>
</html>
項(xiàng)目的屬性,只能設(shè)置在某一個(gè)項(xiàng)目上,不影響其他項(xiàng)目的效果
①項(xiàng)目排列順序
order:無單位整數(shù);
定義項(xiàng)目排列順序,值越小,越靠近主軸起點(diǎn),默認(rèn)值為0
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#parent { height : 300px
; font : 42px mv boli
; display : flex
; border : 2px solid #0aa1ed
; flex-direction : row
; justify-content : space-around
; align-items : center
; } #d1,#d2,#d3 { width : 200px
; height : 200px
; } #d1 { background : #f00
; order : 1
; } #d2 { background : #0f0
; order : 3
; } #d3 { background : #f0f
; order : 2
; } </style>
</head>
<body><div id=
"parent" ><div id=
"d1" >1</div><div id=
"d2" >2</div><div id=
"d3" >3</div></div></body>
</html>
②flex-grow
定義項(xiàng)目的放大比例
如果容器有足夠大的剩余空間,項(xiàng)目將變大
默認(rèn)值 0 不放大,取值越大,項(xiàng)目放大的越快
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#parent { height : 300px
; font : 42px mv boli
; display : flex
; border : 2px solid #0aa1ed
; flex-direction : row
; justify-content : space-around
; align-items : center
; } #d1,#d2,#d3 { width : 200px
; height : 200px
; } #d1 { background : #f00
; flex-grow : 1
; } #d2 { background : #0f0
; flex-grow : 10
; } #d3 { background : #f0f
; flex-grow : 100
; } </style>
</head>
<body><div id=
"parent" ><div id=
"d1" >1</div><div id=
"d2" >2</div><div id=
"d3" >3</div></div>
</body>
</html>
③flex-shrink
如果容器空間不足,設(shè)置項(xiàng)目該如何縮小
默認(rèn)值 1. 設(shè)置為0不縮小,取值越大,項(xiàng)目縮小越快
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#parent { height : 300px
; font : 42px mv boli
; display : flex
; border : 2px solid #0aa1ed
; flex-direction : row
; justify-content : space-around
; align-items : center
; } #d1,#d2,#d3 { width : 200px
; height : 200px
; } #d1 { background : #f00
; flex-shrink : 0
; } #d2 { background : #0f0
; } #d3 { background : #f0f
; } </style>
</head>
<body><div id=
"parent" ><div id=
"d1" >1</div><div id=
"d2" >2</div><div id=
"d3" >3</div></div>
</body>
</html>
④align-self
單獨(dú)設(shè)置每一個(gè)項(xiàng)目交叉軸的對(duì)齊
flex-start 默認(rèn)值,在交叉軸起點(diǎn)對(duì)齊
flex-end 在交叉軸終點(diǎn)
center 在交叉軸中間對(duì)齊
stretch 前提 項(xiàng)目不定義高度,設(shè)置stretch,項(xiàng)目充滿整個(gè)交叉軸
auto 使用給容器定義的align-items的值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#parent { height : 300px
; font : 42px mv boli
; display : flex
; border : 2px solid #0aa1ed
; flex-direction : row
; justify-content : space-around
; align-items : center
; } #d1,#d2,#d3 { width : 200px
; height : 200px
; } #d1 { background : #f00
; align-self : center
; } #d2 { background : #0f0
; align-self : flex-end
; } #d3 { background : #f0f
; } </style>
</head>
<body><div id=
"parent" ><div id=
"d1" >1</div><div id=
"d2" >2</div><div id=
"d3" >3</div></div>
</body>
</html>
CSS hark
由于不同瀏覽器,對(duì)css的解析認(rèn)知不同,會(huì)導(dǎo)致同一份代碼,在不同瀏覽器下,頁面顯示效果不同
1.開發(fā)人員要針對(duì)不同的瀏覽器寫不同的樣式.這個(gè)行為就叫寫css hack
-o-
-webkit-
-ms-
-moz-
練習(xí)
<!DOCTYPE html>
<html lang=
"en" >
<head><meta charset=
"UTF-8" ><meta name=
"viewport" content=
"width=device-width, initial-scale=1.0" ><title>Document</title><style>
* { margin : 0
; padding : 0
; box-sizing : border-box
; } a { text-decoration : none
; } ul { list-style : none
; } #content { width : 1000px
; display : flex
; flex-wrap : wrap
; justify-content : space-between
; margin : 0 auto
; } #content>div:first-child { width : 609px
; height : 377px
; background : #e8e8e8
; margin-bottom : 10px
; position : relative
; } #content>div:nth-child(2) { width : 381px
; height : 377px
; background : #e8e8e8
; margin-bottom : 10px
; } #content>div:nth-child(3) { width : 377px
; height : 233px
; background : #e8e8e8
; } #content>div:nth-child(4) { width : 198px
; height : 233px
; background : #e8e8e8
; } #content>div:nth-child(5) { width : 198px
; height : 233px
; background : #e8e8e8
; } #content>div:last-child { width : 198px
; height : 233px
; background : #e8e8e8
; } .desc { width : 245px
; height : 243px
; position : absolute
; top : 45px
; left : 75px
; display : flex
; flex-flow : column
; } .title { font : 32px 黑體
; } .detals { font : 12px 黑體
; color : #666
; margin-bottom : 12px
; } .price { font : 24px 黑體
; color : #0aa1ed
; margin-bottom : 15px
; } .view { width : 130px
; height : 40px
; display : block
; border-radius : 5px
; background : linear-gradient ( to bottom, #27b1f6,#0aa1ed
) ; color : #fff
; text-align : center
; line-height : 40px
; } .img1 { position : absolute
; top : 20px
; right : 40px
; } </style>
</head>
<body><div id=
"content" ><div><div class=
"desc" ><h4 class=
"title" >Apple MacBook Air系列</h4><span class=
"detals" >酷睿雙核i5處理器|256GB SSD|8GB內(nèi)存|英特爾HD顯卡620含共享顯卡內(nèi)存</span><p class=
"price" >￥6988.00</p><a class=
"view" href=
"" >查看詳情</a></div><img class=
"img1" src=
"study_computer_img1.png" alt=
"" ></div><div></div><div></div><div></div><div></div><div></div></div>
</body>
</html>
總結(jié)
以上是生活随笔 為你收集整理的css第五天 的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔 推薦給好友。
