對CSS盒模型的認識
- 標準模型 + IE模型
- 標準模型和IE模型的區(qū)別
- CSS如何設(shè)置這兩種模型
- js如何設(shè)置盒模型的寬和高
- 什么是邊距重疊?
- BFC
標準模型和IE模型
- 包含border padding margin
- 標準模型的寬和高不計算padding和border
- IE模型的寬和高計算padding和border
如何設(shè)置這兩種模型?
- 標準模型: box-sizing:conten-box
- IE模型: box-sizing:border-box
如何獲取寬和高?
- Dom.style.width/height -內(nèi)聯(lián)
- Dom.currentStyle.width/height -IE
- Dom.getBoundingClientRect 該方法獲取的是Dom相對于瀏覽器的位置,返回一個object,該對象有6個屬性：top,lef,right,bottom,width,height；
- window.getComputedStyle(Dom).width/height
邊距重疊
- 什么是邊距重疊?
- 邊界重疊是指兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內(nèi)容、補白、邊框)重合在一起而形成一個單一邊界萄传。
- 水平邊距永遠不會重疊
- 邊距永遠取兩者間邊距的最大值
BFC
- 通過overflow:hidden 等于給父元素創(chuàng)建一個BFC
- BFC的基本概念:塊級格式上下文
- BFC的原理(渲染機制)
- BFC的垂直方向會發(fā)生邊距重疊
- BFC的區(qū)域不會與浮動元素的位置重疊
- BFC在頁面中是一個獨立的容器,內(nèi)外不會相互影響
- 計算BFC的高度時,會計算浮動元素的高度(清除浮動的原理)
- 如何創(chuàng)建BFC?
- 設(shè)置float,position,display,overflow都會創(chuàng)建BFC
- BFC的使用場景
- 清除浮動
- 左右布局(BFC不會與浮動元素重疊)
