盒模型包括margin、border、padding、content（由外向裡）
盒模型包括標準模型和ie模型
如下圖所示：（注意他們的高寬度包含的內容）
標準模型高度和寬度指的是content的高度和寬度
ie模型高度和寬度指的是content+padding+border加起來的高度和寬度
標準模型：box-sizing: content-box
ie模型：box-sizing: border-box
（1）dom.style.width/heigt
這種方式只能獲取dom元素通過內聯樣式所得的高寬（dom元素設定元素一般有三種方式：網節點上內嵌《內聯》；html中加style節點《內聯》；link引外部的樣式《外聯》）
（2）dom.currentstyle.width/height
這種方式獲取的是頁面渲染之後即時執行的結果，也就是外聯/內聯都可以獲取，相對來說比較準確；
缺點：但是這種方式只有ie支援
（3）window.getcomputedstyle(dom).width/height
原理與（2）相似，但是通用性更高，相容性更好
（4）dom.getboundingclientrect().width/height
根據dom元素在視窗中的絕對位置來獲取高寬的
（5）dom.offsetwidth/offsetheight
最常用的，也是相容性最好的
父子元素邊界重疊（父元素沒有設定邊距，子元素設定了邊距，那麼父元素也有了邊距）
兄弟元素邊界重疊（取兩者之間的最大值作為邊距）
空元素的邊距（margin-top/margin-bottom取乙個最大值作為邊距）
1、bfc的基本概念
邊距重疊解決方案
2、bfc的原理
（1）內部的box會在垂直方向乙個接著乙個放置；
（2）box垂直方向的邊距由margin決定，屬於同乙個bfc的兩個相鄰box會發生重疊；
（3）計算bfc的高度時，float浮動的高度寬度會被計算進去；
（4）bfc區域不會與浮動區域發生重疊；
（5）bfc區域的元素不會影響外面的元素，同樣，外面的元素也不會影響bfc裡面的元素
3、如何建立bfc
（1）float不為none（脫離文件流）；
（2）position為fixed和absolute；
（3）dislapy為inline-block,table-cell,table-caption,flex,inine-flex；
（4）overflow不為visible
（5）根元素
4、bfc的使用場景
（1）分欄布局時某乙個分欄文字溢位覆蓋了相鄰分欄的部分（對應原理（4））
效果圖：
（前）
（後）
（2）解決邊距重疊問題（對應原理（1）原理（2））
（3）清除內部浮動（對應原理（3））
效果圖：
（前）
（後）
Web前端篇 CSS盒模型
常用塊元素由 p,h1 h6,div,ul,ol,tr,li,form常用內聯元素由 a,span,em,i,strong,u,常見的內聯塊元素 上面三句 相當於一句 border 3px solid red 同樣,也可以分別設定邊框四個方向的粗細 線性樣式 顏色,跟padding的四個方向一樣。上...
WEB學習 CSS盒模型
border是乙個大綜合屬性，border 1px solid red 就是把4個邊框，都設定為1px寬度 線型實線 red顏色。border屬性能夠被拆開，有兩大種拆開的方式 1 按3要素 border width border style border color 2 按方向 border to...
前端 關於CSS盒模型
矩形區域中各個屬性的取值只有margin可以取負值，只有width和margin可以取auto關鍵字，border不能為百分數，其他屬性都只能取 正的數字或者正的百分數。其中margin和padding設定的值是乙個塊區域的垂直高度，這塊區域的長和寬是隨著內容的width和height變化 而變化的...