导航

盒模型类

Posted on 2018-09-24 21:06  陈岩  阅读(131)  评论(0)  编辑  收藏  举报
  • 标准盒模型和IE盒模型，以及区别

    • 　　标准盒模型的width = content
    • 　　IE盒模型的width=content+padding+border
  • CSS如何设置这两种模式
    • box-sizing: content-box  标准模型
    • box-sizing: border-box    IE模型
  • JS如何设置/获取盒模型对应的宽高？
    • 　　dom.style.width/height 获取内联样式宽高
    •        dom.currentStyle.width/height （只有IE支持）
    •        window.getComputedStyle(dom).width/height(兼容性好)
    •        注意：2、3都是获取浏览器渲染之后的最终宽度
    •       dom.getBoundingClientRect().width/height （得到整个盒子的宽高，并不是content的宽高，）

BFC(边距重叠解决方案)：

1、基本概念：BFC块级格式化上下文   IFC内联格式化上下文

2、原理：

　　BFC垂直方向边距会重叠

　　BFC区域不会与浮动元素box重叠

　　BFC在页面上独立容器，外面不影响里面

　　计算BFC高度，浮动元素也会计算

3、如何创建BFC？

　　1、overflow：除了visible

　　2、float的值不为none

　　3、position的值不为static 或者 relative

　　4、display 与table相关