zoukankan      html  css  js  c++  java
  • 说说bfc 和 HasLayout

    你肯定用到过,但你可能从没听过这两单词,刚接触的时候,我实在无法把这两单词与我常作的行为连在一起,纠结了一个下午,我疯了。

    BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则。有人做出很恰当的比喻:

    你可以把一个页面想象成大的集装箱,这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆,都是把货物打好包装再装入集装箱,这样的话无论你包装里面的货物怎么摆放,都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Context。

    HasLayout    当一个元素的 hasLayout 属性值为true时,我们说这个元素有一个布局(layout)

    触发HasLayout

    * display: inline-block
    * height: (任何值除了auto)
    * float: (left 或 right)
    * position: absolute
    * (任何值除了auto)
    * writing-mode: tb-rl
    * zoom: (除 normal 外任意值)

    Internet Explorer 7 还有一些额外的属性(不完全列表):

    * min-height: (任意值)
    * max-height: (除 none 外任意值)
    * min- (任意值)
    * max- (除 none 外任意值)
    * overflow: (除 visible 外任意值)
    * overflow-x: (除 visible 外任意值)
    * overflow-y: (除 visible 外任意值)
    * position: fixed

    触发BFC

    • float:left|right
    • position:absolute|fixed
    • display: table-cell|table-caption|inline-block
    • overflow: hidden|scroll|auto
  • 相关阅读:
    ping命令的几个简单使用
    CentOS下编译安装hping3
    CentOS下安装gns3
    sendip简单使用
    Ubuntu/CentOS使用BIND配置DNS服务器
    远程重启linux主机的几种方法
    使用U盘安装win7系统,遇到“无法定位现有系统分区”问题
    导出csv文件
    Mvc 分页栏扩展方法
    初学HTML5系列三:事件
  • 原文地址:https://www.cnblogs.com/ihqn19/p/3146778.html
Copyright © 2011-2022 走看看