收藏
批改状态：合格
老师批语：几乎所有的布局bug, 都与这二个家伙相关: 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"> <link rel="stylesheet" href="style1.css"> <title>选择器</title> </head> <body> <p>相邻选择器 <ul> <li class="no1">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </p> <p>兄弟选择器 <ul> <li class="no2">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </p> </body> </html>
点击 "运行实例" 按钮查看在线实例
ul {
margin: 0;
padding-left: 0;
border: 1px dashed red;
}
ul li {
list-style-type: none;
width: 40px;
height: 40px;
background-color: lightblue;
/* 文本水平居中 */
text-align: center;
/* 文本垂直居中 */
line-height: 40px;
/* 圆角 */
border-radius: 50%;
display: inline-block;
/* 阴影 */
box-shadow: 2px 2px 1px #888;
}
.no1 {
background-color: rgb(212, 212, 34);
}
.no2 {
background-color: rgb(40, 231, 206);
}
/* 相邻选择器 */
.no1+* {
background-color: red;
}
/* 兄弟选择器 */
.no2~* {
background-color: blue;
}点击 "运行实例" 按钮查看在线实例
2.实例演示: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"> <link rel="stylesheet" href="style1.css"> <title>选择器</title> </head> <body> <p> <ul> <li class="no1">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </p> </body> </html>
点击 "运行实例" 按钮查看在线实例
/* 伪类选择器 */
ul :nth-child(5) {
background-color: burlywood;
}
ul :nth-last-child(2) {
background-color: yellowgreen;
}点击 "运行实例" 按钮查看在线实例
3.实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
<!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">
<style>
div {
width: 500px;
border: 1px solid red;
background: lightgreen;
padding: 50px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="box">
<img src="C:/phpstudy_pro/WWW/html/1.png" alt="" width="300px">
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
解决方案：添加box-sizing语句
<style>
div {
width: 500px;
border: 1px solid red;
background: lightgreen;
box-sizing: border-box;
padding: 50px;
}
</style>点击 "运行实例" 按钮查看在线实例
4.实例演示: 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">
<style>
.box1 {
width: 200px;
height: 200px;
background-color: lightblue;
margin-bottom: 30px;
}
.box2 {
width: 200px;
height: 200px;
background-color: lightcoral;
margin-top: 30px;
}
}
</style>
<title>Document</title>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
解决方案是只需要设置一个margin值。
.box1 {
width: 200px;
height: 200px;
background-color: lightblue;
margin-bottom: 60px;
}
.box2 {
width: 200px;
height: 200px;
background-color: lightcoral;
}点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
