day02-前端面试技巧-（盒模型）

image.png

css盒模型：

CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

标准盒模型与IE盒模型的区别：

• 标准盒模型：

  
  image.png

• IE盒模型:

  
  image.png

CSS如何设置这两种模型：

• 标准：boxsizing：content-box
• IE：boxsizing：border-box
  浏览器默认的是conten-boxt的

JS如何获取盒模型对应的宽和高：

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

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

BFC（边距重叠解决方案）：

• bfc的基本概念：

BFC 全称为 块格式化上下文 (Block Formatting Context) 。

• bfc的原理：

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

• 怎么创建bfc：

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

• bfc的使用场景有哪些？

BFC垂直方向边距重叠 （给子元素增加了父元素）：

      <section id="margin">
        <style>
          #margin{
            background: pink;
            overflow: hidden;
          }
          #margin>p{
            margin: 5px auto 25px;
            background: red;
          }
        </style>
        <p>1</p>
        <div style="overflow:hidden">
          <p>2</p>
        </div>
        <p>3</p>
      </section>

创建之前：

image.png

创建后的效果：

image.png

BFC不与float重叠（给没有浮动的盒子创建BFC设置 overflow: auto;） :

      <section id="layout">
        <style media="screen">
          #layout{
            background: red;
          }
          #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background: pink;
          }
          #layout .right{
            height: 110px;
            background: #ccc;
            overflow: auto;
          }
        </style>
        <div class="left"></div>
        <div class="right"></div>
      </section>

创建之前：

image.png

创建后的效果：

image.png

BFC子元素即使是float也会参与计算 （清除浮动）

      <section id="float">
        <style media="screen">
          #float{
            background: red;
            overflow: auto;
            /*float: left;*/
          }
          #float .float{
            float: left;
            font-size: 30px;
          }
        </style>
        <div class="float">我是浮动元素</div>
      </section>

创建前（不会参与计算）：

image.png

创建后（会参与计算）：

image.png