国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC

Edison / 2963人閱讀

摘要：并且這種過程遵循標準的描述只要不是和絕對定位方式布局的，都在普通流里面。定位相對定位在普通流之中，是相對于它在普通流中的位置中進行移動，元素占據原來位置絕對定位脫離普通流，不占據空間相對于距離它最近的那個已定位的祖先相對絕對元素決定的。

視覺格式化模型

頁面(文檔樹)可以想象成是由一個個的Box組合而成的，而視覺格式化模型(Visual formatting model)是一套規則，將這些框布局成訪問者看到的樣子。

哪些因素控制了這些布局 
    1. 盒的尺寸和類型
    2. 定位體系 Positioning Scheme （常規流，浮動和絕對定位）
    3. 文檔樹中元素之間的關系
    4. 外部信息（如：視口大小，圖片的固有尺寸等）

下文講針對性的解釋這些影響布局的因素，先來解釋些概念~

元素框 
css假設每個元素都會生成一個或者多個Box，稱為元素框，元素框中心有內容區，內容區外周圍包括了padding，border，margin，盒模型就是用來處理這些內容的一個模型
包含塊 
每個元素都是相對于包含塊擺放，包含塊就是一個元素的“布局上下文”,

    
p的包含塊是div

    //div的包含塊是body
替換/非替換元素 
替換元素就是瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。
通過 CSS content 屬性來插入的對象 被稱作?匿名可替換元素
如果元素的內容包含在文檔之中，則為非替換元素
非替換元素的所有規則同樣適用于替換元素，只有一個例外，width如果是auto,元素的高寬就是內容的固有高寬，比如img就是圖片的原始大

例如瀏覽器會根據

瀏覽器會根據元素的標簽類型和屬性來顯示這些元素。可替換元素也在其顯示中生成了框。

CSS Box(盒模型/框模型) 
CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式，我們常見的盒模型大致有兩種，一種是塊級的盒子（Block Box），一種是行級的盒子（Line Box）

詳細盒子的規則見下篇想要清晰的明白（二）CSS 盒模型Block box與Line box，但是我們至少可以知道盒子模型，在整個視覺模型中做到的是一個什么角色，盒子模型是處理盒子本身內部屬性，像比如邊距，邊框的，而視覺格式化模型是來處理這些盒子擺放的

Block Box 
display ： block 、 list-item 以及 table 會讓一個元素成為塊級元素。
Line Box 
每一行稱為一條Line Box，它又是由這一行的許多inline-box組成
display：inline會讓一個元素稱為行內元素
inline-block 
將對象呈現為inline對象，但是對象的內容作為block對象呈現。之后的內聯對象會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
Formatting context 
每個元素，或者說每個Box會根據設置的display值，去選擇渲染它的方式，不同的display有不同層級：block-level box（塊級）inline-level box(行級)，run-in box(插入型框 css3)，不同的層級會參與不同的環境（formatting context）去渲染

上文提到的環境就是這個Formatting context（格式化上下文），他是一個有渲染規則的渲染區域，不同的層級有不同的渲染規則，比如BFC和IFC

BFC 什么是BFC

塊級格式化上下文，Block formatting context(簡稱BFC)，規定了塊級盒子的渲染布局方式，他在計算盒子高度，margin值計算等地方有區別于其他環境。

BFC有什么特點 
內部盒子會在垂直方向排列


同一個BFC中的元素可能會發生margin collapse；


BFC就是頁面上的一個隔離的獨立容器，里外互相不影響


計算BFC的高度時，考慮BFC所包含的所有子元素，連浮動元素也參與計算；


當元素不是BFC的子元素的時候，浮動元素高度不參與BFC計算（既是常見的盒子塌陷問題）
什么元素會觸發產生一個新的BFC 
根元素 


float屬性不為none


position為absolute或fixed


display為inline-block, table-cell, table-caption, flex, inline-flex


overflow不為visible
再認真理解下這張圖


我們可以用BFC來干嘛

清除浮動

阻止邊距折疊

用于布局，什么兩欄自適應高度之類的

BFC兼容性

IE6-7不支持BFC，而是使用私有屬性hasLayout。表現上來看hasLayout和BFC相似，觸發hasLayout條件與BFC相似，另外需要為元素設置IE特有的CSS屬性zoom:1; zoom用于設置或檢索元素的縮放比例，值為1即使用元素實際尺寸，使用zoom既可以觸發hasLayout又不會對元素產生其他影響，相對來說更加方便

CSS定位方案 
css布局宏觀上來說是受定位方案影響，定位方案包括普通流，浮動，定位
普通流 
元素按照其在 HTML 中的位置順序決定排布的過程。并且這種過程遵循標準的描述
只要不是float和絕對定位方式布局的，都在普通流里面。
浮動 
浮動框不在文檔的普通流中，浮動的流會漂浮在普通的流上面。
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
定位 
 1. 相對定位在普通流之中，是相對于它在普通流中的位置中進行移動，元素占據原來位置
 2. 絕對定位脫離普通流，不占據空間相對于距離它最近的那個已定位的祖先(相對/絕對)元素決定的。
 3. 固定定位，相對于瀏覽器窗口定位，脫離普通流，不占據空間
 
 剩下的下篇見！！！(*￣3￣)╭
參考資料

caopen.net

CSS三種基本定位機制

css之BFC詳解

inline-boxd的前世今生

《CSS.The.Definitive.Guide》

CSS float浮動的深入研究、詳解及拓展

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115233.html

相關文章

  • 想要清晰的明白（二）CSS 盒模型Block box與Line box

    摘要：垂直格式化，有一個很重要的方面是會造成垂直相鄰外邊距合并，解決這個的方式見想要清晰的明白一中的部分。參考資料權威指南第三版為負值產生的影響和常見布局應用布局圣杯布局雙飛翼布局深入理解和的基友關系深入理解中的行高 在上一篇想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC比較宏觀的了解了盒子模型的作用，接下來就詳細的介紹兩種盒子的具體細節 Block Box show...

    Vicky 評論0 收藏0

  • CSS中各種布局的背后(*FC)

    摘要：中各種布局的背后，實質上是各種的組合。相反，一些塊容器盒，比如非替換行內塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內格式化上下文產生的盒，用于表示一行。彈性容器外和彈性項目內的一切元素都不受影響。 CSS中各種布局的背后，實質上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。 盒模型(Box M...

    miracledan 評論0 收藏0

  • 視覺格式化模型之BFC

    摘要：詳見權威指南塊級元素即塊級元素是源文檔中被格式化為塊的元素，或者屬性為的元素。概念顧名思義塊級格式化上下文。每個元素的的左邊，與包含塊的左邊相接觸對于從左往右的格式化，否則相反。 情景：浮動的高度塌陷時，使用overflow：hidden可使父元素將浮動的子元素包含起來，解決問題。但背后的原理是什么？這就是今天要談的BFC。 在將BFC之前需要先了解幾個概念： 盒子模型（Box mo...

    anyway 評論0 收藏0

  • 前端進階之什么是BFC？BFC的原理是什么？如何創建BFC？

    摘要：官方說法就是它規定了用戶端在媒介中如何處理文檔樹。是的包含塊，同時又是的包含塊，不是絕對的。因此稱為匿名盒子。行內盒子行內級元素會生成行內級盒子，該盒子同時會參與行內格式化上下文的創建。如果只有一個值指定為，則其使用的值來自相等。 作者：陳大魚頭 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...

    lowett 評論0 收藏0

  • BFC，包含塊，文檔流，浮動，定位是個啥關系---CSS視覺格式化模型

    摘要：視覺格式化模型瀏覽器在解析渲染我們所寫的內容，順序渲染普通文檔流。渲染結果如下圖這兒有一個知識點文檔流按我的理解就是在瀏覽器渲染顯示的一個模式，這個模式的特點自上而下，從左到右排列規則。如果不特殊指定，瀏覽器會默認當前的渲染是按文檔流模式。 CSS視覺格式化模型 瀏覽器在解析渲染我們所寫的html內容，順序渲染（普通文檔流）。 1 2 3 4 ...

    huashiou 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<