成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CCS 盒模型分析

Jochen / 2106人閱讀

摘要：基本概念頁面中的每個(gè)元素都可以看成一個(gè)盒子，盒子里面可以裝其他盒子，層層嵌套。標(biāo)簽就是最外面的大盒子。每個(gè)盒子由內(nèi)向外分別是。分類盒模型有兩種，標(biāo)準(zhǔn)盒模型和盒模型。

基本概念

頁面中的每個(gè)元素都可以看成一個(gè)盒子，盒子里面可以裝其他盒子，層層嵌套。html 標(biāo)簽就是最外面的大盒子。每個(gè)盒子由內(nèi)向外分別是 content, padding, border, margin 。

分類

盒模型有兩種，標(biāo)準(zhǔn)盒模型 和 IE盒模型 。主要區(qū)別是它們的 width 和 height 不同

標(biāo)準(zhǔn)盒模型

盒子寬高是 content(內(nèi)容) 的寬高

IE盒模型

盒子寬高是 border + padding + content 的寬高

瀏覽器默認(rèn)使用標(biāo)準(zhǔn)盒模型，在 ie8+ 中 可以通過設(shè)置 box-sizing 樣式屬性改變盒模型


box-sizing:

content-box ---> 標(biāo)準(zhǔn)盒模型（默認(rèn)）

border-box ---> IE 盒模型

通過js獲取盒子寬高 
以下 domElement 是表示 HTML 元素的偽代碼

domElement.style.width/height

只能獲取內(nèi)聯(lián)樣式中的寬高

domElement.currentStyle.width/height

獲取的是瀏覽中渲染完成后元素的寬高，只有 IE 瀏覽器支持

window.getComputedStyle(domElement).width/height

和方式2一樣，但可以兼容更多瀏覽器

domElement.offsetWidth/offsetHeight

不管使用的什么盒模型，獲取的都是 IE盒模型 的寬高
外邊距折疊問題 
相鄰元素在豎直方向上的外邊距在相遇時(shí)會(huì)發(fā)生合并，合并后的外邊距的高度等于兩個(gè)外邊距中較大的那個(gè)值。
兄弟元素間

父子元素間

外邊距折疊解決方案（BFC） 
Block Formatting Context （塊級(jí)格式化上下文）

BFC 可以簡單地理解為某個(gè)元素的一個(gè) CSS 屬性，只不過這個(gè)屬性不能被開發(fā)者顯式的修改，擁有這個(gè)屬性的元素對(duì)內(nèi)部元素和外部元素會(huì)表現(xiàn)出一些特性，這就是BFC。

怎樣讓元素創(chuàng)建 BFC

float 的值不為 none （浮動(dòng)元素）

overflow 的值不為 visible

display 的值為 inline-block 、table-caption 、 table-cell 、flex 、inline-flex

positon 的值為 absolute 或 fixed

(根元素)

BFC 的布局規(guī)則

內(nèi)部的 box 會(huì)在垂直方向上一個(gè)接一個(gè)地放置 （平時(shí)說的塊級(jí)元素一行行放）

box 間垂直方向的距離由 margin 決定 。同一個(gè)BFC中的兩個(gè)相鄰的 box 還是會(huì)產(chǎn)生外邊距重疊問題

BFC 的區(qū)域不會(huì)與 浮動(dòng)的 box 重疊

BFC 是一個(gè)獨(dú)立的容器，里面的元素不會(huì)影響外面的元素，反之亦然。

包含浮動(dòng)元素，計(jì)算 BFC 的高度時(shí)，浮動(dòng)的元素也會(huì)參與計(jì)算

BFC 的應(yīng)用場(chǎng)景

分屬于不同 BFC 的元素可以防止垂直外邊距折疊

清除內(nèi)部浮動(dòng)（使浮動(dòng)元素可以撐起父盒子）

自適應(yīng)兩欄布局（BFC 區(qū)域不會(huì)與浮動(dòng)元素重疊）

防止元素被浮動(dòng)元素覆蓋

float + BFC 兩欄布局:


    
left

    
right

閱讀原文


參考文章：
關(guān)于CSS-BFC深入理解
css 盒子模型理解

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

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

相關(guān)文章

  • CCS 盒模型分析

    摘要：基本概念頁面中的每個(gè)元素都可以看成一個(gè)盒子，盒子里面可以裝其他盒子，層層嵌套。標(biāo)簽就是最外面的大盒子。每個(gè)盒子由內(nèi)向外分別是。分類盒模型有兩種，標(biāo)準(zhǔn)盒模型和盒模型。 基本概念 頁面中的每個(gè)元素都可以看成一個(gè)盒子，盒子里面可以裝其他盒子，層層嵌套。html 標(biāo)簽就是最外面的大盒子。每個(gè)盒子由內(nèi)向外分別是 content, padding, border, margin 。 showImg...

    trigkit4 評(píng)論0 收藏0

  • Html知識(shí)點(diǎn)

    摘要：和的區(qū)別表示只讀，只能用于文本框，不能修改內(nèi)容，它的值可以隨表單提交給服務(wù)器表示該元素不可用，不響應(yīng)事件，不能修改內(nèi)容。同時(shí)不響應(yīng)事件。通配選擇器屬性為的元素中，所有的子元素均采用該樣式。表示按照格式規(guī)則正常定位。1、企業(yè)應(yīng)用計(jì)算模式主要有：CS模式（客戶端/服務(wù)器）和BS模式（瀏覽器/服務(wù)器模式） 2、html:超文本標(biāo)記語言。以標(biāo)記和子標(biāo)記描述網(wǎng)頁元素?！　ttp：超文本傳輸協(xié)議。 3...

    番茄西紅柿 評(píng)論0 收藏0

  • 盒模型/行內(nèi)框盒子模型及l(fā)ine-height/vertal-align取值分析

    摘要：標(biāo)準(zhǔn)盒模型下，設(shè)置的的值后，這個(gè)值僅包含的寬高，而在盒模型下，這個(gè)值是后的寬高。例標(biāo)準(zhǔn)盒模型下，占據(jù)的實(shí)際寬為實(shí)際高度同理。對(duì)齊所處行內(nèi)框盒子的頂部對(duì)齊所處行內(nèi)框盒子的底部。 盒模型 盒模型之所以稱為盒是因?yàn)樵谝粋€(gè)頁面布局中，文檔中的每一個(gè)元素（塊級(jí)元素）均呈現(xiàn)為一個(gè)矩形的盒子，這個(gè)盒子包含：內(nèi)容（content） + 內(nèi)邊距（padding） + 邊框（border） + 外邊距（p...

    jackwang 評(píng)論0 收藏0

  • 盒模型/行內(nèi)框盒子模型及l(fā)ine-height/vertal-align取值分析

    摘要：標(biāo)準(zhǔn)盒模型下，設(shè)置的的值后，這個(gè)值僅包含的寬高，而在盒模型下，這個(gè)值是后的寬高。例標(biāo)準(zhǔn)盒模型下，占據(jù)的實(shí)際寬為實(shí)際高度同理。對(duì)齊所處行內(nèi)框盒子的頂部對(duì)齊所處行內(nèi)框盒子的底部。 盒模型 盒模型之所以稱為盒是因?yàn)樵谝粋€(gè)頁面布局中，文檔中的每一個(gè)元素（塊級(jí)元素）均呈現(xiàn)為一個(gè)矩形的盒子，這個(gè)盒子包含：內(nèi)容（content） + 內(nèi)邊距（padding） + 邊框（border） + 外邊距（p...

    MAX_zuo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<