CSS 盒式模型

盒式模型

CSS 盒子模型分为两类：W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)
他们都包括，content(内容区域）、padding区域、border区域、margin区域

盒子模型

他俩的不同之处在于对宽高的定义不同。

W3C盒子模型的 width = content.width ， height = content.height
IE盒子模型的 width = content.width + padding * 2 + border * 2

可以通过定义 box-sizing 的值，来定义某个区域元素的盒子模型。

W3C盒子模型 box-sizing: content-box;
IE盒子模型 box-sizing: border-box;

下面通过一个实例来了解他们之间的差异：

首先在 style 中定义：

  .content-box {
    box-sizing: content-box;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
    width: 100px;
  }
  .border-box {
    box-sizing: border-box;
    margin: 10px;
    padding: 10px;
    border: 1px solid red;
    width: 100px;
  }

在页面的 html 中绘制两个 div

    
    

      Hello World!
    
    
    

      Hello World!
    

比较他们之间结果的差异性：

image.png

明明定义了同样的 width、pading、margin和border 他们最后展现的结果却不同。
现在来计算一下他们各自真实的 content 宽度和总宽度到底为多少（这里暂时不考虑margin)

上面的 div 是 W3C 标准模型，content 宽度就是定义的宽度 width = 100px
总宽度 = width + padding * 2 + border * 2 = 100px + 20px + 2px = 122px

下面的 div 是 IE 盒子模型，content 宽度 = width - padding2 - border2 = 100px -20px -2px = 77px
总宽度 = width(content + padding2 + border 2) = 100px

由于模型的不同，这里就差了 22px 的宽度

获取元素 CSS 属性

dom.style.attr 可以获取元素的行内样式的属性值
windows.getComputedStyle(dom).attr 可以获取元素计算后样式的属性值
IE下
dom.currentStyle[attr]

clientWidth、scrollHeight、offsetWidth

• offset 系列
  offsetWidth = width + 左右padding + 左右boder
  offsetTop: 当前元素上边框到最近的已定位父级（offsetParent） 上边框的距离。如果父
  级都没有定位，则是到body 顶部的距离
• client 系列
  clientWidth = width + 左右padding
  clientTop = boder.top(上边框的宽度)

• scroll 系列
  scrollHeight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）
  scrollTop :内容层顶部到可视区域顶部的距离

  
  
  image.png
  
  

  js实例（与上一节代码关联）：

    let c1 = document.getElementById('c1')
    let c2 = document.getElementById('c2')
    console.log(c1.clientWidth, c1.offsetWidth) // 120 122
    console.log(c2.clientWidth, c2.offsetWidth) // 98 100

BFC

参考：https://zhuanlan.zhihu.com/p/25321647
BFC(Block formatting context)直译为"块级格式化上下文"，它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

BFC 的三个作用：
1）防止外边距重叠 （让两个元素不要处于同一个BFC下，给其中一个元素创建一个独立的BFC即可防止外边距重叠）
2）清除浮动影响 （让包含浮动元素的div 创建 BFC，让浮动元素参与计算宽高）
3）防止文字环绕

我是一个左浮动的元素
我是一个没有设置浮动, 
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;

image.png

内容被浮动元素覆盖，但是文字在浮动元素周围环绕，给第二个 div 创建 BFC。
即加入 overflow: hidden 属性后，效果如下

image.png

如何创建 BFC(触发 BFC):
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)