css盒模型

基本概念:

标准模型+ IE模型

标准模型和IE模型区别

标准模型 width=content 
IE模型  width=content+ padding+ border

CSS如何设置这两种模型

标准模型 box-sizing:content-box
IE模型 box-sizing:border-box

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

dom.style.width/height 只能获取内联属性
dom.currentStyle.width/height   拿到渲染以后的宽度和高度 只有IE支持 
dom.getComputerStyle.width/height  拿到渲染以后的宽度和高度 兼容性好 
dom.getBoundingClientRect().width/height  left top width height  距离视窗的绝对位置

实例题(根据盒模型解释边距重叠)

screen 的高度是多少
    <section class="screen">
        <div class="child"></div>
    </section>

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 30px 0;
}

.screen {
    background: red;
    overflow: hidden;
}

.child {
    height: 100px;
    margin-top: 10px;
    background: #dedede;
}

BFC(边距重叠解决方案)

	基本概念: BFC 块级格式化上下文
	

BFC原理
1:BFC容器的垂直方向上元素边距发生重叠
2:BFC区域不会与浮动元素重叠
3:BFC 是一个独立的容器 内外元素 互不影响
4:计算BFC高度的时候 浮动元素也会参与计算

如何创建BFC
1:float 的值不为none
2:position的值不是static 或者  relative;
3:display 各种不同的值 比如table
4:overflow: 不为 visible

BFC使用场景
1:边距重叠 在子元素外面包括BFC容器
2: BFC 不与float重叠
3: BFC清除浮动 高度会考虑子元素 的高度

//BFC
    <section class="layout">
        <div class="left">left</div>
        <div class="right">right</div>
    </section>
* {
    margin: 0;
    padding: 0;
}

.layout {
    background: red;
}

.layout .left {
    float: left;
    width: 100px;
    height: 100px;
    background: pink;
}

.layout .right {
    height: 110px;
    background: #ccc;
    overflow: hidden;
}

//实例2
    <section class="layout">
        <div class="left">left</div>
    </section>
    * {
    margin: 0;
    padding: 0;
}

.layout {
    background: red;
    float: left;
}

.layout .left {
    float: left;
}