博客列表 >学习相邻选择器与兄弟选择器、nth-child() 和 :nth-of-type()选择器、padding 对盒子大小的影响与解决方案margin中的同级塌陷, 嵌套传递与自动挤压2019.9.3 8:00

学习相邻选择器与兄弟选择器、nth-child() 和 :nth-of-type()选择器、padding 对盒子大小的影响与解决方案margin中的同级塌陷, 嵌套传递与自动挤压2019.9.3 8:00

努力拼搏----赵桂福的博客
努力拼搏----赵桂福的博客原创
2019年09月04日 16:45:25758浏览

经过今天晚上的学习,增加了对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中文网,感谢老师的辛苦付出!


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议