网赚妈妈

 找回密码
 立即注册
搜索
查看: 441|回复: 10

[网赚是真的吗] CSS中的BFC

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-9-10 20:11:46 | 显示全部楼层 |阅读模式

    首先要了解什么是BFC?

    Block Fromatting Context(块级格式化上下文)----简称BFC。

    在我们学习CSS途中会了解到BFC这么一个概念,很多小伙伴不太理解是个什么东西,也不了解它的作用。接下来我给大家讲讲它有什么用。

    首先我们来说说CSS中的两个经典bug----margin塌陷和margin合并。

    我们来看一段代码

    clz7LifHGFG7afZc.jpg

    一个父子级的两个div,然后我给父级加top值50px,子级同样50px,大家理想的效果肯定是下图这样

    PMaAx0o52H05BhH8.jpg

    但是事实呢?并不是...结果是这样的

    x16661E86411z6IE.jpg

    子级div的margin-top值为什么没有生效呢?这是为什么呢?这就是两个bug中的之一----margin塌陷

    为什么叫塌陷呢?

    大家可以这样去理解,就好比本来子级的margin值是相对于父级的边框去移动的,子级左右下三个方向的margin值都好使,就top(上)方向的不好使,就好比上边框塌陷了一样,因为你没有参照物。所以子级的margin-top值不生效。相信小伙伴已经迫不及待的想知道怎么去解决这个bug,稍安勿躁。咱们再来看看什么叫margin合并...

    刚刚我们已经知道子级的margin-top值没有生效,但是如果我子级的margin-top值大于父级自身的margin-top值呢?下面继续上代码!

    p81dBD9Lg8gLB11J.jpg

    我给了子级div的margin-top为100px(肯定大于父级50px啊),下面看看运行效果

    acDsE0R0sHeaa2sJ.jpg

    发现子级的margin-top值竟然生效了,而且还带着父级一起往下移动了100像素,这种现象就叫margin合并。

    总结一下:当子级的margin-top值小于父级的margin-top值,子级top值不生效,

    当子级的margi-top值大于父级的margin-top值的时候,会带着父级一起动。

    那这两个现象我们要怎么去解决呢?接下来我们要讲的BFC。

    我们知道浏览器解析CSS代码会有一套渲染解析的语法,然后挨条去解析然后执行css代码,而我们所说的BFC它就能改变浏览器解析CSS的语法,刚好BFC就能解决我们上面所说的两个现象,既然说能改变,那我们怎么去触发这个BFC让它去改变呢?

    下面列举几个最常用的方法:

    给父级加上下面任意一个属性

    1. position: absolute / fixed;
    2. overflow: hidden;
    3. display: inline-block;
    4. float: left / right;

    那这么多属性,我们用哪一个呢?这个肯定是似情况而定的。假如我父级不想定位,你不可能去给它加一个position: absolute;这肯定就会影响布局,方法任选其一。小编自己用的最多也就是overflow: hidden;

    那我们给上面代码加一个试试?

    E54WDd58oLl7odZ4.jpg

    tHsP2OMmXII4SOSb.jpg

    这样就解决了margin塌陷和margin合并的问题,就可以达到我们想要的效果了。

    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:12:22 | 显示全部楼层
    你父级hidden了,子级就没法撑高父级了,不能自动高度了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:19:04 | 显示全部楼层
    好文章,上次我遇到过[我想静静][我想静静]
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:25:54 | 显示全部楼层
    非常棒,很清楚
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:32:18 | 显示全部楼层
    给父元素加个边框就行
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:39:44 | 显示全部楼层
    学到了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:45:59 | 显示全部楼层
    学习了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:53:10 | 显示全部楼层
    占位
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:59:25 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 21:06:11 | 显示全部楼层
    学习了
    回复 支持 反对

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-24 06:52 , Processed in 0.157648 second(s), 15 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表