《Web前端開發(fā)項目教程》網(wǎng)頁的藍圖-簡單布局-使用BFC隔離空間_第1頁
《Web前端開發(fā)項目教程》網(wǎng)頁的藍圖-簡單布局-使用BFC隔離空間_第2頁
《Web前端開發(fā)項目教程》網(wǎng)頁的藍圖-簡單布局-使用BFC隔離空間_第3頁
《Web前端開發(fā)項目教程》網(wǎng)頁的藍圖-簡單布局-使用BFC隔離空間_第4頁
《Web前端開發(fā)項目教程》網(wǎng)頁的藍圖-簡單布局-使用BFC隔離空間_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

項目02網(wǎng)頁的藍圖—簡單布局任務(wù)2-4使用BFC隔離空間任務(wù)2-4BFC布局

知識點理解垂直外邊距合并的原理掌握BFC布局的觸發(fā)方法掌握BFC布局解決外邊距合并的方法技能點能夠熟練應(yīng)用BFC解決外邊距合并的問題能夠使用BFC解決其他實際問題一、垂直外邊距的合并標準流中，上下相鄰的兩個元素或內(nèi)外包含的兩個元素，其垂直方向的上下外邊距將會自動合并發(fā)生重疊。外邊距合并可以使都具有外邊距的元素在相鄰時能盡量占用較小的空間。塊級元素的垂直margin合并一、垂直外邊距的合并標準流中，上下相鄰的兩個元素或內(nèi)外包含的兩個元素，其垂直方向的上下外邊距將會自動合并發(fā)生重疊。外邊距合并可以使都具有外邊距的元素在相鄰時能盡量占用較小的空間。嵌套盒子的垂直margin合并二、BFC布局——規(guī)則BFC（BlockFormattingContext），塊級格式化上下文。它是一個獨立的渲染區(qū)域，決定了塊級元素如何對其內(nèi)容進行定位，以及與其他元素的關(guān)系和相互作用。在可視化布局的時候，BFC提供了一個環(huán)境，HTML元素在這個環(huán)境中按照一定的規(guī)則進行布局。一個環(huán)境中的元素不會影響到其他環(huán)境中的布局。（1）同一個BFC內(nèi)的兩個相鄰塊級元素的外邊距合并，但不同

BFC外邊距不合并；（2）BFC的區(qū)域不會與外部浮動元素重疊；（3）計算BFC高度的時候，浮動元素也會參與計算；（4）BFC元素是一個獨立的容器，外面的元素不會影響里面的元素，里面的元素也不會影響外面的元素。二、BFC布局——觸發(fā)BFCBFC就是讓元素形成一個獨立的空間，空間內(nèi)的元素不會影響到外面，那么如何才能讓元素形成這樣一個空間呢？為元素設(shè)置CSS屬性。常用的觸發(fā)BFC方法：（1）設(shè)置包含塊overflow屬性值為hidden；（3）設(shè)置子元素

display屬性值為:inline-block；BFC解決外邊距合并問題<styletype="text/css">*{padding:0;margin:0;}.parent{ width:400px; background-color:#ff0; }.child1{ width:400px; height:100px; background-color:red;

margin-bottom:40px;

margin-top:30px;}.child2{ width:400px; height:100px; background-color:blue;

margin-top:20px;}</style><body><divclass="parent">

<divclass="child1"></div>

<divclass="child2"></div></div></body>？？父級盒子.parent和子盒子.child1的上邊距發(fā)生了合并，而兩個子盒子.child1的下邊距和.child2的上邊距也發(fā)生了合并解決方案1.使用overflow屬性觸發(fā)BFC。做一個獨立的區(qū)塊div包裹子元素child1，設(shè)置包裹元素div的overflow屬性值hidden或者auto，包裹元素會被子元素撐開，高度就是子元素的高度；css部分代碼如下：.box{overflow:hidden; }html部分代碼如下：<body>

<divclass="parent">

<divclass="box">

<divclass="child1"></div>

</div>

<divclass="child2"></div>

</div></body>由于.child1盒子同時和父級盒子以及同級的盒子都發(fā)生了垂直外邊距的合并，所以使用overflow屬性將.child1盒子觸發(fā)成獨立的BFC，合并就不會再發(fā)生了。解決方案2.使用display屬性值觸發(fā)BFC。為子元素child1添加樣式屬性，如下：.child1{

width:400px;

height:100px;

background-color:red;

margin-bottom:40px;

margin-top:30px; display:inline-block;}BFC布局不僅僅可以解決垂直外邊距合并的問題，還可以解決子元素浮動之后父元素塌陷的問題、浮動元素與其他元素重疊的問題。30px60px實訓(xùn)任務(wù)BFC經(jīng)常用于頁面布局，請根據(jù)以下布局要求完成如圖2-4

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論