當前位置:首頁 » 網頁前端 » bfc前端
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

bfc前端

發布時間: 2022-04-26 07:55:48

1. 前端bfc是什麼意思


資料來源:小 Cheng 序 - 決勝前端(數百道前端面試真題)

2. 前端,BFC怎麼寫呢

BFC是什麼?
首先說一下BFC是什麼,概念從哪裡來?BFC全稱叫做(Block Formatting Context)中文叫塊級格式化上下文,是一個網頁的概念。網頁是一個一個盒子組成的,那麼這個BFC到底有什麼用途呢?看下面具體分析。
怎麼觸發BFC
浮動元素:float 除 none 以外的值。
絕對定位元素:position (absolute、fixed)。
display 為 inline-block、table-cells、flex。
overflow 除了 visible 以外的值 (hidden、auto、scroll)。
遇到哪些問題需要用到BFC
在網頁製作過程中由於瀏覽器載入是自上而下的原因(也可能是其他原因,個人是這么理解),外邊距上下會取最大值,左右不影響,所以會導致以下局面。

3. 前端裡面的BFC是什麼

應該是 Block Formatting Context信息來源網路,希望能幫到你啥是Block Formatting Context當涉及到可視化布局的時候,Block Formatting Context提供了一個環境,HTML元素在這個環境中按照一定規則進行布局。一個環境中的元素不會影響到其它環境中的布局。為了讓我們有個感性的認識,舉個不太合適的例子。你可以把一個頁面想像成大的集裝箱,這個集裝箱里裝的貨物就是HTML元素。在現實生活中為了避免不同人的貨物相互混淆,都是把貨物打好包裝再裝入集裝箱,這樣的話無論你包裝裡面的貨物怎麼擺放,都不會影響到其他人的貨物。那麼這個包裝就可以被想像成Block Formatting Context。怎樣才能形成Block Formatting Context當一個HTML元素滿足下面條件的任何一點,都可以產生Block Formatting Context•float的值不為none。•overflow的值不為visible。•display的值為table-cell, table-caption, inline-block中的任何一個。•position的值不為relative和static。

4. bfc的區域不會與float的元素區域重疊是什麼意思

BFC的生成

既然上文提到BFC是一塊渲染區域,那這塊渲染區域到底在哪,它又是有多大,這些由生成BFC的元素決定,CSS2.1中規定滿足下列CSS聲明之一的元素便會生成BFC。
根元素
float的值不為none
overflow的值不為visible
display的值為inline-block、table-cell、table-caption
position的值為absolute或fixed
看到有道友文章中把display:table也認為可以生成BFC,其實這里的主要原因在於Table會默認生成一個匿名的table-cell,正是這個匿名的table-ccell生成了BFC

BFC的約束規則
瀏覽器對於BFC這塊區域的約束規則如下:
生成BFC元素的子元素會一個接一個的放置。垂直方向上他們的起點是一個包含塊的頂部,兩個相鄰子元素之間的垂直距離取決於元素的margin特性。在BFC中相鄰的塊級元素外邊距會折疊。
生成BFC元素的子元素中,每一個子元素做外邊距與包含塊的左邊界相接觸,(對於從右到左的格式化,右外邊距接觸右邊界),即使浮動元素也是如此(盡管子元素的內容區域會由於浮動而壓縮),除非這個子元素也創建了一個新的BFC(如它自身也是一個浮動元素)。
有道友對它做了分解,我們直接拿來:
內部的Box會在垂直方向上一個接一個的放置
垂直方向上的距離由margin決定。(完整的說法是:屬於同一個BFC的兩個相鄰Box的margin會發生重疊,與方向無關。)
每個元素的左外邊距與包含塊的左邊界相接觸(從左向右),即使浮動元素也是如此。(這說明BFC中子元素不會超出他的包含塊,而position為absolute的元素可以超出他的包含塊邊界)
BFC的區域不會與float的元素區域重疊
計算BFC的高度時,浮動子元素也參與計算
BFC就是頁面上的一個隔離的獨立容器,容器裡面的子元素不會影響到外面元素,反之亦然
看到以上的幾條約束,讓我想起學習css時的幾條規則
Block元素會擴展到與父元素同寬,所以block元素會垂直排列

5. web前端開發都包括哪些技術

1、學會HTML

HTML是網頁內容的載體內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息,可以包含文字、圖片、視頻等。要熟練掌握div、table、ul li 、p、span等這些標簽,這些都是最常用的。

2、學習CSS(Cascading Style Sheets)—樣式。

一般看到web前端開發工程師的要求裡面,有一個會使用css+html 或者 css+div 來進行界面布局,所以css是用於輔助html來布局和展示的,

稱之為「css樣式」,CSS要熟練掌握float、position、width、height,以及對於的最大最小、會使用百分百、overflow、margin、padding,標題字體、顏色變化,或為標題加入背景圖片、邊框等等,這些都是跟布局有關系的樣式,必須要掌握的。

3、JS(java)—— 行為

java是用來實現網頁上的特效效果。如:滑鼠滑過彈出下拉菜單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞(新聞圖片)的輪換。可以這么理解,有動畫的,有交互的一般都是用Java來實現的。

4、學習jquery

jquery是相當於把js封裝了一套的一個js插件,目的就是操作起來更方便,代碼寫的更少,jquery入門也很簡單,那些是入門需要學的和js一樣,只是換成了jq的代碼.其他的一樣網路就夠了。

5、最好會點後台語言,比如java、php,因為前台界面的數據都是從後台來的,如果會點後台代碼,就知道怎麼跟後台交互數據是最好的, 這樣節約時間,也可以讓前端代碼更規范.不然可能因為你的寫法和後端給來的數據不能結合上,那麼前端代碼又得重新寫,那就更麻煩了。

6. 簡述下什麼是bfc,觸發bfc的條件有哪些

一、BFC的概念

1.規范解釋

塊格式化上下文(Block Formatting Context,BFC)是Web頁面的可視化CSS渲染的一部分,是布局過程中生成塊級盒子的區域,也是浮動元素與其他元素的交互限定區域。

2.通俗理解

  • BFC是一個獨立的布局環境,可以理解為一個容器,在這個容器中按照一定規則進行物品擺放,並且不會影響其它環境中的物品。

  • 如果一個元素符合觸發BFC的條件,則BFC中的元素布局不受外部影響。

  • 浮動元素會創建BFC,則浮動元素內部子元素主要受該浮動元素影響,所以兩個浮動元素之間是互不影響的。

閱讀全文:前端面試題-BFC(塊格式化上下文)

7. 前端面試題 什麼是BCF

如果你的水平沒有問題的話,那麼可能是病人在某一方面不了解,你可以給她講解。還用可能是患者心情不好吧。

8. 最近遇到前端面試題,css方面,BFC的表現有哪些

讓你面試狠狠我這可以說一下,如果不知道的話,可以請一下老師可以告訴你一下

9. css布局中,什麼是BFC

BFC是什麼?

資料來源:小程序 - 決勝前端

裡面有幾百道面試題~正好在裡面刷題~~~

10. web前端配置文件的格式有哪些

*.pif為DOS環境下的可執行文件在Windows下執行時所需要的文件格式★常見的文件後綴名.ACA:Microsoft的代理使用的角色文檔.acf:系統管理配置.acm:音頻壓縮管理驅動程序,為Windows系統提供各種聲音格式的編碼和解碼功能.aif:聲音文件,支持壓縮,可以使用WindowsMediaPlayer和QuickTimePlayer播放.AIF:音頻文件,使用WindowsMediaPlayer播放.AIFC:音頻文件,使用WindowsMediaPlayer播放.AIFF:音頻文件,使用WindowsMediaPlayer播放.ani:動畫游標文件擴展名,例如動畫沙漏。.ans:ASCII字元圖形動畫文件.arc:一種較早的壓縮文件,可以使用WinZip,WinRAR,PKARC等軟體打開.arj:壓縮文件。可以使用WinZip,WinRAR,PKARC等軟體打開.asf:微軟的媒體播放器支持的視頻流,可以使用WindowsMediaPlayer播放.asp:微軟的視頻流文件,可以使用WindowsMediaPlayer打開.asp:微軟提出的ActiveServerPage,是伺服器端腳本,常用於大型網站開發,支持資料庫連接,類似PHP。可以使用VisualInterDev編寫,是目前的大熱門.asx:WindowsMedia媒體文件的快捷方式.au:是Internet中常用的聲音文件格式,多由Sun工作站創建,可使用軟體WaveformHoldandModify播放。NetscapeNavigator中的LiveAudio也可以播放.au文件.avi:一種使用MicrosoftRIFF規范的Windows多媒體文件格式,用於存儲聲音和移動的圖片.bak:備份文件,一般是被自動或是通過命令創建的輔助文件,它包含某個文件的最近一個版本,並且具有於該文件相同的文件名.basBasic:語言源程序文件,可編譯成可執行文件,目前使用Basic開發系統的是VisualBasic.bat:批處理文件,在MS-DOS中,.bat文件是可執行文件,有一系列命令構成,其中可以包含對其他程序的調用.bbs:電子告示板系統文章信息文件.bfc:Windows的公文包文件.bin:二進制文件,其用途依系統或應用而定.bmp:Bitmap點陣圖文件,這是微軟公司開發Paint的自身格式,可以被多種Windows和WindowsNT平台及許多應用程序支持,支持32位顏色,用於為Windows界面創建圖標的資源文件格式。.c:C語言源程序文件,在C語言編譯程序下編譯使用.cab:Microsoft制訂的壓縮包格式,常用於軟體的安裝程序,使用Windows自帶的實用程序,Extract.exe可以對其解壓縮,WinZip,WinRAR等都支持這種格式.cal:Windows中的日歷文件.cdf:InternetExplorer的頻道文件.cdr:CorelDraw中的一種圖形文件格式,它是所有CorelDraw應用程序中均能夠使用的一種圖形圖像文件格式.cdx:索引文件,存在於Dbase,Foxbase,Foxpro系統軟體環境下.cfg:配置文件,系統或應用軟體用於進行配置自己功能,特性的文件.chm:編譯過後的HTML文件,常用於製作幫助文件和電子文檔.clp:在Windows下剪貼板中的文件格式.cmd:用於WindowsNT/2000的批處理文件,其實與BAT文件功能相同,只是為了與DOS/Windows9x下的BAT有所區別.cmf:音效卡標準的音樂文件,FM合成器等可以回放.cnf:NetMeetting會議連接文件.cnt:聯機幫助文件目錄索引文件,通常和同名的.hlp文件一起保存.col:由AutodeskAnimator,AutodeskAnimatorPor等程序創建的一種調色板文件格式,其中存儲的是調色板中各種項目的RGB值.com:DOS可執行命令文件,一般小於64KB.cpl:控制面板擴展文件,Windows操作系統使用.cpp:C++語言源程序,非常強大的語言,在各種平台中都有相應的開發系統.crd:Windows中的卡片文件.crt:用於安全方面的證書認證文件.cur:Windows下的游標資源文件格式,可用游標編輯軟體編輯.css:Text/css文件.dat:數據文件,在應用程序中使用.dat:VCD中的圖象聲音文件,VCD播放軟體可調用,或是通過VCD機播放.dbf:資料庫文件,Foxbase,Dbase,VisualFoxPro,等資料庫處理系統所產生的資料庫文件.dcx:傳真瀏覽文檔文件.ddi:映象文件,DUP,HD,IMG等工具可.dev:設備驅動程序.dib:設備無關點陣圖文件,這是一種文件格式,其目的是為了保證用某個應用程序創建的點陣圖圖形可以被其它應用程序裝載或顯示一樣.dir:目錄文件.dll:Windows動態連接庫,幾乎無處不在,但有時由於不同版本DLL沖突會造成敗各種各樣的問踢.doc:是目前市場佔有率最高的公室軟體MicrosoftOffice中的字處理軟體Word創建的文檔.dos:Windows保留的MS-DOS的某些系統文件.dot:MicrosoftWord的文檔模板文件,通過模板可以簡化一些常用格式文檔的創建工作,而且可以內嵌VBA程序來實現某些自動化功能.drv:設備驅動程序文件,用在各種系統中.dwg:AutoCAD的圖紙文件,也是許多繪圖軟體都支持的格式,常用於共享數據.dxb:AutoCAD創建的一中圖形文件格式.dxf:圖形交換格式,一種計算機輔助設計的文件格式,最初開發用來與AutoCAD一起使用,以便於圖形文件在應用程序之間的傳遞,它以ASCII方式儲存圖形,在表現圖形的大小方面十分精確.der:Certiticate文件.dic:Txt文件.emf:由Microsoft公司開發的Windows32位擴展圖元文件格式,其總體設計目標是要彌補在MicrosoftWindows3.1(Win16)中用的*.wmf文件格式的不足,使得圖元文件更加易於使用.eps:用PostScript語言描述的一種圖形文件格式,以文本文件保存,在PostScript圖形列印機上能列印出高品質的圖形圖象,最高能表示32點陣圖形圖象.err:編譯錯誤文件,存在於Dbase,Foxbase,Foxpro系列軟體環境下.exe:可執行文件,雖然後綴名相同,但具有不同的格式和版本.exp:3DS使用的顯示卡驅動程序.exc:Txt文件.flc:AutodeskAnimator和Animatorpro的動畫文件,支持256色,最大的圖象象索是64000*64000,支持壓縮,廣泛用於動畫圖形中的動畫序列,計算機輔助設計和計算機游戲應用程序.fnd:保存的搜索結果.fon:點陣字型檔文件.for:Fortran語言程序.fot:指向字體的快捷鍵.fp:配置文件,存在於Dbase,Foxbase,Foxpro系列軟體的環境下.fpt:備注欄位文件,存在於Dbase,Foxbase,Foxpro系列軟體的環境下.frt:報表文件,存在於Dbase,Foxbase,Foxpro系列軟體的環境下.frx:報表文件,存在於Dbase,Foxbase,Foxpro系列軟體的環境下.fxp:編譯後的程序,存在於Dbase,Foxbase,Foxpro系列軟體的環境下.gif:在各種平台的各種圖形處理軟體上均能夠處理的,經過壓縮的一種圖形文件格式.grh:方正公司的圖象排版文件.grp:Windows下的程序管理器產生的組窗口文件.goc:Gocserve.gra:MSGraph.Chart.5.h:C語言源程序頭文件.hlp:Windows應用程序幫助文件.hqx:Macintosh中使用BinHex將二進制文件編碼為7位的文本文件,大多數Macintosh文件皆以.hqx出現(.bin極少使用),在Macintosh中,可使用StuffItExpander對.hqx解碼,在Windows中可使用BinHex13解碼.ht:超級終端.htm:保存超文本描述語言的文本文件,用於描述各種各樣的網頁,使用各種瀏覽器打開.html:同.htm文件.icm:圖象配色描述文件.ico:Windows中的圖標文件,可以包含同一個圖標的多種格式,使用圖標編輯軟體創建.idf:MIDI樂器定義.idx:索引文件,存在於Dbase,Foxbase,Foxpro系列軟體的環境下.iff:文件交換格式文件,這種文件格式多用於Amiga平台,在這種平台上它幾乎可以存儲各種類型的數據,在其它平台上,IFF文件格式多用於存儲圖象和聲音文件.image:MAcintosh磁碟映象文件,常見於萍果機的FTP網點,在Macintosh中由ShrinkWrap處理.ime:Windows下的輸入法文件.img:磁碟映象文件,用HD-COPY,WinImage等工具打開後可以恢復到一張磁碟上.inc:匯編語言包含文件,類似C/C++中的.H文件.inf:Windows下的軟體安裝信息,Windows的標准安裝程序根據此文件內的安裝信息對軟體,驅動程序等進行安裝.ini:Windows中的初始化信息文件,已經用的不多了,新的應用程序將設置保存在系統的注冊表中.jar:一種壓縮文件,ARJ的新版本,不過不太流行,可以使用WinJar,Winrar等打開.jpeg:一種圖片壓縮文件,同.jpg.jpg:靜態圖象專家組制訂的靜態圖象壓縮標准,具有很高的壓縮比,使用非常廣泛,可使用PhotoShop等圖象處理軟體創建.lnk:快捷方式,這個文件指向另一個文件,開始菜單的程序文件夾下每條項目都是一個LNK文件.log:日誌文件,通常用來記錄一些事件之類.lzh:一種古老的壓縮文件,可以使用WinRAR打開.mac:Macintosh中使用的一中灰度圖形文件格式,在MacintoshPaintbrush中使用,其解析度只能是720*567.mag:圖形文件格式.mdb:MicrosoftAccess使用的資料庫格式,是非常流行的桌面資料庫.men:內存應用文件,存在於Dbase,Foxbase,Foxpro系列軟體的環境下.mid:音頻壓縮文件,曾經非常流行,不過在現在的軟體中用的很少了rle:一種壓縮過的點陣圖文件格式,RLE壓縮方案是一種極其成熟的壓縮方案,特點是無損失壓縮,既節省了磁碟空間又不損失任何圖像數據,但在打開這種壓縮文件時,要花費時間,此外,一些兼容性不太好的應用程序可能會搭不開.rm:Windows下的RealPlayer所支持的視頻壓縮文件,網上非常流行的流式視頻文件,很多實時視頻新聞等都是採用這種格式的,不過,最新的WindowsMediaVideoV8已經對其發起了強大的攻勢.rmi:MIDI音序文件.rtf:豐富文本格式文件,以純文本描述內容,能夠保存各種格式信息,可以用寫字版,Word等創建.sav:存檔文件.scp:用於Windows系統中Internet撥號用戶,自動撥號登錄用的腳本文件,可避免手動登錄時繁瑣的鍵盤輸入.scr:屏障保護文件.sct:屏幕文件.scx:屏幕文件.set:Microsoft備份集文件,用於保存要備份的內容,設置等信息.shb:指向一個文檔的快捷方式.snd:Mac聲音文件,Apple計算機公司開發的聲音文件格式,被Macintosh平台和多種Macintosh應用程序所支持,支持某些壓縮.sql:查詢文件,在Dbase,Foxbase,Foxpro系列軟體的環境下使用.svg:SVG可以算是目前最火熱的圖像文件格式了,它是基於XML由WorldWideWebConsortium聯盟開發的,SVG是可縮放的矢量圖形.svx:Amiga聲音文件,Commodore所開發的聲音文件格式,被Amiga平台和應用程序所支持,不支持壓縮.swf:flash是Micromedia公司的產品,嚴格說它是一種動畫編輯軟體,實際上它是製作出一種後綴名為.swf的動畫,這種格式的動畫能用比較小的體積來表現豐富的多媒體形式,並且還可以與HTML文件達到一種"水乳交融"的境界.swg:虛擬內存交換文件,由操作系統使用.sys:系統文件,驅動程序等,在不同的操作系統中有不同的定義