css重要知识点总结（2）

css重要知识点总结（2）

一、两个经典bug：margin塌陷，margin合并

1、margin塌陷

垂直方向上子元素相对于父元素margin没有效果，就像父元素没有顶，把它叫做margin塌陷。

<div class="wrapper">
<div class="content"></div>
</div>

         

*{
margin:0;
padding: 0;
}
.wrapper{
width: 100px;
height:100px;
background-color: black;
margin-top: 100px;
margin-left: 100px;
}
.content{
width: 50px;
height:50px;
background-color: green;
margin-left: 50px;
margin-top: 50px;/*想达到绿色方块相对于黑色方向向下向左都移动的效果*/
}

我们想达到的效果如图一



                                              图 一

但是实际上是图二所示



                                              图二

还有一种情况，例如将子级改为：

.content{
width: 50px;
height:50px;
background-color: green;
margin-left: 50px;
margin-top: 150px;/*大于父级容器高度*/
}

会发现如图三所示，父级跟着子级一起向下


                                        图三

这是margin塌陷导致的，即子元素里margin-top没有效果

解决办法：BFC方法（block  format  contxt） 原本每个元素都有特定的渲染规则，但触发BFC能改变它的渲染规则，也仅仅改变一点点语法
如何触发一个盒子BFC：（1）position：absolute/fixed（2）display：inline-block/table-cells/flex（3）float：left/right（4）overflow：hidden/auto/scroll针对需求选择最合适的一个比如此处效果要求子级可以溢出，就不能用overflow：hidden

*{
margin:0;
padding: 0;
}
.wrapper{
width: 100px;
height:100px;
background-color: black;
margin-top: 100px;
margin-left: 100px;
overflow：hidden；/*使用BFC方法*/
}
.content{
width: 50px;
height:50px;
background-color: green;
margin-left: 50px;
margin-top: 50px;
}

2、margin合并

<div class="box1">123</div>
<div class="box2">456</div>

.box1{
margin-bottom: 100px;
width: 100px;
height: 100px;
background-color: black;
}
.box2{
margin-top: 100px;
width: 50px;
height: 50px;
background-color: green;
}

想达到的效果如图四

                       图四

但是实际上如图五



                 图五
这就是垂直方向上兄弟元素的margin合并了解决方法：用数学方法，仅设置上级元素的margin-bottom

.box1{
margin-bottom: 200px;

9ef9
width: 100px;
height: 100px;
background-color: black;
}
.box2{
width: 50px;
height: 50px;
background-color: green;
}

二、float浮动

<div class="box"></div>
<div class="demo"></div>

.box{
width: 100px;
height: 100px;
background-color: black;
float: left;
opacity: 0.5;
}
.demo{
width: 150px;
height: 150px;
background-color: green;
}

会发现绿块进入了黑块的位置如图六

                     图六

这是因为float浮动的影响，浮动元素产生了浮动流而所有产生了浮动流的元素，块级元素看不到它，只有产生了BFC或文本属性的元素或文本元素才能看到它
补充：设置了position：absolute；/float：left/right       系统内部把元素转换为display：inline-block

.box{
width: 100px;
height: 100px;
background-color: black;
float: left;
}
.demo{
display:inline-block;
width: 150px;
height: 150px;
background-color: green;
}

                                    图七

三、清除浮动：clear：both；

逻辑上把浮动流去掉

<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>

.wrapper{
border: 1px solid green;
}
.content{
width: 100px;
height: 100px;
float: left;
background-color: black;
color: white;
}
div::after{
content: "";
display: block;
clear: both;
}

会发现父级没有把子级框住，这是因为父级块元素看不见浮动子元素

                                            图八

解决方法：清除浮动，因为三个子元素会对后面的块元素产生影响，把最后一个子元素浮动流去掉，它后面的块元素就会出现在它后面，即把父元素撑开，那么只要有一个块元素逻辑上出现在最后一个浮动元素后面

遵循这个思路，运用伪元素

.wrapper{
margin-top:30px;  border: 1px solid green;
}
.content{
width: 100px;
height: 100px;
float: left;
background-color: black;
color: white;
}
div::after{           /*伪元素天生是行级元素，逻辑最后，父元素的最后，是一种元素可以添加css属性*/
content: "";      /*设置伪元素的内容，必须有的一个属性*/
display: block;   /*能清除浮动的必须是块级元素*/
clear: both;      /*左右浮动都清除*/
}

四、小知识点

行级元素只能嵌套行级元素
块级元素可以嵌套任何元素
但p标签不能嵌套div标签
a标签不能嵌套a标签