• 8.30——9.4日随笔之一(BFC)


      好久没发博客了,今天来写写作为前端菜鸟的,由于初学实在没有什么大级别的技术可以说的,就只能写写我对本周学习的知识的领悟。在本周我认识前端的两个要点,一个是BFC还有一个就是面向对象,这两个要点在以前的学习中都没有怎么接触过,所有对我来说这是这周记忆最深刻的。

      BFC全称块级格式化上下文,它是指一个独立的块级渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。区域内部的所有布局都不会对外部产生影响;body内部所有的元素都处于BFC环境下;其它元素想要让内部处于BFC环境则需要声明一下,声明有如下几个:1、float的值不为none时;2、overflow的值不为visible时3、position的值为absolute或fixed时;4、display的值不为none时(这个我记不太清楚了)。在BFC环境下,所有浮动元素的高度也会参与计算,也就是说把触发了BFC状态的父元素给撑开。

      BFC对页面布局来说,非常有用,但是在同一个BFC环境下,会发生垂直方向上的margin重叠,当发生这种情况时,可以再设置一个dDIV将发生重叠的元素装入,并让DIV触发BFC环境,这样就可以消除垂直方向上的重叠了,因为BFC是隔离的独立容器,容器里面的子元素不会影响到外面的元素。这里可能我写得不是很好,不怎么好理解。

      触发BFC环境后外界的元素布局也不会产生影响,例如,先设置一个大的DIV,然后在其内部设置两个小DIV,一个稍小的名为A设置为float:left,设置高度和宽度,另一稍大的名为B不设置浮动,只设置高度不设置宽度,我们会看到float:left的DIV会重叠在未设置浮动的DIV上,但是如果我们给B设置触发了BFC,B便会挨着A排布但是B的自身宽度会减少,从而让出A的位置,不会再出现重叠的现象了。

      在以后的页面布局中,对BFC的使用肯定会非常多,希望能我的技巧更加的熟练。

  • 相关阅读:
    java实现按对象某个字段排序,排序字段和规则自定义
    JVM调优
    Spring事务的5种隔离级别
    Spring的七种事务传播机制
    jdk动态代理和cglib动态代理的区别
    spring事务的开启方式(编程式和声明式)
    jetty启动(server-connector-handle-start-join)
    浅谈background-size的几个属性值
    如何解决各类尺寸移动端自适应的问题?
    如何实现一个盒子看起来缓慢消失切换到另一个页面的效果?
  • 原文地址:https://www.cnblogs.com/webhtmlcss/p/4805284.html
Copyright © 2020-2023  润新知