摘要:盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中,每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型
css盒模型與BFC
本文為收集整理總結(jié)網(wǎng)上資源
旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc
節(jié)省復(fù)習(xí)時(shí)間
閱讀10分鐘
什么是盒模型每一個(gè)文檔中,每個(gè)元素都被表示為一個(gè)矩形的盒子,它都會(huì)具有內(nèi)容區(qū)、padding、border、margin
.png)
盒模型主要分兩種標(biāo)準(zhǔn)盒模型
IE盒模型(怪異盒模型)
兩者的區(qū)別:
標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高
IE盒模型則寬高為 border + padding + 內(nèi)容區(qū)
如何切換盒子模型?使用box-sizing來進(jìn)行切換
border-box 切換為IE盒模型
content-box 默認(rèn)屬性 為標(biāo)準(zhǔn)模式
盒模型的邊距重疊主要分三種重疊, 重疊規(guī)則:一大一小取最大,一正一負(fù)取和
相鄰元素之間的重疊
父子嵌套的重疊
空的塊級元素
1.相鄰元素之間// css * { margin:0; padding:0; border:0; } #d1 { width:100px; height:100px; margin-top:20px; margin-bottom:20px; background-color:red; } #d2 { width:100px; height:100px; margin-top:10px; background-color:blue; } // html2.父子嵌套重疊
// css * { margin:0; padding:0; border:0; } #outer { width:300px; height:300px; background-color:red; margin-top:20px; } #inner { width:50px; height:50px; background-color:blue; margin-top:10px; } // html3.空的塊級元素 BFC (邊距重疊處理方案) 什么是BFC
塊格式化上下文(Block Formatting Context,BFC) 是Web頁面的可視化CSS渲染的一部分,是布局過程中生成塊級盒子的區(qū)域,也是浮動(dòng)元素與其他元素的交互限定區(qū)域。塊級盒
每個(gè)塊級盒子都會(huì)參與塊格式化上下文(block formatting context)的創(chuàng)建,而每個(gè)塊級元素都會(huì)至少生成一個(gè)塊級盒子,即主塊級盒子(principal block-level box)
有時(shí)候定義了一個(gè)塊級元素,設(shè)置了寬高雖然占據(jù)一行在chrome下會(huì)發(fā)現(xiàn)除了元素以外的一個(gè)包裹盒子像margin一樣的顏色,這個(gè)就是塊級盒;
每一個(gè)塊級元素會(huì)生成一個(gè)
塊級盒子的幾種特性塊級盒會(huì)在垂直方向,一個(gè)接一個(gè)地放置,每個(gè)盒子水平占滿整個(gè)容器空間
塊級盒的垂直方向距離由上下 margin 決定,同屬于一個(gè) BFC 中的兩個(gè)或以上塊級盒的相接的 margin 會(huì)發(fā)生重疊
BFC 就是頁面上的一個(gè)隔離的獨(dú)立容器,容器里面的子元素不會(huì)影響到外面的元素。
計(jì)算 BFC 的高度時(shí),浮動(dòng)元素也參與計(jì)算
如何創(chuàng)建BFC?根元素或包含根元素的元素
浮動(dòng)元素(元素的 float 不是 none)
絕對定位元素(元素的 position 為 absolute 或 fixed)
overflow 值不為 visible 的塊元素
display的值為inline-block、table-cell、table-caption
BFC的應(yīng)用?清除浮動(dòng)
布局
解決塊級盒邊距重疊
原理就是觸發(fā)BFC重新計(jì)算元素尺寸
// html開始清除浮動(dòng)清除浮動(dòng)清除浮動(dòng)....
// css *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: green; float: left; } p{ background: #f0faa5; overflow: hidden; }
// html//css *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: green; float: left; } .div2{ background: red; } .divwrap{ border:3px solid #000; overflow: hidden; } float1float2
// html最后hello world
hello world
hello world
// css *{ margin: 0; padding: 0; } .BFC{ overflow:hidden; } p{ color:black; background:#D499B9; line-height:100px; width:200px; text-align:center; margin:50px; }
最后感謝每個(gè)閱讀的小伙伴與所有寫博客分享的人參考資料
MDN-CSS盒模型
MDN-外邊距合并
w3school-外邊距重疊
MDN-視覺格式化模型
MDN-塊格式化上下文
芋頭君-CSS之BFC詳解
OBKoro1-布局概念 關(guān)于CSS-BFC深入理解
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/116802.html
摘要:盒模型與本文為收集整理總結(jié)網(wǎng)上資源旨在系統(tǒng)復(fù)習(xí)盒模型與節(jié)省復(fù)習(xí)時(shí)間閱讀分鐘什么是盒模型每一個(gè)文檔中,每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(nèi)容區(qū)盒模型主要分兩種標(biāo)準(zhǔn)盒模型盒模型怪異盒模型兩者的區(qū)別標(biāo)準(zhǔn)盒模型的寬高則為內(nèi)容區(qū)域的寬高盒模型 css盒模型與BFC 本文為收集整理總結(jié)網(wǎng)上資源 旨在系統(tǒng)復(fù)習(xí)css盒模型與bfc 節(jié)省復(fù)習(xí)時(shí)間 閱讀10分鐘 什么是盒模型 每一個(gè)文檔中,每...
摘要:它是頁面中的一塊渲染區(qū)域,并且有一套渲染規(guī)則,它決定了其子元素將如何定位,以及和其他元素的關(guān)系和相互作用。一個(gè)的范圍包含創(chuàng)建該上下文元素的所有子元素,但不包括創(chuàng)建了新的子元素的內(nèi)部元素。 走在前端的大道上 本篇將自己讀過的相關(guān) 盒模型BFC 文章中,對自己有啟發(fā)的章節(jié)片段總結(jié)在這(會(huì)對原文進(jìn)行刪改),會(huì)不斷豐富提煉總結(jié)更新。 一.常見定位方案 在講 BFC 之前,我們先來了解一下常見的...
摘要:什么是盒模型概念每一個(gè)文檔中,每個(gè)元素都被表示為一個(gè)矩形的盒子它都會(huì)具有內(nèi)容區(qū)。不同類型的,會(huì)參與不同的一個(gè)決定如何渲染文檔的容器,因此內(nèi)的元素會(huì)以不同的方式渲染。最常見的有簡稱和簡稱。根據(jù)布局規(guī)則第四條的區(qū)域不會(huì)與重疊。 1.什么是CSS盒模型 1.1 概念 每一個(gè)文檔中,每個(gè)元素都被表示為一個(gè)矩形的盒子,它都會(huì)具有內(nèi)容區(qū)、padding、border、margin。盒模型分為兩種:...
摘要:標(biāo)準(zhǔn)盒模型盒子總寬度高度。以上支持,除此外還可以取到相對于視窗的上下左右的距離。包括高度寬度內(nèi)邊距和邊框,不包括外邊距。主要看怎么父元素的盒模型如何設(shè)置。空元素的邊距重疊是取與的最大值。 一、概念 CSS盒模型本質(zhì)上是一個(gè)盒子,封裝周圍的HTML元素,它包括:外邊距(margin)、邊框(border)、內(nèi)邊距(padding)、實(shí)際內(nèi)容(content)四個(gè)屬性。CSS盒模型:標(biāo)準(zhǔn)模...
閱讀 2957·2021-11-08 13:20
閱讀 1030·2021-09-22 15:20
閱讀 660·2019-08-30 15:53
閱讀 1964·2019-08-30 15:43
閱讀 1278·2019-08-29 17:21
閱讀 539·2019-08-29 12:15
閱讀 2374·2019-08-28 17:51
閱讀 3142·2019-08-26 13:26