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;
}