美文网首页
CSS盒模型

CSS盒模型

作者: 猴子Hope | 来源:发表于2018-01-02 15:03 被阅读0次

    一、CSS盒模型

        标准模型

        IE模型

        使用CSS3的box-sizing属性设置何种模型

        box-sizing: content-box;    //标准模型

        box-sizing: border-box;    //IE模型

    二、JS获取盒模型对应的宽和高

    element.style.width/height;    //只能取得内联样式的宽高值

    element.currentStyle.width/height;    //只有IE支持

    window.getComputedStyle(element).width/height;    //兼容性更好

    element.getBoundingClientRect().width/height    //getBoundingClientRect()用于计算元素的绝对位置,得到top、left、width、height 四个元素

    三、BFC

    块级元素格式化上下文,边距重叠解决方案

    四、BFC原理——BFC渲染规则

    1. BFC元素垂直方向边距重叠

    2. BFC区域不会与浮动元素BOX重叠

    3. BFC在页面上是一个独立的容器

    4. 计算BFC高度时,浮动元素也参与计算

    五、创建BFC

    float值不为none

    position值不为static、relative

    display值为inline、table

    overflow值不为visible

    相关文章

      网友评论

          本文标题:CSS盒模型

          本文链接:https://www.haomeiwen.com/subject/mcgfnxtx.html