作业一：相邻选择器和兄弟选择器的实例与区分。
1. 相邻选择器只是针对【后面】【紧跟】的【第一个】【兄弟】；
2. 兄弟选择器是针对后面所有的同代兄弟；
实例如下：
实例
<!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>选择器-1</title>
</head>
<body>
<style>
/*
*兄弟选择器*所有的DIV元素后面的，和该div元素同代的全部p元素，也包含第一个
*/
div~p {
border: 3px dotted chocolate;
}
/*
*相邻选择器*所有的DIV元素，紧靠该div元素后面的第1个同代p元素
*/
div+p {
border: 1px solid chartreuse;
width: 250px;
height: 50px;
}
</style>
<caption>
相邻选择器与兄弟选择器
</caption>
<p>
这是div前面的p版块内容
</p>
<div class="pa">
这是内容A
</div>
<p>
这是内容P-a-1
</p>
<p>
这是内容P-a-2
</p>
<p>
这是内容P-a-3
</p>
<aside>
这是aside版块
<p>这是aside里面的一个p版块</p>
</aside>
<p>
这是紧跟着aside的p版块
</p>
<div>
这是内容B
</div>
<p>
这是内容P-b-1
</p>
<p>
这是内容P-b-2
</p>
<h4>兄弟选择器</h4>
<p>
这是内容P-b-3
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业二：nth-child(n)与nth-of-type(n)的异同点
*这两个选择器的根本区别在索引的基础不一样。
div p:nth-child(2)是对父元素(div)中所有子元素进行排序,p必须是索引2，样式才有效；
div p:nth-of-type(2)是对父元素(div)中所有子元素的所有p元素重新进行排序，第2个p元素，样式有效；
*/
实例
<!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>
</head>
<body>
<h4>伪类选择器nth-of-type和nth-child(n)的异同点</h4>
<style>
/*
*符合3个条件的元素；
(1)在div中所有的子代元素里面
(2)索引是2
(3)还必须是p元素的元素
*/
div p:nth-child(2) {
border: 1px solid cornflowerblue;
width: 180px;
padding: 10px;
font-size: 10px;
}
/*
(1)在div中所有的子代元素中的所有P元素中，
(2)索引是2
*这两个选择器的根本区别在索引的基础不一样。
div p:nth-child(2)是对父元素(div)中所有子元素进行排序,p必须是索引2，样式才有效；
div p:nth-of-type(2)是对父元素(div)中所有子元素的所有p元素重新进行排序，第2个p元素，样式有效；
*/
div p:nth-of-type(2) {
width: 200px;
padding: 10px;
background-color: brown;
color: chartreuse;
}
</style>
<div>
<div>
<span>索引1</span>
<p>索引2</p>
</div>
<p>按div里面全部元素排序，索引2，按全部的p元素排序，索引是1</p>
<p>按div里面全部元素排序，索引3，按全部的p元素排序，索引是2</p>
<div>
版块B
<p>版块B-a</p>
</div>
<p> 版块D </p>
<p>版块C</p>
</div>
<div>
<p>版块F</p>
<div>
版块E
<p>版块E-a</p>
</div>
<p> 版块 G </p>
<p>版块H</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业三：控制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>
</head>
<body>
<style>
div {
border: 1px solid cadetblue;
width: 200px;
height: 200px;
font-size: 12px;
}
.pa-a {
padding: 50px;
}
#pa-c {
box-sizing: border-box;
padding: 50px;
overflow: hidden;
margin-bottom: 100px;
}
</style>
<h4>padding对容器的影响问题</h4>
<h5>标准框</h5>
<div>
这是不带padding样式的标准容器,宽高均为200；
</div>
<div class="pa-a">
这是带了padding=50样式的容器，可以看出容器向外扩了50+50；
</div>
<div>
<p class="pa-a">
这是在外面增加了一个容器后再padding=50样式的情况<br> 这里有个坑，需要注意：内容的溢出情况。 外容器不撑开的情况下，内容器的内容多了会溢出。
</p>
</div>
<div id="pa-c">
这是加了料的容器。<br> 这是带了padding=50样式的容器，但是同时还添加了box-sizing:border-box样式条件；
<br>相对会好一些，照样会溢出。
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业四：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>
</head>
<body>
<style>
div {
width: 100px;
height: 100px;
border: 2px solid cornflowerblue;
}
body {
font-size: 15px;
}
#ma-a {
margin-bottom: 70px;
}
#ma-b {
margin-top: 60px;
margin-bottom: 20px;
}
#ma-c {
margin-top: 20px;
}
#ma-d {
padding: 10px;
box-sizing: border-box;
}
#ma-e {
width: 50px;
height: 50px;
font-size: 12px;
}
#ma-f {
margin-left: auto;
}
#ma-g {
margin: 10px auto;
}
#ma-h {
margin-right: auto;
}
</style>
<h4>margin的常见问题</h4>
<dl>
同级塌陷:<br>两个容器同级垂直排列时，下面容器的margin-top样式与上面容器的margin-bottom样式，谁的数字大谁有效；
</dl>
<dd>
<div id="ma-a">
容器A
</div>
<div id="ma-b">
容器B
</div>
<div id="ma-c">
容器C
</div>
</dd>
<dl>
嵌套传递——重点解决父容器不变的问题
</dl>
<dd>
<div id="ma-d">
<div id="ma-e">
嵌套容器
</div>
</div>
</dd>
<dl>
自动挤压——容器的居中和偏移
</dl>
<dd>
<div id="ma-f">
靠右
</div>
<div id="ma-g">
居中
</div>
<div id="ma-h">
靠左
</div>
</dd>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例