資訊專欄INFORMATION COLUMN
?
?
????
在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們來(lái)深入學(xué)習(xí)一下css布局相關(guān)的知識(shí)。
?
css布局篇已經(jīng)講個(gè)2篇了，前面我們深入講解了 盒模型與box-sizing, 元素分類，行框，定位與浮動(dòng)等知識(shí)點(diǎn)。今天呢，我們把css布局篇做一個(gè)結(jié)尾，最后講解下margin的問(wèn)題和格式化上下文。
?
?
margin問(wèn)題主要在垂直方向上。在垂直方向上，元素與自身或相鄰的兄弟元素、父子元素之間的margin，會(huì)發(fā)生合并。另外垂直方向上子元素的margin無(wú)法隔離自身與父元素。
我們來(lái)分別看下這幾種情況：
1.1 元素與兄弟元素margin合并
兄弟元素之間，垂直方向上的margin-top和margin-bottom會(huì)進(jìn)行合并。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
}
.self{
width: 200px;
height: 50px;
background: red;
margin-bottom: 30px;
}
.brother{
width: 200px;
height: 50px;
background: blue;
margin-top: 20px;
}
style>
head>
<body>
<div class="self">selfdiv>
<div class="brother">brotherdiv>
body>
html>
? ?
?
1.2 元素與自身margin合并
當(dāng)元素自身是個(gè)空元素，并且沒(méi)有高度，padding，broder的時(shí)候，他自身的margin-top和margin-bottom合并。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
}
.self{
width: 200px;
/*height: 50px;*/
background: red;
margin-top: 20px;
margin-bottom: 30px;
}
.brother{
width: 200px;
height: 50px;
background: blue;
}
style>
head>
<body>
<div class="brother">brotherdiv>
<div class="self">div>
<div class="brother">brotherdiv>
body>
html>
? ?
?
1.3 元素與父元素margin合并
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
}
.self{
width: 200px;
height: 50px;
background: red;
margin-top: 20px;
}
.parent{
width: 220px;
height: 80px;
background: blue;
margin-top: 30px;
}
style>
head>
<body>
<div class="parent">
<div class="self">selfdiv>
div>
body>
html>
? ?
?
1.4 子元素的margin無(wú)法隔離自身與父元素
同樣還是上面的這段代碼，我們會(huì)發(fā)現(xiàn)無(wú)論父元素有沒(méi)有margin-top，子元素的margin-top都不能將自己和父元素隔離開，而是緊貼著父元素的上邊沿。
?
那么我們?nèi)绾蝸?lái)解決margin的這些問(wèn)題呢，我們這里先來(lái)賣個(gè)關(guān)子，等我們接下來(lái)介紹完格式化上下文的知識(shí)再反過(guò)來(lái)討論margin的解決方案。
?
?
格式化上下文（formatting context），指的是具有某種CSS格式化規(guī)則（布局規(guī)則）的上下文環(huán)境，在這個(gè)上下文環(huán)境內(nèi)的所有子元素，都將根據(jù)其特定的CSS格式化規(guī)則來(lái)進(jìn)行排列。
在css中有
?
2.1 BFC
BFC叫做塊級(jí)格式化上下文，它的特點(diǎn)是
- bfc是一個(gè)獨(dú)立封閉的渲染區(qū)域，子元素的CSS樣式不會(huì)影響B(tài)FC元素外部；
- 浮動(dòng)子元素參與BFC父元素的高度計(jì)算。
- BFC元素能夠識(shí)別浮動(dòng)的兄弟元素；
注意： 請(qǐng)不要把BFC和塊級(jí)元素搞混了，塊級(jí)元素并不是一個(gè)塊級(jí)格式化上下文，也沒(méi)有BFC的特點(diǎn)
首先，我們上節(jié)課講到浮動(dòng)子元素會(huì)導(dǎo)致塊級(jí)父元素高度塌陷，需要我們使用clearfix去解決，如果我們可以讓父元素?fù)碛蠦FC，那么根據(jù)他的第二個(gè)特點(diǎn)同樣可以解決父元素高度塌陷問(wèn)題。
另外，上節(jié)課講到block元素會(huì)占據(jù)浮動(dòng)元素的文檔流，而inline和inline-block元素則可以識(shí)別浮動(dòng)元素，在其周圍顯示?，F(xiàn)在根據(jù)BFC第三條特點(diǎn)你可以用BFC的方式使block元素也可以識(shí)別浮動(dòng)。
最后，剛才1.4中子元素的margin無(wú)法隔離自身與父元素的例子中，我們會(huì)發(fā)現(xiàn)子元素的margin-top從父元素中頂出去了，這顯然違反了BFC的第一條特點(diǎn)，如果我們可以讓父元素?fù)碛蠦FC，就可以解決1.4中的問(wèn)題了。
好，那既然BFC那么有用，如何才能讓一個(gè)元素?fù)碛蠦FC特性呢。?
我從MDN上摘取了這些： 如何制造一個(gè)BFC
- 根元素或其它包含它的元素
- 浮動(dòng)元素 (元素的 float 不是 none)
- 絕對(duì)定位元素 (元素的 position 為 absolute 或 fixed)
- 內(nèi)聯(lián)塊 (元素具有 display``: inline-block)
- overflow 值不為 visible 的塊元素
- 表格標(biāo)題 (元素具有 display``: table-caption)
- 表格單元格 (元素具有 display``: table-cell)
- display``: flow-root
- contain為以下值的元素: layout, content, 或 strict
- 彈性項(xiàng) (display``: flex 或 inline-flex元素的子元素)
- 網(wǎng)格項(xiàng) (display``: grid 或 inline-grid 元素的子元素)
多列容器 (元素的 column-count 或 column-width 不為 auto， 包括 column-count: 1的元素)
我們常用和常見(jiàn)的是第2 - 5條去制造一個(gè)BFC區(qū)域
對(duì)于上面我們說(shuō)的使用BFC的特性解決高度塌陷問(wèn)題，識(shí)別浮動(dòng)問(wèn)題 和 子元素margin無(wú)法隔離父元素問(wèn)題，我們這里就不去舉例說(shuō)明了，大家可以自己親自試下，隨便運(yùn)用其中一條將元素變?yōu)锽FC來(lái)看時(shí)候可以解決上述問(wèn)題。
對(duì)于第一部分margin的問(wèn)題，再遇到子元素margin無(wú)法隔離父元素的問(wèn)題，我們就可以使用BFC的思路去解決了，對(duì)于其他的垂直方向上margin合并的問(wèn)題，其實(shí)并不是bug而是一種規(guī)則，我們其實(shí)是可以不用解決的，我們只要了解合并原則就好了，但如果一定要解決，我們可以將元素變成inline-block或者將他們浮動(dòng)起來(lái)。這樣就不會(huì)有margin合并的問(wèn)題了，這主要跟不同元素類型的布局規(guī)則有關(guān)。
?
2.2 IFC
在formatting context中最復(fù)雜和重要的就是BFC了。
而對(duì)于IFC，他的創(chuàng)建是隱式的，只有元素內(nèi)僅包含文本、inline元素或inline-block元素才會(huì)擁有IFC特征。而IFC特征說(shuō)的就是我們?cè)诘谝黄飳懙?行框 的特征。
最后FFC和GFC分別是css3中flex布局和grid布局響應(yīng)的特征，這個(gè)是多帶帶的一塊兒知識(shí)點(diǎn)，我們以后如果來(lái)聊css3布局體系的時(shí)候再來(lái)說(shuō)。
?
?
那就此
css布局篇的知識(shí)點(diǎn)就基本都講完了，下面要聊聊哪塊兒知識(shí)還沒(méi)想好呀…！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/2226.html
摘要：有談?wù)劽嬖嚺c面試題對(duì)于前端面試的一些看法。動(dòng)態(tài)規(guī)劃算法的思想及實(shí)現(xiàn)方法幫大家理清動(dòng)態(tài)規(guī)劃的解決思路以及原理方法前端經(jīng)典面試題從輸入到頁(yè)面加載發(fā)生了什么這是一篇開發(fā)的科普類文章，涉及到優(yōu)化等多個(gè)方面。極客學(xué)院前端練習(xí)題道練習(xí)題，面試季練練手。 由數(shù)據(jù)綁定和排序引入的幾個(gè) JavaScript 知識(shí)點(diǎn) 在 JavaScript 的數(shù)據(jù)綁定和做簡(jiǎn)單的表格排序中遇到的幾個(gè)知識(shí)點(diǎn) [[JS 基礎(chǔ)...
摘要：下面我們就一步一步揭開的神秘面紗，深入理解盒模型，這對(duì)我們?cè)诓季稚蠒?huì)有一個(gè)質(zhì)的提升。與內(nèi)聯(lián)元素的百分比值與內(nèi)聯(lián)元素。 css是一門具象語(yǔ)言，并不像js那樣具有邏輯性，因此，就算入行了前端很久的工程師，也覺(jué)得css難以掌握。下面我們就一步一步揭開css的神秘面紗，深入理解css盒模型，這對(duì)我們?cè)诓季稚蠒?huì)有一個(gè)質(zhì)的提升。 盒子模型 showImg(https://segmentfault....
摘要：包裹性所謂包裹性，其實(shí)是由包裹和自適應(yīng)兩部分組成。官方對(duì)屬性的解釋是元素盒子的邊不能和前面的浮動(dòng)元素相鄰。清除高度塌陷的問(wèn)題在上面的章節(jié)中，如果子元素設(shè)置浮動(dòng)屬性，則父元素就會(huì)出現(xiàn)高度塌陷的問(wèn)題。 float屬性是CSS中常用的一個(gè)屬性，在實(shí)際工作中使用的非常多，如果使用不當(dāng)就會(huì)出現(xiàn)意料之外的效果。雖然很多人說(shuō)浮動(dòng)會(huì)用就行、浮動(dòng)過(guò)時(shí)了，但是對(duì)于優(yōu)秀的前端開發(fā)人員，需要有刨根問(wèn)底的精神，...
摘要：中有個(gè)重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡(jiǎn)介在解釋之前，先說(shuō)一下文檔流。我們常說(shuō)的文檔流其實(shí)分為定位流浮動(dòng)流普通流三種。使用包含浮動(dòng)元素注意，這里觸發(fā)并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個(gè)重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡(jiǎn)介 在解釋BFC之前，先說(shuō)一下文檔流。我們常說(shuō)的文檔流其實(shí)分為定位...
摘要：概述在世界這本書中有一些黑魔法給列舉出來(lái)，在結(jié)合自己的理解。篇幅有點(diǎn)長(zhǎng)，希望大家能夠堅(jiān)持看完，一定會(huì)有收獲以下是摘自每章內(nèi)一些重要的概念與技巧。 概述 在《css世界》這本書中有一些黑魔法給列舉出來(lái)，在結(jié)合自己的理解。篇幅有點(diǎn)長(zhǎng)，希望大家能夠堅(jiān)持看完，一定會(huì)有收獲?。。∫韵率钦悦空聝?nèi)一些重要的概念與技巧。其中有解決圖片間隙的問(wèn)題、小圖標(biāo)與文字居中問(wèn)題等; ps: 特別是 line-h...
閱讀 3624·2021-09-06 15:13
閱讀 1602·2021-09-02 10:19
閱讀 2548·2019-08-30 15:52
閱讀 983·2019-08-29 15:25
閱讀 1645·2019-08-26 18:36
閱讀 578·2019-08-26 13:23
閱讀 1409·2019-08-26 10:46
閱讀 3574·2019-08-26 10:41
