css盒模型重点知识点

---

1、思考

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

2、两种模型的区别；

• 区别；
  
  

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

• 如何设置；

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

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

• dom.style.width/height;

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

• dom.currentStyle.width/height;

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

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

  重点，都兼容；

• dom.getBoundingClientRect().width/height;

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

4、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；