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

資訊專欄INFORMATION COLUMN

CSS盒模型完整介紹

qqlcbb / 2887人閱讀

摘要：盒模型的認(rèn)識基本概念標(biāo)準(zhǔn)模型模型。如圖由于盒模型的怪異模式，模型和標(biāo)準(zhǔn)模型的內(nèi)容計算方式不同。設(shè)置為標(biāo)準(zhǔn)模型，它的元素寬度。這里就不介紹，大家可以自行搜索。

盒模型的認(rèn)識

基本概念：標(biāo)準(zhǔn)模型+IE模型。 包括margin,border,padding,content

標(biāo)準(zhǔn)模型和IE模型的區(qū)別

css如何設(shè)置獲取這兩種模型的寬和高

js如何設(shè)置獲取盒模型對應(yīng)的寬和高

根據(jù)盒模型解釋邊距重疊

BFC（邊距重疊解決方案，還有IFC）解決邊距重疊

一、基本概念：標(biāo)準(zhǔn)模型+IE模型

什么是盒模型：盒模型又稱框模型（Box Model）,包含了元素內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）幾個要素。如圖：

由于IE盒模型的怪異模式，IE模型和標(biāo)準(zhǔn)模型的內(nèi)容計算方式不同。

二、標(biāo)準(zhǔn)模型和IE模型的區(qū)別

IE模型和標(biāo)準(zhǔn)模型唯一的區(qū)別是內(nèi)容計算方式的不同，如下圖所示：

IE模型元素寬度width=content+padding，高度計算相同

標(biāo)準(zhǔn)模型元素寬度width=content，高度計算相同

三、css如何設(shè)置獲取這兩種模型的寬和高

通過css3新增的屬性 box-sizing: content-box | border-box分別設(shè)置盒模型為標(biāo)準(zhǔn)模型（content-box）和IE模型（border-box）。

.content-box {
  box-sizing:content-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

.content-box設(shè)置為標(biāo)準(zhǔn)模型，它的元素寬度width=100px。

.border-box {
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

.border-box設(shè)置為IE模型，它的元素寬度width=content + 2 padding + 2 border = 70px + 2 10px + 2 5px = 100px。

四、javascript如何設(shè)置獲取盒模型對應(yīng)的寬和高

dom.style.width/height 只能取到行內(nèi)樣式的寬和高，style標(biāo)簽中和link外鏈的樣式取不到。

dom.currentStyle.width/height 取到的是最終渲染后的寬和高，只有IE支持此屬性。

window.getComputedStyle(dom).width/height 同（2）但是多瀏覽器支持，IE9以上支持。

dom.getBoundingClientRect().width/height 也是得到渲染后的寬和高，大多瀏覽器支持。IE9以上支持，除此外還可以取到相對于視窗的上下左右的距離

以上API在瀏覽器中測試過，有興趣可以都試一下

五、外邊距重疊

當(dāng)兩個垂直外邊距相遇時，他們將形成一個外邊距，合并后的外邊距高度等于兩個發(fā)生合并的外邊距的高度中的較大者。注意：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并，行內(nèi)框、浮動框或絕對定位之間的外邊距不會合并。

且看下面例子：

這里父元素section的高度是多少呢，100px，但是我們給section設(shè)置overflow:hidden后高度就變成110px，這是為什么呢，其實這里我們給父元素創(chuàng)建了BFC。，什么是BFC,請看下面的介紹。

六 、BFC

BFC(Block Formatting Context)：塊級格式化上下文。
BFC決定了元素如何對其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。當(dāng)設(shè)計到可視化布局的時候，BFC提供了一個環(huán)境，HTML元素在這個環(huán)境中按照一定的規(guī)則進(jìn)行布局。一個環(huán)境中的元素不會影響到其他環(huán)境中的布局。

BFC的原理（渲染規(guī)則）

BFC元素垂直方向的邊距會發(fā)生重疊。屬于不同BFC外邊距不會發(fā)生重疊

BFC的區(qū)域不會與浮動元素的布局重疊。

BFC元素是一個獨立的容器，外面的元素不會影響里面的元素。里面的元素也不會影響外面的元素。

計算BFC高度的時候，浮動元素也會參與計算(清除浮動)

如何創(chuàng)建BFC

overflow不為visible;

float的值不為none；

position的值不為static或relative；

display屬性為inline-blocks,table,table-cell,table-caption,flex,inline-flex;

說了這么多規(guī)則，放幾個實類出來看看。

    

        
        
1

        

            
2

        

        
3

        
4

請看這里的第二個p元素

2

他被一個父元素包裹，并且父元素有 overflow:hidden 樣式，前面的如何創(chuàng)建BFC的第一條就說了 overflow:hidden 可以創(chuàng)建一個BFC。結(jié)果如下圖所示。

我們看這里的2，它的上下外邊距都沒有與1和3發(fā)生重疊，但3與4外邊距發(fā)生了重疊。這就解釋了BFC創(chuàng)建了一個獨立的環(huán)境，這個環(huán)境中的元素不會影響到其他環(huán)境中的布局，所以BFC內(nèi)的外邊距不與外部的外邊距發(fā)生重疊。

再看看下面的列子：

效果如下：

寫過前端頁面的我們肯定遇到過這種情況，這里其實是浮動元素疊在 .right 元素的上面，如果我們想讓.right元素不會延伸到 float元素怎么辦,其實我們在.right元素上加 overflow:hidden （用其他的方式創(chuàng)建BFC也可以）創(chuàng)建BFC就可以解決。因為BFC不會與浮動元素發(fā)生重疊。

還有一種情況很常見，就是由于子元素浮動，導(dǎo)致父元素的高度不會把浮動元素算在內(nèi)，那么我們在父元素創(chuàng)建BFC就可以讓可以讓浮動元素也參與高度計算。

IFC這里就不介紹，大家可以自行搜索。

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

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

相關(guān)文章

  • 【芝士整理】CSS基礎(chǔ)圖譜

    摘要：為了實現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動產(chǎn)生，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。 選擇器注意點 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結(jié)尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節(jié)點 A + B - 下一個兄弟節(jié)點 A...

    iOS122 評論0 收藏0

  • 面試--css面試

    摘要：怪異的盒模型和標(biāo)準(zhǔn)瀏覽器的盒模型，可以通過屬性控制兩種盒模型的變化屬性值這個屬性值和是的盒模型是有關(guān)系的。簡便完整響應(yīng)式地實現(xiàn)各種頁面布局提出了布局。交叉軸的起點對齊。 1、css盒模型 css的盒模型包括：content+padding+border+margin同時值得注意的是：css 的外邊距會在垂直方向合并。 兩個上下方向相鄰的塊元素框垂直相遇時，外邊距會合并，合并后的外邊距...

    sPeng 評論0 收藏0

  • 常見的面試問題：【CSS】CSS盒模型

    摘要：標(biāo)準(zhǔn)盒模型盒子總寬度高度。以上支持，除此外還可以取到相對于視窗的上下左右的距離。包括高度寬度內(nèi)邊距和邊框，不包括外邊距。主要看怎么父元素的盒模型如何設(shè)置?？赵氐倪吘嘀丿B是取與的最大值。 一、概念 CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、實際內(nèi)容（content）四個屬性。CSS盒模型：標(biāo)準(zhǔn)模...

    android_c 評論0 收藏0

  • 深入css布局 (1) — 盒模型 & 元素分類

    摘要：深入布局盒模型元素分類在知識體系中，除了選擇器，樣式屬性等基礎(chǔ)知識外，布局相關(guān)的知識才是比較核心和重要的點。從元素的布局特性來分，主要可以分為三類元素塊級元素，行內(nèi)元素，行內(nèi)塊級元素。行內(nèi)級元素屬性取的元素。? 深入css布局（1）—— 盒模型 & 元素分類 ? ? ? 在css知識體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識外，css布局相關(guān)的知識才是css比較核心和重要的點。今天我們...

    ky0ncheng 評論0 收藏0

發(fā)表評論

0條評論

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