css盒模型重点知识点

---

一、思考

• 基本概念：基本模型 + ie模型；
• 那么有几个问题延伸出来了：
  
  • 这两个模型的区别是什么？
  • css中如何设置这两个模型？
  • js如何获取模型的宽高？
  • 肯定还有相关的一些实例题（根据盒模型解释边距重叠）；
  • BFC与IFC;

二、两种模型的区别；

• 区别；
  
  

  标准盒模型的宽度就仅仅是 content的宽度；而IE模型的宽度是指的 content+padding+border的宽度的总和；

• 如何设置；

    //标准盒模型，这个浏览器默认的方式；
    box-sizing:content-box;
    //IE盒模型
    box-sizing:border-box;

三、设置获取盒模型对应的宽和高；

• dom.style.width/height;

  这个方法的缺点是只能拿到行内样式；

• dom.currentStyle.width/height;

  这个方法可以拿到加载之后的样式，但是缺点是只适用于IE浏览器；

• window.getComputedStyle(dom).width/height;

  重点，都兼容；

• dom.getBoundingClientRect().width/height;

  这个适用于取位置的时候，这个参数返回了宽高，还有距离视口左边和上边的距离；

四、BFC（块级格式化上下文）

概念

BFC主要用来解决边距重叠的问题；
与它类似的还有一个叫做IFC;

• 原理
  

  BFC创建的元素不会与block元素重叠；

如何创建BFC

• 父级元素浮动 (元素的 float 不是 none)
• 父级元素绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
• 非块级元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex
• 块级元素具有overflow ，且值不是 visible

BFC的使用场景

• 清除浮动

    <div class="wrap">
        <section>1</section>
        <section>2</section>
    </div>

    .wrap {
        border: 2px solid yellow;
        width: 250px;
        overflow: hidden;
    }
    section {
        background-color: pink;
        float: left;
        width: 100px;
        height: 100px;
    }

没有创建BFC之前的样子：

创建BFC之后的样子：

• 防止垂直margin合并；

    <section class="top">1</section>
    <section class="bottom">2</section>

    section {
        background-color: pink;
         margin-bottom: 100px;
         width: 100px;
         height: 100px;
    }
    .bottom {
         margin-top: 100px;
    }

如果像上面那样的代码的话，两个box只间的间距只有100px；但是如果给bottom创建BFC的话，那么两个box只间的间距就变成了200px；