收藏
批改狀態(tài)：合格
老師批語：寫得還可以
1. 實例演示相鄰選擇器與兄弟選擇器,并分析異同
相鄰選擇器，選擇與之相鄰的一個元素的樣式變化；
兄弟選擇器，選擇與之相鄰的后面所有的元素的樣式變化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
ul {
width: 314px;
height: 54px;
border: 1px solid red;
box-sizing: border-box;
margin: 10px auto;
font-size: 0px;
/* 內(nèi)聯(lián)元素的父級元素上設置font-size: 0px;可以讓內(nèi)聯(lián)樣式的間隔取消；請在子級設置字體大小 */
}
li {
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
border-radius: 50%;
border: 1px solid #000;
text-align: center;
list-style: none;
font-size: 14px;
}
#blue {
background: cornflowerblue
}
#blues {
background: cornflowerblue
}
#blue+* {
background: darkcyan
}
/* 相鄰選擇器，選擇與之相鄰的一個元素的樣式變化 */
#blues~* {
background: rgb(103, 10, 189)
}
/* 兄弟選擇器，選擇與之相鄰的后面所有的元素的樣式變化 */
</style>
</head>
<body>
<ul>
<li>1</li>
<li id="blue">2</li>
<li>3</li>
<li id="blues">4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
2. 實例演示:nth-child() 和 :nth-of-type()選擇器,并分析異同
:nth-child() 元素選擇器；簡單的來說，是用于位置選擇的；
:nth-of-type()是類選擇器；用于選擇某個類，不能簡單的按照位置這個概念去理解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div :first-child {
background: blue;
/* nth-child()元素選擇器，這里的意思是每個div里的第一個元素位置，背景顏色都為藍色 */
}
div:nth-of-type(3) :nth-child(2) {
background: chocolate
}
/* nth-of-type()是類選擇器，這里的意思是在第3個div類里的第2個元素位置，背景顏色都為橙色 */
</style>
</head>
<body>
<div>
<li>1.1</li>
<p>1.2</p>
<li>1.3</li>
<li>1.4</li>
</div>
<div>
<p>2.1</p>
<p>2.2</p>
<li>2.3</li>
<li>2.4</li>
</div>
<div>
<p>3.1</p>
<p>3.2</p>
<li>3.3</li>
<li>3.4</li>
</div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
3. 實例演示:padding 對盒子大小的影響與解決方案, 使用寬度分離或box-sizing
2種寫法來解決padding對盒子大小的影響，
第1種為寬度分類的寫法，核心在于，實際寬度的值與padding之間的值的相減；
第2種寫法，使用box-sizing屬性；這樣就不用擔心寬度高度的值需要減去padding的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<!--這里只做對比說明 -->
<style>
/* 第一種寬度分離的寫法 */
.box_1 {
width: 150px;
/*因為使用了padding，所以寬度需要減去20*2的長度，才是真正的300px */
height: 150px;
/*因為使用了padding，所以高度需要減去10*2的長度，才是真正的200px */
background: darkslateblue;
margin: 10px;
padding: 75px;
}
.box_2 {
width: 150px;
/*因為使用了padding，所以寬度需要減去20*2的長度，才是真正的260px */
height: 150px;
/*因為使用了padding，所以高度需要減去10*2的長度，才是真正的180px */
background: rgb(5, 236, 63);
}
/* 第二種box-sizing: border-box的寫法 */
.box_3 {
width: 300px;
height: 300px;
background: darkslateblue;
margin: 10px;
padding: 75px;
box-sizing: border-box;
/* 使用 box-sizing: border-box這個屬性，可以忽略padding值造成的影響*/
}
.box_4 {
width: 150px;
height: 150px;
background: rgb(5, 236, 63);
}
</style>
</head>
<body>
<div class="box_1">
<div class="box_2"></div>
</div>
<div class="box_3">
<div class="box_4"></div>
</div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
4. 實例演示: margin中的同級塌陷, 嵌套傳遞與自動擠壓, 并提出解決方案或應用場景
4.1margin中的同級塌陷
margin塌陷只發(fā)生在真正意義的塊級元素上（浮動跟那些inline-block不算），瀏覽器應該是希望我們塊級元素只設置上下其中的一個margin就好了，避免margin塌陷。
解決辦法：可以將塊級元素改為內(nèi)聯(lián)元素，或者在塊級元素外面嵌套一層父級，采用浮動的做法，父級記得使用
overflow: hidden來清浮動。
4.2嵌套傳遞的解決方法
子級的marin-top會影響父級的變化；解決方法是父級采用padding；或者用浮動
4.3自動擠壓
主要用在導航，或者居中顯示等特殊位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*同級傳遞的問題 */
.box {
overflow: hidden;
width: 150px;
}
/* 這里設置了一個父級，主要用于下面margin中的同級塌陷的解決，更簡單的方法是設置其中一個塊元素的margin就可以了。 */
.box1 {
width: 150px;
height: 150px;
background: blue;
margin-bottom: 10px;
float: left;
}
.box2 {
width: 150px;
height: 150px;
background: rgb(5, 219, 41);
margin-top: 20px;
float: left;
}
/*嵌套傳遞的問題 */
.box3 {
width: 150px;
height: 150px;
background: rgb(216, 98, 30);
text-align: center;
/* overflow: hidden; 解決方法是父級采用padding；或者用浮動,記住要清浮動*/
}
.box4 {
width: 50px;
height: 50px;
background: rgb(62, 1, 131);
margin-top: 50px;
/* 這里主要是嵌套傳遞的一個問題；子級的marin-top會影響父級的變化；解決方法是父級采用padding；或者用浮動 */
float: left;
}
/*自動擠壓的問題 */
.box5 {
width: 150px;
height: 150px;
background: rgb(10, 115, 235);
text-align: center;
margin: 10px auto;
/* 上下擠壓10px；然后居中顯示 */
line-height: 150px;
}
</style>
</head>
<body>
<!-- 同級塌陷演示 -->
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
</div>
<!-- 嵌套傳遞演示 -->
<div class="box3">
<div class="box4">4</div>
</div>
<!-- 自動擠壓演示 -->
<div class="box5">居中顯示</div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
