收藏
批改状态：合格
老师批语：总结的相当简洁, 棒
经过今天晚上的学习，增加了对css 控制页面元素的理解。现将学习到的知识增加如下：
一、相邻选择器与兄弟选择器
1、相邻选择器，就是当前元素紧挨的后面的一个元素，实例如下：
下面是8小框，我们选择第四个元素，改变的他的相邻元素样式
<html>
<head>
<style type="text/css">
ul{
margin:0;
padding-left:0;
}
ul li{
list-style:none;
width:50px;
height:50px;
background:green;
text-align:center;
line-height:50px;
border-radius:10%;
display:inline-block;
color:white;
}
.a +*{
background:red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class='a'>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、兄弟选择器 作用于当前元素的后的所有同级元素
我们还是 8个方框，还是那第4个元素丛示范，案例如下：
<html>
<head>
<style type="text/css">
ul{
margin:0;
padding-left:0;
}
ul li{
list-style:none;
width:50px;
height:50px;
background:green;
text-align:center;
line-height:50px;
border-radius:10%;
display:inline-block;
color:white;
}
.a ~*{
background:red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class='a'>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
【总结】
通过以上两案例可以看到，相邻选择器是解决当前选择元素后面紧挨的一个元素，是单个来的。而兄弟选择其实是当前元素后的所有同级元素，是多个。
二、nth-child() 和 :nth-of-type()选择器
1、nth-child ：它与位置有关，一定记住位置！
先看案例：
<html>
<head>
<style type="text/css">
ul{
margin:0;
padding-left:0;
}
ul>li{
list-style:none;
width:50px;
height:50px;
background:green;
text-align:center;
line-height:50px;
border-radius:10%;
display:inline-block;
color:white;
box-shadow:2px 8px 1px #000;
}
/*伪类 子元素选择器*/
div :nth-child(3){
color:red;
}
</style>
</head>
<body>
<div>
<p>朱老师</p>
<li>赵桂福</li>
<p>php中文网</p>
</div>
<div>
<p>朱老师</p>
<li>赵桂福</li>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、:nth-of-type()选择器 ： 它不仅与位置有关，还与类型有关
看下面的案例
<html>
<head>
<style type="text/css">
ul{
margin:0;
padding-left:0;
}
ul>li{
list-style:none;
width:50px;
height:50px;
background:green;
text-align:center;
line-height:50px;
border-radius:10%;
display:inline-block;
color:white;
box-shadow:2px 8px 1px #000;
}
/*伪类 子元素选择器*/
div p:nth-of-type(2){
color:red;
}
</style>
</head>
<body>
<div>
<p>朱老师</p>
<li>赵桂福</li>
<p>php中文网</p>
</div>
<div>
<p>朱老师</p>
<li>赵桂福</li>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
【总结】
nth-child() : 关注的是位置，例如 第一个，第二个....
nth-of-type(): 既关注位置又关注类型,类型就是您要修改的是p 标签，还是li 标签，第几个。考虑下 类型的感受。
三、padding 对盒子大小的影响与解决方案, 使用宽度分离或box-sizing
对于盒模型来说，增加padding 后会对盒模型产生破坏，无法实现预期效果。比如，居中的问题。
下面，我通过 box-sizing 来处理，padding对于盒子大小的影响
实例如下：
<html>
<head>
<style type="text/css">
#kuang {
width: 300px;
height: 300px;
background: red;
text-align: center;
line-height: 300px;
}
.ts {
box-sizing: border-box;
width: 500px;
padding: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="ts">
<div id="kuang">我是中间内容</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
四、margin中的同级塌陷, 嵌套传递与自动挤压, 并提出解决方案或应用场景
1、同级塌陷 适用于 垂直元素布局
<html>
<head>
<style type="text/css">
#b1{
width:200px;
height:200px;
background:red;
}
#b2{
width:200px;
height:200px;
background:blue;
}
#b1{
margin-bottom:30px;
}
#b2{
margin-top:110px;}
</style>
</head>
<body>
<div id='b1'></div>
<div id='b2'></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、嵌套传递
<html>
<head>
<style type="text/css">
#b1{
width:500px;
height:300px;
background:red;
}
#b2{
width:200px;
height:200px;
background:blue;
}
#b2{margin-top:60px;}
</style>
</head>
<body>
<div id='b1'><div id='b2'></div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
【解决方案】
<html>
<head>
<style type="text/css">
#b1{
width:500px;
height:300px;
background:red;
}
#b2{
width:200px;
height:200px;
background:blue;
}
#b1{padding-top:30px;height:250px;}
</style>
</head>
<body>
<div id='b1'><div id='b2'></div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3、自动挤压 元素的居中设计
<html>
<head>
<style type="text/css">
.box{
width:300px;
height:300px;
border:1px solid red;
background:green;
}
.box{
margin:0 auto;
}
</style>
</head>
<body>
<div class='box'></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
【左边 margin-left:auto】
<html>
<head>
<style type="text/css">
.box{
width:300px;
height:300px;
border:1px solid red;
background:green;
}
.box{
margin-left:auto;
}
</style>
</head>
<body>
<div class='box'></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
感谢php中文网，感谢老师的辛苦付出！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
