收藏
批改狀態(tài)：合格
老師批語：案例完成的非常棒
一、相鄰選擇器與兄弟選擇器
<!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 type="text/css">
ul {
width: 500px;
height: 50px;
list-style: none;
border: dashed 1px pink;
padding: 10px;
}
li {
float: left;
width: 50px;
height: 50px;
line-height: 50px;
background-color: blue;
text-align: center;
border-radius: 50%;
}
/* 相鄰選擇器 */
#two+* {
background-color: green;
}
/* 兄弟選擇器 */
#five~* {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li id="two">2</li>
<li>3</li>
<li>4</li>
<li id="five">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
相鄰和兄弟選擇器都可以選中該元素后面的元素，不過相鄰選擇器只可以選擇與該元素相鄰的后面第一個元素，而兄弟元選擇器可以選擇該元素后面的所有兄弟元素。
二、: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 type="text/css">
div :nth-child(2) {
color: red;
}
div p:nth-of-type(2) {
color: green;
}
</style>
</head>
<body>
<div>
<p>蘋果</p>
<li>香蕉</li>
<p>橘子</p>
</div>
<div>
<p>蘋果2</p>
<li>香蕉2</li>
</div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
:nth-child() 和 :nth-of-type()偽類選擇器都可以選擇指定位置的元素，而:nth-of-type()在指定位置的同時還限制了元素類型。
三、padding 對盒子大小的影響與解決方案
![}4$SH(1HVZI]CFV$$PJ4(K7.png](https://img.php.cn/upload/image/789/255/830/1567600884728057.png "1567600884728057.png")
要實現(xiàn)上圖圖片在盒子居中效果 我們可以使用給盒子加padding屬性，但是加了padding盒子就會整體變大，如下圖
本身圖片為200px；盒子定義的為200px；當添加50px的padding時，此時盒子大小為300*300px。
為了解決這個問題我們可以使用css3的屬性box-sizing；我們設(shè)置盒子本身為300px；在設(shè)置padding為50px；此時設(shè)置盒子的box-sizing：border-box；這時盒子本身還是300px；并不會變大，此時盒子設(shè)置的widht值可以理解為content寬度+padding。如下圖
四、margin中的同級塌陷, 嵌套傳遞與自動擠壓
margin中的同級塌陷
<!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 type="text/css">
.box1 {
width: 50px;
height: 50px;
background-color: green;
margin-bottom: 50px;
}
.box2 {
width: 50px;
height: 50px;
background-color: red;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
嵌套傳遞
<!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 type="text/css">
.box1 {
width: 150px;
height: 150px;
background-color: green;
}
.box2 {
width: 50px;
height: 50px;
background-color: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
解決嵌套傳遞，可以父盒子的加個對應(yīng)的padding值，而子盒子的margin值去掉。
自動擠壓
<!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 type="text/css">
.box1 {
width: 150px;
height: 150px;
background-color: green;
margin: auto;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
自動擠壓常用于實現(xiàn)將盒子水平居中的效果。
總結(jié)：
1、兄弟選擇器和相鄰選擇器可以很方便的按需求選取一個或者多個元素。
2、:nth-child() 和 :nth-of-type()和偽類可以很方便的指定位置和指定位置同時限制元素。
3、在使用padding的時候可以加上box-sizing屬性來解決盒子變大問題
4、margin中有同級塌陷（垂直方向），嵌套傳遞問題（父盒子上加相關(guān)屬性解決），而自動擠壓可以實現(xiàn)特殊效果（水平居中）。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號