題目:談談你對 CSS 盒模型的認識
涉及知識點(層層遞進):html
從上圖能夠看到標準 W3C 盒子模型的範圍包括 margin、border、padding、content,而且 content 部分不包含其餘部分。dom
從上圖能夠看到 IE 盒子模型的範圍也包括 margin、border、padding、content,和標準 W3C 盒子模型不一樣的是:IE 盒子模型的 content 部分包含了 border 和 pading。佈局
box-sizing:conent-box; box-sizing:border-box;
dom.style.width/height dom.currentStyle.width/height (ie支持) window.getComputedStyle(dom).width/height; dom.getBoundingClientRect().width/height;
如上圖:有兩個元素其中子元素高度爲100px,子元素與父元素的上邊距爲 10px,求父元素的實際高度?學習
答案:說100px 對,說110 也對,爲何捏?這個要看父元素的盒模型要怎麼設置的,上代碼演示咯,注意看噢:spa
<style> html,*{ padding: 0;margin: 0; } #sec{ background: #f00; } .child{ height: 100px; margin-top: 10px; background: yellow; } </style> </head> <body> <section id="sec"> <article class="child"> </article> </section> </body>
運行效果:code
上圖證實 100px 是對的。orm
接着咱們給元素加個 overflow:hidden,而後在看效果:htm
你會發現這時高度爲 110px, 這時你們可能會疑問,爲何給父級元素設置一個 overflow:hidden之後,它的高度就成 110 呢,這塊的基本原理是啥呢,咋就這樣呢?說這個以前,先引用一個知識點:ip
上面代碼是父子元素邊距重疊,那麼還有兩種狀況邊距重疊就是,一種是兄弟元素,就是兩個 div 挨着,每一個都上邊距或者下邊距,那麼重疊的原則就是取最大值。get
來回答上面問題:給父級加了 overflow:hidden,其實就是給父級元素建立一個BFC(塊級格式化上下文),那什麼是BFC,請看下一個話。
Block Formatting Context, 塊級格式化上下文,一個獨立的塊級渲染區域,該區域擁有一套渲染規格來約束塊級盒子的佈局,且與區域外部無關。
<style> html,*{ padding: 0;margin: 0; } #margin{ background: pink; overflow: hidden; } #margin>p{ margin: 5px auto 25px; background: red; } </style> </head> <body> <section id="margin"> <p>1</p> <p>2</p> <p>3</p> </section> </body>
]
如上圖,咱們給每一個p 設置上邊距5, 下25 結果從第二個起來它的上邊距,下邊距都是25 而不是 30,這個就是邊距重疊問題,那如何消除這個問題呢?
解:就是給子元素加個一個父級元素,讓你能元素建立一個 BFC,以下:
運行效果如圖:
<style> html,*{ padding: 0;margin: 0; } #layout{ background: red; } .left { width: 100px; height: 100px; background: pink; float:left; } .right{ height: 110px; background: #ccc; } </style> </head> <body> <section id="layout"> <div class="left"></div> <div class="right"></div> </section> </body>
運行效果:
從運行效果能夠發現,當右側增高的時候會侵入左側的佔位,這個是float的特性,顯示這個不符合咱們左右佈局的目的,那怎麼辦呢?其實很簡單,就是給右側的元素建立一個 BFC,以下:
運行效果:
<style> html,*{ padding: 0;margin: 0; } #float{ background: red; } .float{ float: left; font-size: 30px; } </style> </head> <body> <section id="float"> <div class="float">個人浮動的小智</div> </section> </body>
運行效果:
能夠看出父級元素的高度爲0,這是爲何呀?
這是由於 float 致使了元素的坍塌,因此父級元素的高度爲0,這時咱們給父級元素建立一個 BFC,就能解決問題。
運行效果:
以上就是 BFC的清除浮動原理。
願你成爲終身學習者