谈谈CSS的标准盒模型以及IE盒模型

谈谈CSS的标准盒模型以及IE盒模型

盒模型种类

1：标准盒模型

特点：宽度width是只包括content，即内容的宽度

设置为标准盒模型的方法：box-sizing:content-box

2:IE盒模型

特点：盒子的宽度包括了content+padding+border

获取盒子的宽高

边距重叠问题

当两个元素紧挨在一起上下排列时，边距会发生重叠，这种重叠取决于谁的边框高度更高，那么边距小的就会被边距大的覆盖

<section id="sec">
       <style>
           #sec{
               background-color: chocolate;
           }
           .child{
               height: 100px;
               margin-top: 10px;
               /* 相对于父元素的top撑开了10px */
               background-color: darkgrey;
           }
       </style>
       <article class="child">

       </article>
   </section> 

解决边距重叠方法

BFC（块级格式化上下文）

特点：一个BFC就相当于是一个独立的容器，在这个容器里面，外部的元素影响不到内部，内部的元素也影响不到外部

要想解决边距重叠问题，就需要将会发生重叠的两个元素置于两个BFC当中，互不影响

BFC创建方法

1：body根元素就是一个BFC

2：float除了none以外的值

3：position(absolute,fixed)

4：display(inline-block,flex,table-cell)

5：overflow(hidden,scroll,auto)

<section id="sec">
       <style>
           #sec{
               background-color: chocolate;
               overflow: hidden;
           }
           .child{
               height: 100px;
               margin-top: 10px;
               /* 相对于父元素的top撑开了10px */
               background-color: darkgrey;
           }
       </style>
       <article class="child">

       </article>
   </section> 

使用上述提及的创建BFC方法可以解决边距重叠问题，但是使用不同的方法，也会带来不同的副作用，要对症下药

比如在上述示例中使用float:left来创建BFC，元素宽度就会变为0，要使用width:100%来撑开宽度，所以，遇到浮动元素建议使用overflow来创建BFC更佳