深入理解CSS盒模型 - 程序猿的程 - 博客园
深入理解CSS盒模型
?本文是學(xué)習(xí)中傳思客在慕課網(wǎng)開的課程《前端跳槽面試必備技巧》的學(xué)習(xí)筆記。課程地址：https://coding.imooc.com/class/evaluation/129.html#Anchor。
如果你在面試的時(shí)候面試官讓你談?wù)剬?duì)盒模型的理解，你是不是不知從何談起。這種看似簡單的題其實(shí)是最不好答的。
? 下面本文章將會(huì)從以下幾個(gè)方面談?wù)労心Ｐ汀?/p>
- 基本概念：標(biāo)準(zhǔn)模型 和IE模型
- CSS如何設(shè)置這兩種模型
- JS如何設(shè)置獲取盒模型對(duì)應(yīng)的寬和高
- 實(shí)例題（根據(jù)盒模型解釋邊距重疊）
- BFC（邊距重疊解決方案）
?
基本概念
盒模型的組成大家肯定都懂，由里向外content,padding,border,margin.
盒模型是有兩種標(biāo)準(zhǔn)的，一個(gè)是標(biāo)準(zhǔn)模型，一個(gè)是IE模型。
?
?從上面兩圖不難看出在標(biāo)準(zhǔn)模型中，盒模型的寬高只是內(nèi)容（content）的寬高，
而在IE模型中盒模型的寬高是內(nèi)容(content)+填充(padding)+邊框(border)的總寬高。
?
css如何設(shè)置兩種模型
這里用到了CSS3 的屬性 box-sizing
/* 標(biāo)準(zhǔn)模型 */ box-sizing:content-box;/*IE模型*/ box-sizing:border-box;?
JS獲取寬高
通過JS獲取盒模型對(duì)應(yīng)的寬和高，有以下幾種方法：
為了方便書寫，以下用dom來表示獲取的HTML的節(jié)點(diǎn)。
1. ?dom.style.width/height?
這種方式只能取到dom元素內(nèi)聯(lián)樣式所設(shè)置的寬高，也就是說如果該節(jié)點(diǎn)的樣式是在style標(biāo)簽中或外聯(lián)的CSS文件中設(shè)置的話，通過這種方法是獲取不到dom的寬高的。
?2. dom.currentStyle.width/height?
這種方式獲取的是在頁面渲染完成后的結(jié)果，就是說不管是哪種方式設(shè)置的樣式，都能獲取到。
但這種方式只有IE瀏覽器支持。
?3. window.getComputedStyle(dom).width/height
這種方式的原理和2是一樣的，這個(gè)可以兼容更多的瀏覽器，通用性好一些。
?4. dom.getBoundingClientRect().width/height
這種方式是根據(jù)元素在視窗中的絕對(duì)位置來獲取寬高的
?5.dom.offsetWidth/offsetHeight
這個(gè)就沒什么好說的了，最常用的，也是兼容最好的。
?
邊距重疊
什么是邊距重疊
如下圖，父元素沒有設(shè)置margin-top，而子元素設(shè)置了margin-top：20px;可以看出，父元素也一起有了邊距。
上圖的代碼
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;}.demo{height:100px;background: #eee;}.parent{height:200px;background: #88f;}.child{height:100px;margin-top:20px;background: #0ff;width:200px;}</style> </head> <body><section class="demo"><h2>此部分是能更容易看出讓下面的塊的margin-top。</h2></section><section class = "parent"><article class="child"><h2>子元素</h2>margin-top:20px;</article><h2>父元素</h2>沒有設(shè)置margin-top</section> </body> </html>?
邊距重疊解決方案(BFC)
首先要明確BFC是什么意思，其全英文拼寫為 Block Formatting Context 直譯為“塊級(jí)格式化上下文”
BFC的原理
?怎么取創(chuàng)建bfc
應(yīng)用場(chǎng)景
看一個(gè)垂直margin重疊例子
代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;}.top{background: #0ff;height:100px;margin-bottom:30px;}.bottom{height:100px;margin-top:50px;background: #ddd;}</style> </head> <body><section class="top"><h1>上</h1>margin-bottom:30px;</section><section class="bottom"><h1>下</h1>margin-top:50px;</section></body> </html>?
?效果圖
?用bfc可以解決垂直margin重疊的問題
關(guān)鍵代碼
<section class="top"><h1>上</h1>margin-bottom:30px;</section><!-- 給下面這個(gè)塊添加一個(gè)父元素，在父元素上創(chuàng)建bfc --><div style="overflow:hidden"><section class="bottom"><h1>下</h1>margin-top:50px;</section></div>?
效果圖?
?
關(guān)于bfc的應(yīng)用的案例這里就不在一一舉出了，大家去網(wǎng)上找一些其他的文章看一下。
?
歡迎補(bǔ)充
總結(jié)
以上是生活随笔為你收集整理的深入理解CSS盒模型 - 程序猿的程 - 博客园的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EPlan 下载和破解
- 下一篇： 模拟CMOS集成电路设计中的gm/id设