文章目錄
css核心
復雜選擇器
1.兄弟選擇器
兄弟元素:具備相同父元素的平級元素
兄弟選擇器,只能往后找,不能往前找
①相鄰兄弟選擇器
選擇器1+選擇器2{}
獲取緊緊挨在選擇器1元素后面的選擇器2的元素
②通用兄弟選擇器
選擇器1~選擇器2{}
獲取選擇器1后面所有符合選擇器2的弟弟元素
多用于一組元素,設置除了老大以外,其它元素的公共樣式
2.屬性選擇器
1.[attr]{} attr表示屬性名稱匹配頁面中所有帶有attr屬性的元素[class] {color:#f00;}
2.[attr1][attr2]....{}匹配頁面中同時帶有attr1,attr2,.....屬性的元素[class] [title] { }
3.elem[attr1][attr2]..{}匹配頁面中同時帶有attr1,attr2,.....屬性的elem元素span[title]{color:#f00;}
4.elem[attr1=v1][attr2=v2]....{}匹配頁面中同時帶有attr1并且值為v1,attr2并且值為v2,.....屬性的elem元素
p[title="千里眼順風耳"]{color:#f00;}
5.屬性值的模糊查詢
[attr^=value]{} 匹配attr的值以value開頭的元素
[attr$=value]{} 匹配attr的值以value結尾的元素
[attr*=value]{} 匹配attr的值中有value的元素
[attr~=value]{} 匹配attr的值中有value這個獨立的單詞的元素(value前后有空格)
3.偽類選擇器
:link :visited :hover :active :focus
①目標偽類
讓被激活的錨點,應用的樣式
:target{}
②結構偽類
selector:first-child{}
找的是selector的父元素的第一個兒子
而且第一個兒子還得符合selector
selector:last-child{}
找的是selector的父元素的最后一個兒子
而且最后一個兒子還得符合selector
selector:nth-child(n){} n從1開始
③:empty
匹配內部沒有任何元素的標簽
內部不許有空格,文字,元素,回車
④:only-child
匹配屬于其父元素唯一子元素
唯一:僅限于元素,可以添加文本,空格,回車
⑤否定偽類
:not(selector) 符合selector的都不要
4.偽元素選擇器
:first-letter 或者 : :first-letter
匹配第一個字符
:first-line 或者 ::first-line
匹配第一行文本(如果與首字母沖突,聽首字母的樣式)
::selection
匹配用戶鼠標選中的文本
必須是雙::,首字母無效,只能設置背景色和字體顏色
5.偽元素選擇器----內容生成
使用css代碼,動態的添加html元素
::before 或者 :before
是在當前元素的內容區域的最前方(還是在內容區中),添加一個假的元素
這個元素默認是行內元素
使用content添加內容 (content只能設置文本和圖片)
可以設置其他任意樣式
可以設置display改變元素的顯示方式
::after或者 : after
是在當前元素的內容區域的最后面(還是在內容區中),添加一個假的元素偽元素內容生成,可以解決的問題
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的弟弟元素
多用于一組元素,設置除了老大以外,其它元素的公共樣式
看代碼
<!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]....{}匹配頁面中同時帶有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=
"千里眼順風耳" >二娃</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]..{}匹配頁面中同時帶有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=
"千里眼順風耳" >二娃</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]....{}匹配頁面中同時帶有attr1并且值為v1,attr2并且值為v2,.....屬性的elem元素
p[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=nozuonodie] { color : red
; } </style>
</head>
<body><p>大娃</p><p class=
"c" title=
"千里眼順風耳" >二娃</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結尾的元素
[attr*=value]{} 匹配attr的值中有value的元素
[attr~=value]{} 匹配attr的值中有value這個獨立的單詞的元素(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=
"千里眼順風耳" >二娃</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>
①目標偽類
讓被激活的錨點,應用的樣式
: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的父元素的第一個兒子
而且第一個兒子還得符合selector
selector:last-child{}
找的是selector的父元素的最后一個兒子
而且最后一個兒子還得符合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>
練習:創建4*4表格
通過結構偽類,完成下列樣式
第一行背景色#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
匹配內部沒有任何元素的標簽
內部不許有空格,文字,元素,回車
<!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
匹配第一個字符
:first-line 或者 ::first-line
匹配第一行文本(如果與首字母沖突,聽首字母的樣式)
::selection
匹配用戶鼠標選中的文本
必須是雙::,首字母無效,只能設置背景色和字體顏色
<!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.偽元素選擇器----內容生成
使用css代碼,動態的添加html元素
::before 或者 :before
是在當前元素的內容區域的最前方(還是在內容區中),添加一個假的元素
這個元素默認是行內元素
使用content添加內容 (content只能設置文本和圖片)
可以設置其他任意樣式
可以設置display改變元素的顯示方式
::after或者 : after
是在當前元素的內容區域的最后面(還是在內容區中),添加一個假的元素偽元素內容生成,可以解決的問題
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.什么是彈性布局
就是一種布局方式,
主要解決某個元素的子元素的布局方式(橫向排列,或者縱向排列)
為布局提供很大的靈活性
2.彈性布局的相關概念
容器:
要發生彈性布局的子元素們的父元素,稱之為容器
也就是設置了display:flex的元素.
這個元素本身不是彈性布局,他的兒子們是彈性布局
項目:
要做彈性布局的子元素們,稱之為項目
就是設置了display:flex的元素的子元素們
主軸:(4根)
項目們的排列的方向的一根軸,稱之為主軸
如果項目們橫向排列,x軸就是主軸
如果項目們縱向排列,y軸就是主軸
項目們在主軸上的排列順序,就是主軸的起點和終點
交叉軸(2根)
與垂直相交的一根軸,叫做交叉軸
項目們在交叉軸上的對齊方式,就是交叉軸的起點和終點
3.語法
在項目中,設置display:flex 將塊級元素設置為彈性容器inline-flex 將行內元素設置彈性容器
特點:容器的text-align vertical-align 失效項目的float clear失效
4.容器的屬性
①主軸方向
flex-direction:
row 默認值,主軸是x軸,主軸起點在左邊
row-reverse 主軸是x軸,主軸起點在右邊
column 主軸是y軸,主軸起點在頂端
column-reverse 主軸是y軸,主軸起點在底部
②設置項目是否換行
flex-wrap:
nowrap 默認值,不換行
wrap 換行
wrap-reverse 換行,并反轉
③主軸方向和換行的縮寫
flex-flow:direction wrap;
flex-flow:row-reverse wrap;
④項目在主軸上的對齊方式
justify-content:
flex-start 默認值,主軸起點對齊
flex-end 主軸終點對齊
center 主軸中間對齊
space-between 兩端對齊,兩端無空白
space-around 每個間距大小相同,兩端有空白
⑤項目在交叉軸的對齊方式
align-items:
flex-start 默認值,在交叉軸起點對齊
flex-end 在交叉軸終點
center 在交叉軸中間對齊
stretch 前提 項目不定義高度,設置stretch,項目充滿整個交叉軸
練習,使用彈性完成品質保障
5.項目的屬性,只能設置在某一個項目上,不影響其他項目的效果
①項目排列順序
order:無單位整數;
定義項目排列順序,值越小,越靠近主軸起點,默認值為0
②flex-grow
定義項目的放大比例
如果容器有足夠大的剩余空間,項目將變大
默認值 0 不放大,取值越大,項目放大的越快
③flex-shrink
如果容器空間不足,設置項目該如何縮小
默認值 1. 設置為0不縮小,取值越大,項目縮小越快
④align-self
單獨設置每一個項目交叉軸的對齊
flex-start 默認值,在交叉軸起點對齊
flex-end 在交叉軸終點
center 在交叉軸中間對齊
stretch 前提 項目不定義高度,設置stretch,項目充滿整個交叉軸
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右對齊了,那是因為繼承
①主軸方向
flex-direction:
row 默認值,主軸是x軸,主軸起點在左邊
row-reverse 主軸是x軸,主軸起點在右邊
column 主軸是y軸,主軸起點在頂端
column-reverse 主軸是y軸,主軸起點在底部
<!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>
②設置項目是否換行
flex-wrap:
nowrap 默認值,不換行
wrap 換行
wrap-reverse 換行,并反轉
<!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>
④項目在主軸上的對齊方式
justify-content:
flex-start 默認值,主軸起點對齊
flex-end 主軸終點對齊
center 主軸中間對齊
space-between 兩端對齊,兩端無空白
space-around 每個間距大小相同,兩端有空白
<!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>
如果換成這個值 justify-content: space-around;
⑤項目在交叉軸的對齊方式
align-items:
flex-start 默認值,在交叉軸起點對齊
flex-end 在交叉軸終點
center 在交叉軸中間對齊
stretch 前提 項目不定義高度,設置stretch,項目充滿整個交叉軸
<!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>品質保證</p></a></li><li><a href=
"" ><img src=
"icon1.png" alt=
"" ><p>品質保證</p></a></li><li><a href=
"" ><img src=
"icon1.png" alt=
"" ><p>品質保證</p></a></li><li><a href=
"" ><img src=
"icon1.png" alt=
"" ><p>品質保證</p></a></li></ul>
</body>
</html>
項目的屬性,只能設置在某一個項目上,不影響其他項目的效果
①項目排列順序
order:無單位整數;
定義項目排列順序,值越小,越靠近主軸起點,默認值為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
定義項目的放大比例
如果容器有足夠大的剩余空間,項目將變大
默認值 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
; 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
如果容器空間不足,設置項目該如何縮小
默認值 1. 設置為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
; 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
單獨設置每一個項目交叉軸的對齊
flex-start 默認值,在交叉軸起點對齊
flex-end 在交叉軸終點
center 在交叉軸中間對齊
stretch 前提 項目不定義高度,設置stretch,項目充滿整個交叉軸
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
由于不同瀏覽器,對css的解析認知不同,會導致同一份代碼,在不同瀏覽器下,頁面顯示效果不同
1.開發人員要針對不同的瀏覽器寫不同的樣式.這個行為就叫寫css hack
-o-
-webkit-
-ms-
-moz-
練習
<!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內存|英特爾HD顯卡620含共享顯卡內存</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>
總結
以上是生活随笔 為你收集整理的css第五天 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
