css盒模型 | w晚风

接触前端也有些时间，发现往往简单的东西，我们自以为是的认为懂了。经过一些事情后还是觉得有空的情况下需要进行复盘，下面我来仔细说下盒模型的知识

盒模型的基本概念

盒模型分为：标准模型（w3c），IE模型

标准模型跟IE模型的区别

其中最明显的就是它们的宽高计算
1.w3c标准盒子: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。
W3C定义的盒模型包括margin、border、padding、content，元素的宽度width=content的宽度

2.IE盒子模型:padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度。
元素的width=border + padding + content

css 如何设置标准模型跟IE模型

在css3中有这样一个属性：css3 box-sizing
官方给的解释是：box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

再来看看box-sizing属性给出的几个值

1 2	/* 标准的盒模型*/ box-sizing:content-box;

content-box:这是由css2.1规定的宽度高度行为。什么是按css2.1的行为？意思就是说设置这个值之后，就会按以前规定的标准来显示，也就是按照标准的盒模型显示。之所以有这个属性以及这个值，可以看出w3c也意识到了自己规定的标准盒模型简直就是个坑。。

1 2	/IE盒模型/ box-sizing:border-box;

border-box:好了，前面絮絮叨叨这么多，就是为了引出这么个东西。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。所以w3c终于承认了人家IE盒模型的合理性。通过设置　 box-sizing的值为border-box来模拟这一规范。

盒模型这块看似很简单的问题，如果没搞的很清楚，也会造成很大的困扰，对开发进度产生影响。

####JS如何设置获取盒模型对应的宽高

dom.style.width/height(只适用获取内联元素的宽和高)
dom.currentStyle.width/height(获取渲染后的宽高，但是仅IE支持)
window.getComputedStyle(dom).width/height(与2原理相似，但是兼容性，通用性会更好一些)
dom.getBoundingClientRect().widht/height(计算元素绝对位置，获取到四个元素left,top,width,height)

根据盒模型解释边距重叠：

bfc的基本概念：
BFC 全称为块格式化上下文 (Block Formatting Context) 。

bfc的原理：

1.BFC，这个元素的垂直方向的边距会发生重叠。
2.bfc的区域不会与浮动元素的box重叠
3.计算bfc高度的时候浮动元素也会参与计算
4.bfc在页面上是一个独立的容器，外面的元素不会影响里面的元素

怎么创建bfc：

1.float属性不为none
2.position为absolute或fixed
3.display为inline-block, table-cell, table-caption, flex, inline-flex
4.overflow不为visible

bfc的使用场景有哪些？

BFC解决兄弟元素垂直方向边距重叠（给子元素增加了父元素div）外边距将不会重叠：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>获取盒子宽高</title>
    <style>
        #box1{
        color: white;
        font-size:50px;
        text-align: center; 
        line-height:185px;
        width:300px;height:185px;
        background: plum;
        margin:99px;
        
    }
        #box2{width:300px; 
        height:185px; 
        background:pink; 
        color: white; 
        font-size:50px; 
        text-align: center; 
        line-height:185px; 
        margin:99px;
        }
        
    </style>
</head>
<body>
    <div id="box1">盒子一</div>
    <div style="overflow:hidden"><div id="box2">盒子二</div><div>
</body>
</html>

BFC如何解决父元素和子元素的边距重叠 !

可以在父元素中开启BFC，尽量使用overflow：hidden；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
        #a{
          width:100px;
          height: 100px;
          overflow: hidden;
          background-color: yellowgreen;
          /*display:inline-block;*/
          margin:auto;
        }
        #b{ width:50px;
          height: 50px;
          margin:25px;
          background: pink;}
      </style>
</head>
<body>
  <div id="a"><div id="b"></div></div>
</body>
</html>

用BFC解决之前：

父元素的margin和子元素的margin相互重叠

解决之后：

父元素的margin和子元素的margin将不再相互重叠

BFC不与float重叠（给没有浮动的盒子创建BFC设置 overflow: hidden;）进行页面布局！

<style type="text/css">
        #a{
          width: 100px;
          height: 100px;
          float:left;
          background: red;
        }
        #b{
          background-color: blue;
          height: 200px;
          overflow:hidden;
        }
        </style>
        <body>
        <div id="a"></div>
        <div id="b"></div>
        </body>

没用创建BFC之前会出现元素重叠问题：

这种方式也可以用来去做文字环绕图片效果！

开启了BFC之后元素不再重叠就可以悠闲去进行网页排版了：

这些方法都可以创建 bfc

1.float属性不为none,float属性模式是display：inline-block；模式类型为行内块元素！
2.position为absolute或fixed
3.display为inline-block, table-cell, table-caption, flex, inline-flex
4.overflow不为visible