按照惯例还是先上实例代码
实例
<!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="style.css"> -->
<title>Document</title>
</head>
<style>
ul,
li {
margin: 0;
padding: 0
}
ul li {
list-style: none;
width: 40px;
height: 40px;
border: 1px solid #000;
display: inline-block;
text-align: center;
line-height: 40px;
border-radius: 50%;
}
.box1,
.box2,
.box3 {
border: 1px solid #000;
width: 500px;
float: left;
}
.box {
width: 100px;
height: 100px
}
#item {
background: yellow;
}
/* 相邻选择器 */
/* #item后面相邻一个元素 */
#item+* {
background: coral;
}
/* #item后面相邻一个li元素 */
#item+li {
background: chartreuse;
}
/* 跟li同级的后面第一个p元素 */
li+p {
color: red
}
/* 连续选择相邻的同级元素 */
li+p+span {
color: green
}
/* 兄弟选择器 */
#item+li~li {
background: chocolate
}
/* li元素以后的所有同级div */
li~div {
background: blue
}
/* 伪类选择器 */
/* :nth-child() */
/* ul下第一个子元素 */
.list :first-child {
background: grey;
}
/* ul下倒数第二个子元素 */
.list :nth-last-child(2) {
background: red;
}
/* ul下第五个子元素 */
.list :nth-child(5) {
border: none;
}
/* :nth-of-type() */
/* ul下p标签第二个 */
ul p:nth-of-type(2) {
font-size: 20px
}
/* ul下第一个li */
ul li:first-of-type {
color: red
}
ul li:last-of-type {
color: lightskyblue
}
/* padding对盒子大小的影响 */
.box4 {
width: 300px;
background: pink;
border: 1px;
padding: 50px
}
.box5 {
width: 200px;
height: 200px;
background: yellow;
border: 1px;
padding: 100px;
}
/* 宽度分离 */
.box6 {
width: 300px;
background: hotpink;
border: 1px;
padding: 50px
}
.box7 {
padding: 100px;
background: lightblue;
border: 1px;
}
/*box-sizing*/
.box8 {
width: 300px;
background: orange;
border: 1px;
padding: 50px
}
.box9 {
box-sizing: border-box;
width: 300px;
border: 1px;
padding: 100px;
background: lightblue
}
.box10 {
width: 100px;
height: 100px;
background: lightblue;
margin-bottom: 50px;
}
.box11 {
width: 100px;
height: 100px;
background: lightgreen;
margin-top: 50px;
}
.box12 {
width: 150px;
height: 150px;
background: yellow;
}
.box13 {
width: 100px;
height: 100px;
background: cyan;
margin: 50px
}
.box14 {
background: blue;
width: 100px;
height: 100px;
margin: 0 auto;
}
</style>
<body>
<div class="box1">
<!-- 选择器 -->
<h1>选择器</h1>
<ul class="list">
<li>1</li>
<li>2</li>
<li id="item">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<p>How are you!</p>
<span>你好啊!</span>
<p>baidu</p>
<div class="box"></div>
</ul>
</div>
<div class="box3">
<h1> margin中的同级塌陷, 嵌套传递与自动挤压</h1>
<!-- margin同级坍塌 -->
<div class="box10"></div>
<div class="box11"></div>
<!-- 嵌套传递 -->
<div class="box12">
<div class="box13"></div>
</div>
<!-- 自动挤压 -->
<div class="box14"></div>
</div>
<div class="box2">
<h1>padding 对盒子大小的影响</h1>
<!-- 直接使用padding -->
<div class="box4">
<div class="box5">
普通情况，父元素和子元素都添加有padding,父元素被挤大了
</div>
</div>
<!-- 宽度分离 -->
<div class="box6">
<div class="box7">宽度分离</div>
</div>
<!-- box-sizing -->
<div class="box8">
<div class="box9">
box-sizing
</div>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
1、相邻选择器与兄弟选择器
相邻选择器和兄弟选择器都是用来选择同级元素的选择器，相邻选择器使用“+”，兄弟选择器使用“～”,选择出的都是以后的标签，相邻选择器只能选择一个元素而兄弟选择器可以选择多个元素。
2、:nth-child() 和 :nth-of-type()选择器
:nth-child()为子元素选择器，只考虑选择元素级别，其中有两个特别的first-child/nth-last-child可选择第一个和最后一个
:nth-of-type()为类型选择器，既要考虑元素级别，也要考虑元素类型，其中有两个特别的first-of-type/last-of-type可选择第一个和最后一个
3.父盒子和子盒子都设置了大小并使用padding后，会将父盒子大小撑大，最终会影响布局，有两种解决方法：一是宽度分离，子盒子不设置宽度，父盒子固定宽度，这样不会因为子盒子内容变化而撑大父盒子。第二种是给子盒子添加box-sizing:border-box属性。
4.margin同级塌陷和嵌套传递
当两个同级元素上下设置了外边距后，元素之间间隔只有较大的一个外边距高度，这就是同级塌陷，当子元素设置外边距时，会将外边距传递给父元素。一般的处理方法为在父级元素添加属性值overflow:hidden;
总结：
前端达到一个效果可以有很多写法，就选择器来说，要选择一个元素可以有很多方式，适合自己的方式就是最好的，但是其他方式也得了解，否则找来一堆代码看不懂意思就白学了。
margin、padding的使用特别重要，在布局上使用特别多，可以说没有margin、padding的使用，网页就是一堆烂格子。学习margin、padding 要知晓宽度分离、同级坍塌、嵌套传递等坑，成功避开这些布局的坑才能写出漂亮的页面。
