<!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>
博客列表 >常用选择器与布局原理
常用选择器与布局原理
- 淡淡的博客原创转载
- 2019年09月11日 16:03:09594浏览
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议