css－－盒模型

---恢复内容开始---

盒模型：

一、基本内容：

二、基本概念：标准模型＋IE模型

三、标准模型和IE模型的区别：

四、css如何设置这两种模型：

五、js如何设置获取盒模型对应的宽和高

六、根据盒模型解释边距重叠

七、BFC（边距重叠解决方案）

基本内容：

content+padding+border+margin

基本概念:

标准模型:css设置的width是指content的width，好比width：100px,指的是内容100px ,实际的width ＝ content＋padding＋margin+border

IE模型:ss设置的width是指content+border+padding的width,好比width：100px，指的是content+padding+border=100px

标准模型和IE模型的区别:

这二者计算的width 和height不同

标准模型 width ＝ content

IE模型 width ＝ content＋padding＋border

css如何设置这两种模型

box-sizing:content-box | border-box 默认的是content-box（标准模型）

js如何设置获取盒模型对应的宽和高

（1）dom.style.width--只能获取到内联样式的width

（2）dom.currentStyle.width --拿到的是渲染之后的dom的width（只有IE支持）

（3）window.getComputedStyle(dom).width

（4）dom.getBoundingClientRect().width --计算元素的绝对位置的时候经常使用

根据盒模型解释边距重叠

好比div1和div2，div1的margin-bottom = 30px, div2的margin-top = 5px,div1和div2之间的距离是30px,这就是边距重叠 ， 会取二者之间的最大值做为边距

BFC（边距重叠解决方案）

（1）、BFC的基本概念：块级格式化上下文

（2）、BFC的原理

＊：外面元素和里面的元素互不干扰

＊：float元素不会与BFC元素相互重叠

＊：BFC垂直方向上的元素边距重叠

＊：BFC若是里面的子元素是浮动的，则计算父元素的高度的时候，会把浮动元素的高度计算进去（清除浮动原理）

（3）、如何建立BFC

　　　　(1)根元素

　　　　(2)float的值不为none

　　　　(3)overflow的值不为visible

　　　　(4)display的值为inline-block,table-cell,table-caption

　　　　(5)position的值为absolute或fixed

（4）、BFC使用场景

BFC边距重叠解决边距重叠的问题原理

设置div2的样式overflow：hidden这样div2就变成了一个BFC，由于BFC是一个独立的区域，外面的元素和里面的元素互不干扰，因此不会发生边距重叠

BFC应用到两栏布局

<section id="main">
    <style>
        #main .left{
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .right{
            height: 200px;
            background-color: blue;
            /*overflow: hidden;*/
        }
    </style>
    <div class="left">left</div>
    <div class="right">right</div>
</section>

 

当将.right设置overflow：hidden,将right设置为BFC,根据原理BFC不会与float发生重叠，则左边和右边不会发生了重叠

 

 

 

 

 

 

 

 

 

---恢复内容结束---