<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
ul{list-style: none;}
ul li{float: left;height: 30px;width: 30px;background:red;border-radius: 15px;margin: 5px;text-align: center;line-height: 30px;}
/*相邻选择器:选中元素的下一个相邻元素*/
.item1+*{background: yellow;}
/*兄弟选择器:选中元素紧接的所有同级元素*/
.item2~*{background: blue;}
/*nth-child():选择属于父级元素下的某个子元素,从1开始*/
ul li:nth-child(3){border-radius: 0px;}
/*nth-of-type():选择同类型元素的第几个元素,从1开始*/
div:nth-of-type(2) p{background: red;}
</style>
<body>
<ul>
<li class="item1">1</li>
<li class="item2">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div style="clear: both;"></div>
<div>
<p>test1</p>
<p>test2</p>
<p>test3</p>
</div>
<!--设置padding会把盒子撑大-->
<div style="height: 100px;width: 100px;background: yellow;padding: 20px;">
<p>test4</p>
</div>
<!--宽度分离-->
<div style="height: 100px;width: 100px;background: red;">
<div style="padding: 20px;">
<p>test4</p>
</div>
</div>
<!--box-sizing-->
<div style="height: 100px;width: 100px;background: yellow;padding:20px;box-sizing:border-box;">
<p>test4</p>
</div>
<!--margin同级塌陷:margin有一个失效，大值生效-->
<!--margin同级塌陷问题解决方法：同级元素只设置其中一个margin值-->
<div style="height: 100px;width: 100px;background: lightblue;margin-bottom: 20px;"></div>
<div style="height: 100px;width: 100px;background: lightcoral;margin-top: 20px;"></div>
<!--嵌套传递:子元素的margin值会向父元素传递-->
<div style="height: 100px;width: 100px;background: yellow;">
<div style="height: 50px;width: 50px;background: red;margin-top: 20px;"></div>
</div>
<!--嵌套传递解决方法：父元素增加padding-->
<div style="height: 100px;width: 100px;background: yellow;padding: 20px;box-sizing: border-box;">
<div style="height: 50px;width: 50px;background: red;"></div>
</div>
<!--自动挤压：左右自动挤压-->
<div style="height: 100px;width: 100px;background: lightblue;margin: 20px auto;"></div>
</body>
</html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
