作业一、二
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homework1,2</title>
<style>
ul {
margin: 0;
padding-left: 0;
border: 1px dashed red;
}
ul * {
list-style-type: none;
width: 40px;
height: 40px;
border: 1px solid black;
text-align: center;
line-height: 40px;
border-radius: 20px;
background-color: yellow;
display: inline-block;
box-shadow: 2px 2px #888;
}
#bbb+* {
background-color: red;
}
#ccc~* {
background-color: lightblue;
}
ul :nth-child(5) {
background-color: lightgreen;
}
ul :nth-of-type(2) {
background-color: green;
}
</style>
</head>
<body>
<!-- 9月3日作业:
1. 实例演示相邻选择器与兄弟选择器,并分析异同
2. 实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同 -->
<h3>演示一、二</h3>
<ul>
<li>1</li>
<li class="AAA">2</li>
<li id="bbb">3</li>
<p>4</p>
<li>5</li>
<p>6</p>
<li>7</li>
<li id="ccc">8</li>
<li>9</li>
<li>10</li>
</ul>
<h5>作业一：小球4、9、10</h5>
<p>相邻与兄弟选择器代码分别是：???+*和???~*</p>
<p>他们相同点都是选择具有父标签的子标签，且是定位到的子标签的后面</p>
<p>不同点是相邻选择的是一个，兄弟选择的是多个</p>
<h5>作业二：小球2、5、6</h5>
<p>“ul :nth-of-type(2)”选择了li和P标签的第二个</p>
<p>都是子元素选择器， 不同之处在于nth-child（）关注位置，而nth-of-type关注位置和类型
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业三：
实例二padding对盒子尺寸的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homework3,4</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: wheat;
padding: 50px;
}
</style>
</head>
<body>
<div class="box1">
<img class="box2" src="http://img5***gtn.bdimg.com/it/u=1651784409,2280563546&fm=26&gp=0.jpg"></div>
</div>
<p>盒子被撑大了</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
在以上代码的.box1属性中加入 box-sizing: border-box; 把默认以内容区作为计算条件的尺寸设置为以边框，即可解决盒子变大的问题。
实例三，同级塌陷、嵌套传递、自动挤压
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.boxred {
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 30px;
}
.boxblue {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 30px;
position: absolute;
}
.boxgreen {
width: 100px;
height: 100px;
background-color: green;
margin-top: 30px;
position: absolute;
}
.boxpink {
width: 100px;
height: 100px;
background-color: pink;
margin: auto;
}
</style>
</head>
<body>
<div class="boxred">
<div class="boxblue">
</div>
</div>
<div class="boxgreen"></div>
<div class="boxpink"></div>
</body>运行实例 »
点击 "运行实例" 按钮查看在线实例
同级塌陷：红盒子和绿盒子，红盒子有30像素的下外边距，绿盒子有30像素的上外边距，两者重叠了。
嵌套传递：红盒子中的蓝盒子，有30像素的上外边距，这个属性传递给了蓝盒子外面的红盒子，让其与顶部有30像素的边距。
自动挤压：粉盒子的外边距margin设置为了auto自动，在左和右外边距生效，所以自动居中了。
如何解决同级塌陷？
给绿盒子加入一个属性 position:absolute;绝对定位，红盒子的下外边距和绿盒子的上外边距就相加等于60了
如何解决嵌套传递？
给蓝盒子也加入一个属性 position:absolute;绝对定位，就可以让蓝盒子的30像素外边距在红盒子内部生效了。
