目錄
◆ 結(jié)構(gòu)偽類(lèi)選擇器
◆ 偽元素
◆ 標(biāo)準(zhǔn)流
◆ 浮動(dòng)
◆ 清除浮動(dòng)
一矢棚、結(jié)構(gòu)偽類(lèi)選擇器
目標(biāo)：能夠使用 結(jié)構(gòu)偽類(lèi)選擇器 在HTML中定位元素
1 作用與優(yōu)勢(shì)：
- 作用：根據(jù)元素在HTML中的結(jié)構(gòu)關(guān)系查找元素
- 優(yōu)勢(shì)：減少對(duì)于HTML中類(lèi)的依賴酣胀，有利于保持代碼整潔
- 場(chǎng)景：常用于查找某父級(jí)選擇器中的子元素
2 選擇器
<html lang="en">
<head>
<style>
/* 選中第一個(gè) */
/* li:first-child {
background-color: green;
} */
/* 最后一個(gè) */
/* li:last-child {
background-color: green;
} */
/* 任意一個(gè) */
/* li:nth-child(5) {
background-color: green;
} */
/* 倒數(shù)第xx個(gè) */
li:nth-last-child(1) {
background-color: blue;
}
</style>
</head>
<body>
<!-- ul>li{這是第$個(gè)li}*8 -->
<ul>
<li>這是第1個(gè)li</li>
<li>這是第2個(gè)li</li>
<li>這是第3個(gè)li</li>
<li>這是第4個(gè)li</li>
<li>這是第5個(gè)li</li>
<li>這是第6個(gè)li</li>
<li>這是第7個(gè)li</li>
<li>這是第8個(gè)li</li>
</ul>
</body>
</html>
<html lang="en">
<head>
<style>
/* ** 偶數(shù) 2的倍數(shù)*/
/* li:nth-child(2n) {
/* *** 奇數(shù) */
/* li:nth-child(2n+1) { */
/* 找到前3個(gè) */
/* li:nth-child(-n+3) { */
/* *** 4的倍數(shù) */
li:nth-child(4n) {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>這是第1個(gè)li</li>
<li>這是第2個(gè)li</li>
<li>這是第3個(gè)li</li>
<li>這是第4個(gè)li</li>
<li>這是第5個(gè)li</li>
<li>這是第6個(gè)li</li>
<li>這是第7個(gè)li</li>
<li>這是第8個(gè)li</li>
</ul>
</body>
</html>
二赡矢、偽元素
<head>
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
}
.father::before {
/* 內(nèi)容 */
/* content屬性必須添加, 否則偽元素不生效 */
content: '老鼠';
color: green;
width: 100px;
height: 100px;
background-color: blue;
/* 默認(rèn)是行內(nèi)元素, 寬高不生效 */
display: block;
}
.father::after {
content: '大米';
}
</style>
</head>
<body>
<!-- 偽元素 通過(guò)css創(chuàng)建標(biāo)簽, 裝飾性的不重要的小圖 -->
<!-- 找父級(jí), 在這個(gè)父級(jí)里面創(chuàng)建子級(jí)標(biāo)簽 -->
<div class="father">愛(ài)</div>
<!-- 老鼠愛(ài)大米 -->
</body>
三、標(biāo)準(zhǔn)流
目標(biāo)：能夠認(rèn)識(shí) 標(biāo)準(zhǔn)流 的默認(rèn)排布方式及其特點(diǎn)
? 標(biāo)準(zhǔn)流：又稱文檔流术唬，是瀏覽器在渲染顯示網(wǎng)頁(yè)內(nèi)容時(shí)默認(rèn)采用的一套排版規(guī)則，規(guī)定了應(yīng)該以何種方式排列元素
? 常見(jiàn)標(biāo)準(zhǔn)流排版規(guī)則：
- 塊級(jí)元素：從上往下滚澜，垂直布局粗仓，獨(dú)占一行
- 行內(nèi)元素 或 行內(nèi)塊元素：從左往右，水平布局设捐，空間不夠自動(dòng)折行
小結(jié)
? 標(biāo)準(zhǔn)流中塊級(jí)元素的排版規(guī)則是借浊？
? 從上往下、垂直布局萝招、獨(dú)占一行
? 標(biāo)準(zhǔn)流中行內(nèi)元素或行內(nèi)塊元素的排版規(guī)則是蚂斤？
? 從左往右、水平布局槐沼、空間不夠自動(dòng)折行
四橡淆、浮動(dòng)
目標(biāo)：能夠認(rèn)識(shí)使用 浮動(dòng)的作用，了解 浮動(dòng)的特點(diǎn)
學(xué)習(xí)路徑：
- 浮動(dòng)的作用
- 浮動(dòng)的代碼
- 浮動(dòng)的特點(diǎn)
- 浮動(dòng)的案例
1 浮動(dòng)的作用
2 浮動(dòng)的代碼
<head>
<style>
/* img {
float: left;
} */
div {
width: 100px;
height: 100px;
}
.one {
background-color: pink;
float: left;
}
.two {
background-color: skyblue;
/* flr */
/* float: right; */
float: left;
}
</style>
</head>
<body>
<!-- 1. 圖文環(huán)繞 -->
<!-- <img src="./images/1.jpg" alt="">
時(shí)代呼喚著我們母赵，人民期待著我們逸爵。全黨必須牢記，堅(jiān)持黨的全面領(lǐng)導(dǎo)是堅(jiān)持和發(fā)展中國(guó)特色社會(huì)主義的必由之路凹嘲，中國(guó)特色社會(huì)主義是實(shí)現(xiàn)中華民族偉大復(fù)興的必由之路师倔，團(tuán)結(jié)奮斗是中國(guó)人民創(chuàng)造歷史偉業(yè)的必由之路，貫徹新發(fā)展理念是新時(shí)代我國(guó)發(fā)展壯大的必由之路周蹭，全面從嚴(yán)治黨是黨永葆生機(jī)活力趋艘、走好新的趕考之路的必由之路。 戰(zhàn)略性工作 全黨要把青年工作作為戰(zhàn)略性工作來(lái)抓凶朗，用黨的科學(xué)理論武裝青年瓷胧，用黨的初心使命感召青年，做青年朋友的知心人棚愤、青年工作的熱心人搓萧、青年群眾的引路人-->
<!-- 2. 網(wǎng)頁(yè)布局: 塊在一行排列 -->
<div class="one">one</div>
<div class="two">two</div>
</body>
小結(jié)
? 浮動(dòng)的作用是什么？
- 早期作用：圖文環(huán)繞
- 現(xiàn)在作用：用于布局宛畦，讓垂直布局的盒子變成水平布局瘸洛，如：一個(gè)在左，一個(gè)在右
? 左浮動(dòng)的屬性是次和？右浮動(dòng)的屬性是反肋？ - 左浮動(dòng)：float : left
- 右浮動(dòng)：float : right
3 浮動(dòng)的特點(diǎn)
小結(jié)
? 浮動(dòng)元素的特點(diǎn)有哪些？
- 浮動(dòng)元素會(huì)脫標(biāo)踏施，在標(biāo)準(zhǔn)流中不占位置
- 浮動(dòng)元素比標(biāo)準(zhǔn)流高出半個(gè)級(jí)別石蔗，可以覆蓋標(biāo)準(zhǔn)流中的元素
- 浮動(dòng)找浮動(dòng)罕邀，下一個(gè)浮動(dòng)元素會(huì)在上一個(gè)浮動(dòng)元素后面左右浮動(dòng)
- 浮動(dòng)元素有特殊的顯示效果：① 一行可以顯示多個(gè) ② 可以設(shè)置寬高
<head>
<style>
/* 浮動(dòng)的標(biāo)簽 頂對(duì)齊 */
/* 浮動(dòng): 在一行排列, 寬高生效 -- 浮動(dòng)后的標(biāo)簽具備行內(nèi)塊特點(diǎn) */
.one {
width: 100px;
height: 100px;
background-color: pink;
float: left;
margin-top: 50px;
}
.two {
width: 200px;
height: 200px;
background-color: skyblue;
float: left;
/* 因?yàn)橛懈?dòng), 不能生效 - 盒子無(wú)法水平居中 */
margin: 0 auto;
}
.three {
width: 300px;
height: 300px;
background-color: orange;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
4 浮動(dòng)的案例
<head>
<style>
* {
margin: 0;
padding: 0;
}
.top {
/* 寬度高度背景色 */
height: 40px;
background-color: #333;
}
.header {
width: 1226px;
height: 100px;
background-color: #ffc0cb;
margin: 0 auto;
}
.content {
width: 1226px;
height: 460px;
background-color: green;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 460px;
background-color: #ffa500;
}
.right {
float: left;
width: 992px;
height: 460px;
background-color: #87ceeb;
}
/* CSS書(shū)寫(xiě)順序: 瀏覽器執(zhí)行效率更高
1. 浮動(dòng) / display
2. 盒子模型: margin border padding 寬度高度背景色
3. 文字樣式
*/
</style>
</head>
<body>
<!-- 通欄的盒子: 寬度和瀏覽器寬度一樣大 -->
<div class="top"></div>
<div class="header">頭部</div>
<div class="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
head>
<style>
* {
margin: 0;
padding: 0;
}
div {
height: 614px;
width: 1226px;
background-color: red;
margin: 0 auto;
}
.left {
background-color: #800080;
width: 234px;
height: 614px;
float: left;
}
.right {
background-color: blue;
width: 978px;
height: 614px;
float: right;
}
.right li {
width: 234px;
height: 300px;
background-color: #87ceeb;
margin-bottom: 14px;
margin-right: 14px;
/* 取消li的小圓點(diǎn) */
list-style: none;
float: left;
}
.right li:nth-child(4n) {
margin-right: 0;
}
</style>
</head>
<body>
<div>
<div class="left">
</div>
<div class="right">
<ul>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
</div>
</div>
</body>
<head>
<style>
.nav li {
float: left;
list-style: none;
background-color: #ffc0cb;
line-height: 50px;
text-align: center;
font-size: 16px;
width: 80px;
height: 50px;
}
.nav li a {
/* float: left; */
display: inline-block;
width: 80px;
height: 50px;
text-decoration: none;
color: white;
}
.nav li a:hover {
background-color: #008000;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<!-- 導(dǎo)航標(biāo)準(zhǔn)寫(xiě)法 ul-li-a -->
<li><a href="">新聞1</a></li>
<li><a href="">新聞2</a></li>
<li><a href="">新聞3</a></li>
<li><a href="">新聞4</a></li>
<li><a href="">新聞5</a></li>
<li><a href="">新聞6</a></li>
<li><a href="">新聞7</a></li>
<li><a href="">新聞8</a></li>
</ul>
</div>
</body>
書(shū)寫(xiě)網(wǎng)頁(yè)導(dǎo)航步驟：
- 清除默認(rèn)的margin和padding
- 找到ul，去除小圓點(diǎn) list-style: none;
- 找到li標(biāo)簽养距，設(shè)置浮動(dòng)讓li一行中顯示
- 找到a標(biāo)簽燃少，設(shè)置寬高 → a標(biāo)簽?zāi)J(rèn)是行內(nèi)元素，默認(rèn)不能設(shè)置寬高铃在？？
? 方法一：給a標(biāo)簽設(shè)置 display : inline-block
? 方法二：給a標(biāo)簽設(shè)置 display : block
? 方法三：給a設(shè)置 float : left
五碍遍、清除浮動(dòng)
目錄
- 清除浮動(dòng)的介紹
- 清除浮動(dòng)的方法
1 清除浮動(dòng)的介紹
? 含義：清除浮動(dòng)帶來(lái)的影響
? 影響：如果子元素浮動(dòng)了定铜，此時(shí)子元素不能撐開(kāi)標(biāo)準(zhǔn)流的塊級(jí)父元素
? 原因：
? 子元素浮動(dòng)后脫標(biāo) → 不占位置
? 目的：
? 需要父元素有高度，從而不影響其他網(wǎng)頁(yè)元素的布局
小結(jié)
? 清除浮動(dòng)的含義是什么怕敬？
? 清除浮動(dòng)帶來(lái)的影響
? 影響：如果子元素浮動(dòng)了揣炕，此時(shí)子元素不能撐開(kāi)父元素
? 清除浮動(dòng)的目的是什么？
? 需要父元素有高度东跪，從而不影響其他網(wǎng)頁(yè)元素的布局
2.1 清除浮動(dòng)的方法 — ① 直接設(shè)置父元素高度
2.2 清除浮動(dòng)的方法 — ② 額外標(biāo)簽法
? 操作：
- 在父元素內(nèi)容的最后添加一個(gè)塊級(jí)元素
-
給添加的塊級(jí)元素設(shè)置 clear:both
? 特點(diǎn)：
? 缺點(diǎn)：會(huì)在頁(yè)面中添加額外的標(biāo)簽畸陡，會(huì)讓頁(yè)面的HTML結(jié)構(gòu)變得復(fù)雜
額外標(biāo)簽法
<head>
<style>
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
/*額外標(biāo)簽法*/
.clearfix {
/* 清除左右兩側(cè)浮動(dòng)的影響 */
clear: both;
}
</style>
</head>
<body>
<!-- 父子級(jí)標(biāo)簽, 子級(jí)浮動(dòng), 父級(jí)沒(méi)有高度, 后面的標(biāo)準(zhǔn)流盒子會(huì)受影響, 顯示到上面的位置 -->
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
<div class="bottom"></div>
</body>
2.3 清除浮動(dòng)的方法 — ③ 單偽元素清除法
偽元素消除法
<head>
<style>
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
/* 單偽元素清除浮動(dòng) 和 額外標(biāo)簽法原理是一樣的 */
/* top盒子添加clearfix 類(lèi)名選擇器,添加塊內(nèi)屬性*/
.clearfix::after {
content: '';
/* 偽元素添加的標(biāo)簽是行內(nèi), 要求塊 */
display: block;
clear: both;
/* 為了兼容性 適配低版本瀏覽器 */
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<!-- 父子級(jí)標(biāo)簽, 子級(jí)浮動(dòng), 父級(jí)沒(méi)有高度, 后面的標(biāo)準(zhǔn)流盒子會(huì)受影響, 顯示到上面的位置 -->
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
<!-- 通過(guò)css 添加標(biāo)簽 clearfix -->
</div>
<div class="bottom"></div>
</body>
2.4 清除浮動(dòng)的方法 — ④ 雙偽元素清除法
雙偽元素消除法
<head>
<style>
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
/* .clearfix::before 作用: 解決外邊距塌陷問(wèn)題
外邊距塌陷: 父子標(biāo)簽, 都是塊級(jí), 子級(jí)加margin會(huì)影響父級(jí)的位置
*/
/* 清除浮動(dòng) */
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
/* 真正清除浮動(dòng)的標(biāo)簽 */
.clearfix::after {
/* content: '';
display: table; */
clear: both;
}
</style>
</head>
<body>
<!-- 父子級(jí)標(biāo)簽, 子級(jí)浮動(dòng), 父級(jí)沒(méi)有高度, 后面的標(biāo)準(zhǔn)流盒子會(huì)受影響, 顯示到上面的位置 -->
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
2.5 清除浮動(dòng)的方法 — ⑤ 給父元素設(shè)置overflow : hidden
? 操作：
- 直接給父元素設(shè)置 overflow : hidden
? 特點(diǎn)：
? 優(yōu)點(diǎn)：方便
給父元素設(shè)置overflow
<head>
<style>
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
overflow: hidden;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 父子級(jí)標(biāo)簽, 子級(jí)浮動(dòng), 父級(jí)沒(méi)有高度, 后面的標(biāo)準(zhǔn)流盒子會(huì)受影響, 顯示到上面的位置 -->
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
清除浮動(dòng)小結(jié)
清除浮動(dòng)（拓展補(bǔ)充）BFC的介紹
? 塊格式化上下文（Block Formatting Context）：BFC
? 是Web頁(yè)面的可視CSS渲染的一部分，是塊盒子的布局過(guò)程發(fā)生的區(qū)域虽填，也是浮動(dòng)元素與其他元素交互的區(qū)域丁恭。
? 創(chuàng)建BFC方法：
- html標(biāo)簽是BFC盒子
- 浮動(dòng)元素是BFC盒子
- 行內(nèi)塊元素是BFC盒子
- overflow屬性取值不為visible。如：auto斋日、hidden…
- ……
? BFC盒子常見(jiàn)特點(diǎn)： - BFC盒子會(huì)默認(rèn)包裹住內(nèi)部子元素（標(biāo)準(zhǔn)流牲览、浮動(dòng)）→ 應(yīng)用：清除浮動(dòng)
- BFC盒子本身與子元素之間不存在margin的塌陷現(xiàn)象 → 應(yīng)用：解決margin的塌陷
- ……
