百度前端學(xué)院-基礎(chǔ)學(xué)院-第七天到第八天之BFC

junfeng777 發(fā)布于2019-04-23 13:46 / 1867人閱讀

摘要：簡介全稱中文為塊級格式化上下文。特征總之記住一句話元素特征表現(xiàn)原則就是內(nèi)部元素?zé)o論怎么翻江倒海，都不會影響外部元素。如何觸發(fā)，常見如下的值不為的值為，或。的值不為和需掌握自適應(yīng)模塊布局內(nèi)容很多，具體參考

1、BFC簡介

BFC全稱"block formatting context",中文為“塊級格式化上下文”。特征總之記住一句話： BFC元素特征表現(xiàn)原則就是：內(nèi)部元素?zé)o論怎么翻江倒海，都不會影響外部元素。

如何觸發(fā)BFC，常見如下：

float的值不為none
overflow的值為auto，scroll或hidden。
display的值為table-cell，table-caption, inlin-block。
position的值不為relative和static.

需掌握 BFC自適應(yīng)模塊布局：

.float-left {
    float: left; margin-right: 20px; 
}
.bfc-content {
    overflow: hidden; background-color: #beceeb;
}

內(nèi)容很多，具體參考http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

云服務(wù)器 GPU云服務(wù)器前端學(xué)院第八天第七天阿里學(xué)院

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2302.html

相關(guān)文章

百度前端學(xué)院-基礎(chǔ)學(xué)院-第七天到第八天

摘要：第五天到第六天的內(nèi)容沒有記筆記，不好不好。第七天到第八天的學(xué)習(xí)目標(biāo)是學(xué)習(xí)布局的各種方式。主要包含相關(guān)和相關(guān)。定位的元素應(yīng)該在文檔流中的間隙不再存在絕對定位的元素不再存在于正常文檔布局流程中。內(nèi)容較多，請參考學(xué)習(xí)了容器項第五天到第六天的內(nèi)容沒有記筆記，不好不好。第七天到第八天的學(xué)習(xí)目標(biāo)是：學(xué)習(xí)布局的各種方式。主要包含position相關(guān)和Flexbox相關(guān)。知識點： 1、默認(rèn)情況下，塊級元...

zombieda 2019-04-23 13:46 評論0 收藏0
26天學(xué)通前端開發(fā)（配資料）

摘要：網(wǎng)上有很多前端的學(xué)習(xí)路徑文章，大多是知識點羅列為主或是資料的匯總，數(shù)據(jù)量讓新人望而卻步。天了解一個前端框架。也可以關(guān)注微信公眾號曉舟報告，發(fā)送獲取資料，就能收到下載密碼，網(wǎng)盤地址在最下方，獲取教程和案例的資料。前言好的學(xué)習(xí)方法可以事半功倍，好的學(xué)習(xí)路徑可以指明前進(jìn)方向。這篇文章不僅要寫學(xué)習(xí)路徑，還要寫學(xué)習(xí)方法，還要發(fā)資料，干貨滿滿，準(zhǔn)備接招。網(wǎng)上有很多前端的學(xué)習(xí)路徑文章，大多是知...

blair 2019-08-21 16:59 評論0 收藏0
貪心學(xué)院-圖神經(jīng)網(wǎng)絡(luò)高級訓(xùn)練營

摘要：百度網(wǎng)盤提取碼最近一直關(guān)注貪心學(xué)院的機(jī)器學(xué)習(xí)訓(xùn)練營，發(fā)現(xiàn)這門課講的很有深度，不僅適合職場也適合科研人員，加入行業(yè)拿到高薪僅僅是職業(yè)生涯的開始。 ??百度網(wǎng)盤??提取碼：u6C4最近一直關(guān)注貪心學(xué)院的機(jī)器學(xué)習(xí)訓(xùn)練營，發(fā)現(xiàn)這門課講的很有深度，不僅適合職場也適合科研人員，加入AI行業(yè)拿到高薪僅僅是職業(yè)生涯的開始?，F(xiàn)階段AI人才結(jié)...

番茄西紅柿 2021-11-25 09:43 評論0 收藏2637
百度前端學(xué)院-基礎(chǔ)學(xué)院-第三課

摘要：第三天讓簡歷有點色彩這一節(jié)課是來初步了解什么是，掌握基本的概念，語法，學(xué)習(xí)如何設(shè)置一些簡單的樣式。設(shè)置文字陰影。取值較多，具體參考文本布局控制在盒子中的位置。設(shè)置字母與字母直接的間距，或者字與字直接的間距。第二步，瀏覽器顯示內(nèi)容。第三天：讓簡歷有點色彩這一節(jié)課是來初步了解什么是CSS，掌握基本的CSS概念，語法，學(xué)習(xí)如何設(shè)置一些簡單的樣式。好記性不如爛筆頭，開始：字體： font-st...

DobbyKim 2019-04-23 14:38 評論0 收藏0
百度前端學(xué)院-基礎(chǔ)學(xué)院-第四課

摘要：今天是第四天，進(jìn)度可以，表揚(yáng)一下自己。今天的課程目標(biāo)是掌握稍微復(fù)雜的一些選擇器，還有背景，邊框等一些樣式屬性。設(shè)置邊框?qū)挾?。今天是第四天，進(jìn)度可以，表揚(yáng)一下自己。今天的課程目標(biāo)是：掌握 CSS 稍微復(fù)雜的一些選擇器，還有背景，邊框等一些 CSS 樣式屬性。 CSS背景：背景色：background-color:gray; 背景圖：background-image:url(www........

wean 2019-04-23 14:38 評論0 收藏0