博客列表 >相邻选择器和兄弟选择器异同,nth-child()和nth-of-type()选择器异同,padding对盒子影响以及margin的同级塌陷,嵌套传递和自动挤压的分析和解决-2019年9月4日18:00

相邻选择器和兄弟选择器异同,nth-child()和nth-of-type()选择器异同,padding对盒子影响以及margin的同级塌陷,嵌套传递和自动挤压的分析和解决-2019年9月4日18:00

i开哥的博客
i开哥的博客原创
2019年09月04日 18:26:24766浏览

相邻选择器选中的是紧挨着的下一个元素,用 #id + * 号表示。

兄弟选择器选择的是从本身开始以后的元素,用 #id + ~ 号表示。

 Nth-child(): 伪类:子元素选择器。

Nth-of-type():伪类:类型选择器。

如果关注点是位置,用nth-child()

如果既关注位置也关注类型,用nth-of-type()

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/style.css">
    <title>选择器</title>
</head>
<body>
<ul>
    <li class="bg-one">1</li>
    <li id="bg-one">2</li>
    <li class="bg-one">3</li>
    <li class="bg-one">4</li>
    <li id="bg-two">5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>

</ul>

</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

ul {
    margin: 0;
    padding-left: 0;
    border: 1px dashed lightcoral;
}
ul li {
    list-style-type: none;
    width: 50px;
    height: 50px;
    background-color: #8abeb7;
    border: 1px solid red;
    line-height: 50px;
    /*水平和垂直居中*/
    text-align: center;
    border-radius: 50%;
    /*将一个块级元素转为内联元素*/
    display: inline-block;
}
/*相邻选择器, #bg-one 这个id属性,用 *是选中后边的最相邻的*/
#bg-one + * {
    /*background-color: aqua;*/
}
/*兄弟选择器,#bg-two这个id属性后的都是属于兄弟选择器的选择范围*/
#bg-two ~ * {
    /*background-color: green;*/
}
/*nth-child() 伪类:子元素选择器  ()中是索引从1开始*/
ul :nth-child(7) {
    background-color: red;
}
/*nth-of-type() 伪类:类型选择器*/
ul li:nth-of-type(8) {
    background-color: hotpink;
    color: white;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

通过实例:将图片显示在容器中间 来演示padding对盒子大小影响以及解决方案

a) 当padding撑开盒子的时候,可以通过直接还原宽度来还原原本的效果

jww.png

还原后效果:

jww1.png

此方式为:通过手工修改盒子宽度实现图片居中

方式2:宽度分离,通过添加一个中间层实现图片居中

    <div><div></div></div>

方式3:box-sizing: border-box;来限制盒子

代码汇总:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/style1.css">
    <title>padding</title>
</head>
<body>
<!--将图片显示在容器中间-->
<div class="box1">
    <img src="images/jww.jpg" alt="吉娃娃" width="200px">
</div>

<!--宽度分离  通过添加一个中间层实现图片居中-->
<div class="wrap">
    <div class="box2">
        <img src="images/jww.jpg" alt="吉娃娃" width="200px">
    </div>
</div>
<!--box-sizing-->
<div class="box3">
    <img src="images/jww.jpg" alt="吉娃娃" width="200px">
    <a href="https://www.w3school.com.cn/cssref/pr_box-sizing.asp">点我看box-sizing用法</a>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

/*通过手工修改宽度数值实现图片居中*/
.box1 {
    width: 300px;
    border: 1px solid hotpink;
    background-color: aquamarine;
}
.box1 {
    padding: 50px;
    width: 200px;
}

/*宽度分离*/
.wrap {
    width: 300px;

}

.box2 {
    padding: 50px;
    background-color: aqua;
    border: 1px solid coral;
}

/*box-sizing*/
.box3 {
    width: 300px;
    box-sizing: border-box;
    padding:50px;
    background-color: lightcoral;
    border: 1px solid slateblue;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

margin中的同级塌陷, 嵌套传递与自动挤压

同级塌陷:指垂直方向上的高度塌陷

t1.png

t2.png

t3.png

通过修改 box1的上边距像素为50px,发现下边的盒子陷入到上边盒子的边距里面去了,谁向谁塌陷,遵循谁大以谁为准。

 

 

嵌套传递:是一个嵌套级的关系,子元素的外边距会自动传递到父元素上

举例: <div class=”box3”>  

             <div class=”box4”></div>

       </div>

传递前效果:

t4.png

传递后效果:

t5.png

自动挤压:某一个元素设置外边距的时候,会尽可能的自动挤压,尽可能的将位置留给对方尽可能的扩大。

t6.png

t7.png

t8.png

代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/style2.css">
    <title>外边距margin</title>
</head>
<body>
<!--同级塌陷-->
<div class="box1"></div>
<div class="box2"></div>
<!--嵌套传递-->
<div class="box3">
    <div class="box4"></div>
</div>
<!--自动挤压-->
<div class="box5"></div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

/*!*同级塌陷*!*/
/*.box1 {*/
/*    width: 100px;*/
/*    height: 100px;*/
/*    background-color: coral;*/
/*}*/

/*.box2 {*/
/*    width: 100px;*/
/*    height: 100px;*/
/*    background-color: aquamarine;*/
/*}*/

/*.box1 {*/
/*    margin-bottom: 30px;*/
/*}*/

/*.box2 {*/
/*    margin-top: 30px;*/
/*}*/

.box3 {
    width: 200px;
    height: 200px;
    background-color: aqua;
}
.box4 {
    width: 100px;
    height: 100px;
    background-color: hotpink;
}
/*此处子元素会传递到父元素*/
.box4 {
    /*margin-top: 50px;*/
}
/*通过修改父元素内边距距离和整体高度实现*/
.box3 {
    padding-top: 50px;
    height: 150px;
}
.box5 {
    width: 150px;
    height: 150px;
    background-color: #008856;
}
.box5 {
    margin:auto;
    /*比如要求做坐外边赋值auto,会自动给左侧尽力空出位置,挤压到右侧*/
    /*margin-left: auto;*/
    /*当赋值右外边auto,自动尽力挤压到左侧*/
    /*margin-right: auto;*/
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结:

1.

相邻选择器选中的是紧挨着的下一个元素,用 #id + * 号表示。

兄弟选择器选择的是从本身开始以后的元素,用 #id + ~ 号表示。

 Nth-child(): 伪类:子元素选择器。

Nth-of-type():伪类:类型选择器。

如果关注点是位置,用nth-child()

如果既关注位置也关注类型,用nth-of-type()

2.

padding的展示方式影响了盒子的效果,可以通过多种方式实现最终效果。

3.

同级塌陷:指垂直方向上的高度塌陷

嵌套传递:是一个嵌套级的关系,子元素的外边距会自动传递到父元素上

自动挤压:某一个元素设置外边距的时候,会尽可能的自动挤压,尽可能的将位置留给对方尽可能的扩大。

 

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