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;
    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标签