|
導讀網(wǎng)頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網(wǎng)關接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標記語言是萬維網(wǎng)(Web)編程的基礎,也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網(wǎng)關接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標記語言是萬維網(wǎng)(Web)編程的基礎,也就是說萬維網(wǎng)是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家分享的內容是關于盒模型以及BFC,有需要的朋友可以參考一下,希望可以幫助到有需要的朋友標準盒模型與IE盒模型開發(fā)者們都知道,由于歷史遺留問題與既定標準的發(fā)展,存在著兩個css盒模型。即W3C的標準盒模型以及IE的怪異盒模型。在css中,可以用box-sizing去定義元素的盒模型。 比較這兩個盒模型的差異之前,我們先來看一張圖:
先不討論寬高,我們把一個元素的組成分為:content、padding、border、margin。 標準盒模型(box-sizing: content-box),即W3C標準中默認的盒模型。它規(guī)定,一個元素的寬高并不包含padding和border,那么它在渲染時的寬高計算公式如下: width = content width; height = content height; IE盒模型(box-sizing: border-box),則恰恰相反,它的寬高實際上是包含padding和border的,所以 width = content width + padding + border; height = content height + padding + border;
至此,兩種盒模型的區(qū)別應該挺明白的了吧。接下來我們講講有關BFC的東西。 什么是BFCBFC,即 Block Formatting Context 直譯為 “塊級格式化上下文”。MDN上的定義為: A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with other elements. 其是Web頁面的可視化CSS渲染的一部分,是布局過程中生成塊級盒子的區(qū)域,也是浮動元素與其他元素的交互限定區(qū)域 深入了解 BFC 之前,我們看看,什么是 “外邊距重疊”。 外邊距重疊(Collapsing margins),指的是毗鄰的兩個或多個外邊距 (包括父子元素) 會合并成一個外邊距。其中所說的 margin 毗鄰,可以歸結為以下兩點:
BFC原理
因此,我們常常通過建立BFC來防止外邊距重疊的發(fā)生。 建立BFC通過以下方式可以使元素成為一個BFC:
BFC其他應用場景1、由于BFC在計算高度時,其所包含的所有元素,包括浮動元素都是參與計算的。所以甚至可以使用BFC來達到清除浮動的效果。
創(chuàng)建BFC之后:
2、由于BFC與float元素是不會發(fā)生重疊的,根據(jù)這個特性,可以做到自適應兩欄布局。由于左邊元素浮動,造成右邊元素的背景沾滿了整個容器。
將右邊元素改成BFC之后:
以上就是盒模型與BFC的深入講解的詳細內容,更多請關注php中文網(wǎng)其它相關文章! 網(wǎng)站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!