【css基础作业：选择器使用 内边距 外边距】
1、实例演示相邻选择器与兄弟选择器,并分析异同
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>相邻选择器与兄弟选择器</title>
<meta charset="utf-8">
<style type="text/css">
ul {
border: 1px dashed red;
}
ul li {
list-style: none;
width: 40px;
height: 40px;
border: 1px solid black;
border-radius: 50%;
background-color: wheat;
text-align: center;
line-height: 40px;
display: inline-block;
box-shadow: 3px 3px 3px #888;
}
#bg-blue{
background-color: blue;
}
.bg-green{
background-color: green;
}
#bg-blue ~ *{
background-color: yellow;
}
#bg-blue + *{
background-color: red;
}
</style>
</head>
<body>
<ul>
<li class="bg-green">1</li>
<li id="bg-blue">2</li>
<li class="bg-green">3</li>
<li class="bg-green">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
相同点：1、选中范围均为定位元素后的，不对定位元素之前的区域产生作用。2、只对同一块中同类元素产生作用，即只对相同父级元素起作用。
不同点：选中数量不一样，相邻选择器只作用于定位元素后第一位的同类元素，兄弟选择器作用于定位元素后所有同类元素
2、实例演示:nth-child() 和 :nth-of-type()选择器,并分析异同
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>nth-child() 和 :nth-of-type()选择器</title>
<meta charset="utf-8">
<style type="text/css">
p:nth-child(3){
background-color: yellow;
}
p:nth-of-type(3){
background-color: red;
}
</style>
</head>
<body>
<div>nth-child() 和 :nth-of-type()选择器区别1</div>
<div>nth-child() 和 :nth-of-type()选择器区别2</div>
<p>1</p>
<div>nth-child() 和 :nth-of-type()选择器区别2</div>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
不同点：选中数量不一样，
p :nth-child(3) 选择某父元素的子元素p 且p元素是父元素的第3个子元素。即一般在body下第3个元素是p时会被选中
p :nth-of-type(3)选择器：选中同一类p中的第三位，即标签下第三个p标签会被选中
3、实例演示:padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
实例
<!DOCTYPE html>
<html>
<head>
<title>padding对盒子大小的影响</title>
<meta charset="utf-8">
<style type="text/css">
.box1{
width: 300px;
border: 1px solid lightblue;
background-color: lightgreen;
}
.box1{
padding: 50px;
width: 200px;/*若不增加此处，浏览器会被撑出*/
}
.box2{
width: 300px;
border: 1px solid lightblue;
background-color: lightgreen;
padding:50px;
box-sizing:border-box;
}
.box4{
width: 300px;
}
.box5{
border: 1px solid lightblue;
background-color: lightblue;
padding: 50px;
}
</style>
</head>
<body>
<!-- 强制将box宽度计算设置好 -->
<div class="box1">
<img src="girl.jpg" width="200">
</div>
<!-- 使用box-sizing：border-box控制 -->
<div class="box2">
<img src="girl.jpg" width="200">
</div>
<!-- 宽度分离 -->
<div class="box4">
<div class="box5"><img src="girl.jpg" width="200"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4、实例演示: margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
同级塌陷：同级塌陷主要表现在两个元素的相对方向上的外边距magin=max（magin1，magin2）
如下：两个div的外边距为100px 。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>margin</title>
<meta charset="utf-8">
<style type="text/css">
.box1{
background-color: lightgreen;
width: 100px;
height: 100px;
margin-bottom: 50px;
}
.box2{
background-color: lightblue;
width: 100px;
height: 100px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
嵌套传递：即内嵌块将magin传到外块。可通过固定内块位置避免magin传递
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>margin</title>
<meta charset="utf-8">
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: lightblue;
}
.box2{
width: 100px;
height: 100px;
background-color: lightcoral;
margin-top: 50px;
position: absolute;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
自动挤压：即所在块元素在水平方向自动挤压居中。避免方法：设置margin-left或margin-right等值
实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>自动挤压</title>
<meta charset="utf-8">
<style type="text/css">
.box1{
height: 100px;
width: 100px;
background-color: lightblue;
margin: auto;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例