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

下載本文檔

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

文檔簡介

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

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

BFC外邊距不合并；（2）BFC的區(qū)域不會(huì)與外部浮動(dòng)元素重疊；（3）計(jì)算BFC高度的時(shí)候，浮動(dòng)元素也會(huì)參與計(jì)算；（4）BFC元素是一個(gè)獨(dú)立的容器，外面的元素不會(huì)影響里面的元素，里面的元素也不會(huì)影響外面的元素。二、BFC布局——觸發(fā)BFCBFC就是讓元素形成一個(gè)獨(dú)立的空間，空間內(nèi)的元素不會(huì)影響到外面，那么如何才能讓元素形成這樣一個(gè)空間呢？為元素設(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ā)生了合并，而兩個(gè)子盒子.child1的下邊距和.child2的上邊距也發(fā)生了合并解決方案1.使用overflow屬性觸發(fā)BFC。做一個(gè)獨(dú)立的區(qū)塊div包裹子元素child1，設(shè)置包裹元素div的overflow屬性值hidden或者auto，包裹元素會(huì)被子元素?fù)伍_，高度就是子元素的高度；css部分代碼如下：.box{overflow:hidden; }html部分代碼如下：<body>

<divclass="parent">

<divclass="box">

<divclass="child1"></div>

</div>

<divclass="child2"></div>

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

width:400px;

height:100px;

background-color:red;

margin-bottom:40px;

margin-top:30px; display:inline-block;}BFC布局不僅僅可以解決垂直外邊距合并的問題，還可以解決子元素浮動(dòng)之后父元素塌陷的問題、浮動(dòng)元素與其他元素重疊的問題。30px60px實(shí)訓(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)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論