題目：談?wù)勀銓?duì)css盒模型的認(rèn)識(shí)
基本概念：標(biāo)準(zhǔn)模型+IE模型
相關(guān)問(wèn)題及答案：
1）標(biāo)準(zhǔn)模型和IE模型的區(qū)別：
CSS盒模型的標(biāo)準(zhǔn)模型和IE的盒模型的區(qū)別在于寬度不同术吝。css的寬度是指content的寬度，而IE盒模型則是content+padding+border
1.png
2.png
2) CSS如何設(shè)置這兩種模型
? 利用 box-sizing：content-box和box-sizing：border-box來(lái)區(qū)別兩種盒模型彬向。瀏覽器默認(rèn)的是content-box。
3） JS如何設(shè)置獲取盒模型對(duì)應(yīng)的寬和高
? dom.style.width/height(只能取到內(nèi)聯(lián)式的寬和高)
? dom.currentStyle.width/height(能及時(shí)拿到渲染后的寬和高颅拦，但是只有IE支持)
? window.getComputedStyle(dom).width/height(支持所有瀏覽器)
? dom.getBoundingClientRect().width/height(計(jì)算絕對(duì)位置)
4）實(shí)例題（根據(jù)盒模型解釋邊距重疊）
1583124314684.png
塊級(jí)元素套了一個(gè)塊元素臊恋，已知子元素的高度為100px.子元素與父元素的上邊距距離高度是10px.那么父盒子的高度是多少？
答案：100px或110px
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css盒模型</title>
<style>
html * {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<section id="sec">
<style>
#sec{
background-color: red;
}
.child{
height: 100px;
margin-top: 10px;
background-color: yellow;
}
</style>
<article class="child"></article>
</section>
</body>
</html>
代碼添加完 打開瀏覽器后如下圖所示:
1583147859227.png
發(fā)現(xiàn)父盒子的高度為100px虱肄。
然而這時(shí)候我們并沒(méi)有看見父盒子的顏色致板，所以嘗試添加overflow-hidden嘗試發(fā)現(xiàn)紅色區(qū)域露了出來(lái)
1583147584523.png
高度也發(fā)生了變化 為110px
1583147679226.png
5）BFC(邊距重疊解決方案)
問(wèn)題：
一、BFC的基本概念：塊級(jí)格式化上下文 （引申：IFC內(nèi)聯(lián)元素上下文）
二咏窿、BFC的原理（BFC的渲染規(guī)則）：
1.BFC的邊距會(huì)發(fā)生重疊
- BFC的區(qū)域不會(huì)與浮動(dòng)元素的BOX重疊
- BFC在獨(dú)立頁(yè)面上是一個(gè)容器 外面的元素不會(huì)影響他里面的元素 里面的元素也不會(huì)影響它外面的元素
- 計(jì)算BFC高度的時(shí)候斟或，浮動(dòng)元素的高度也會(huì)計(jì)算
三、如何創(chuàng)建BFC翰灾？
1）根元素
2）float屬性不為none(CSS屬性的默認(rèn)值為none缕粹，只要你設(shè)置了浮動(dòng)稚茅，當(dāng)前元素就創(chuàng)建了BFC)
3）position不為static和relative（position的默認(rèn)值是static）
4）overflow不為visible （可以為hidden等）
5）display為inline-block, table-cell, table-caption, flex, inline-flex
四、BFC的使用場(chǎng)景有哪些平斩？
示例代碼：
首先設(shè)定BFC發(fā)生邊距重疊的情況
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css盒模型</title>
<style>
html * {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<section id="sec">
<style>
#sec{
background-color: red;
}
.child{
height: 100px;
margin-top: 10px;
background-color: yellow;
}
</style>
<article class="child"></article>
</section>
<!-- BFC垂直方向重疊 -->
<section id="margin">
<style>
#margin{
background-color: pink;
overflow: hidden;
}
#margin>p{
margin:5px auto 25px;
background-color: red;
}
</style>
<p>1</p>
<p>2</p>
<p>3</p>
</section>
</body>
</html>
打開發(fā)現(xiàn) 2的下邊距和3的上邊距發(fā)生重疊
1583150061936.png
如何消除這種重疊呢亚享？
只需要給子元素創(chuàng)建一個(gè)父元素 而父元素創(chuàng)建一個(gè)BFC即可 如下圖所示：
1583150205775.png
打開瀏覽器
1583150452762.png
再次利用float創(chuàng)建雙欄布局 左側(cè)固定 右側(cè)自適應(yīng)
讓浮動(dòng)元素的BOX重疊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css盒模型</title>
<style>
html * {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<section id="sec">
<style>
#sec {
background-color: red;
}
.child {
height: 100px;
margin-top: 10px;
background-color: yellow;
}
</style>
<article class="child"></article>
</section>
<!-- BFC垂直方向重疊 -->
<section id="margin">
<style>
#margin {
background-color: pink;
overflow: hidden;
}
#margin>p {
margin: 5px auto 25px;
background-color: red;
}
</style>
<p>1</p>
<div style="overflow: hidden;">
<p>2</p>
</div>
<p>3</p>
</section>
<section id="layout">
<!-- 以兩欄布局為例，左邊寬度固定绘面，右邊寬度自適應(yīng) -->
<style>
#layout .container{
background-color: #000;
}
#layout .container .left{
width: 300px;
height: 100px;
background-color: red;
float: left;
}
#layout .container .right{
height: 110px;
background-color: blue;
}
</style>
<article class="container">
<div class="left"></div>
<div class="right"></div>
</article>
</section>
</body>
</html>
打開瀏覽器 如下圖所示:
1583151249790.png
給右側(cè)盒子加一個(gè)overflow：auto欺税；讓其成為BFC 如下圖所示 發(fā)現(xiàn)已經(jīng)解決.
1583151516110.png
設(shè)定：計(jì)算高度的時(shí)候，浮動(dòng)元素的高度沒(méi)有計(jì)算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css盒模型</title>
<style>
html * {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<section id="sec">
<style>
#sec {
background-color: red;
}
.child {
height: 100px;
margin-top: 10px;
background-color: yellow;
}
</style>
<article class="child"></article>
</section>
<!-- BFC垂直方向重疊 -->
<section id="margin">
<style>
#margin {
background-color: pink;
overflow: hidden;
}
#margin>p {
margin: 5px auto 25px;
background-color: red;
}
</style>
<p>1</p>
<div style="overflow: hidden;">
<p>2</p>
</div>
<p>3</p>
</section>
<!-- BFC不與flaot重疊的解決方式 -->
<section id="layout">
<!-- 以兩欄布局為例揭璃，左邊寬度固定晚凿，右邊寬度自適應(yīng) -->
<style>
#layout .container{
background-color: #000;
}
#layout .container .left{
width: 300px;
height: 100px;
background-color: red;
float: left;
}
#layout .container .right{
overflow: auto;
height: 110px;
background-color: blue;
}
</style>
<article class="container">
<div class="left"></div>
<div class="right"></div>
</article>
</section>
<!-- BFC不與flaot重疊的解決方式 -->
<section id="float">
<style>
#float{
background-color: red;
}
#float .float{
float: left;
font-size: 30px;
}
</style>
<div class="float">我是浮動(dòng)元素</div>
</section>
</body>
</html>
打開瀏覽器
1583152286550.png
讓父元素變成BFC
1583152523929.png
打開瀏覽器可以看見
1583152547165.png
最終代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css盒模型</title>
<style>
html * {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<section id="sec">
<style>
#sec {
background-color: red;
}
.child {
height: 100px;
margin-top: 10px;
background-color: yellow;
}
</style>
<article class="child"></article>
</section>
<!-- BFC垂直方向重疊 -->
<section id="margin">
<style>
#margin {
background-color: pink;
overflow: hidden;
}
#margin>p {
margin: 5px auto 25px;
background-color: red;
}
</style>
<p>1</p>
<div style="overflow: hidden;">
<p>2</p>
</div>
<p>3</p>
</section>
<!-- BFC不與flaot重疊的解決方式 -->
<section id="layout">
<!-- 以兩欄布局為例，左邊寬度固定瘦馍，右邊寬度自適應(yīng) -->
<style>
#layout .container {
background-color: #000;
}
#layout .container .left {
width: 300px;
height: 100px;
background-color: red;
float: left;
}
#layout .container .right {
overflow: auto;
height: 110px;
background-color: blue;
}
</style>
<article class="container">
<div class="left"></div>
<div class="right"></div>
</article>
</section>
<!-- BFC子元素即使是flaot也會(huì)參與計(jì)算 -->
<section id="float">
<style>
#float {
background-color: red;
overflow: auto;
/* 或者用float不為none也可以 */
}
#float .float {
float: left;
font-size: 30px;
}
</style>
<div class="float">我是浮動(dòng)元素</div>
</section>
</body>
</html>
