標準盒模型與怪異盒模型 + box-sizing

SimpleTriangle 發布于2019-08-29 14:17 / 2890人閱讀

摘要：標準盒模型標準所有元素可以看作盒子，在中，這一術語是用來設計和布局時使用。在標準盒模型中盒子占位高度與之一樣。不幸的是，和在怪異模式中使用自己的非標準模型。

標準盒模型(w3c標準)

所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

在標準盒模型中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。

在標準盒模型中：盒子占位width = width + 2margin + 2padding + 2*border,高度與之一樣。
盒子真正德width = width + 2padding + 2border。 margin不算！margin可以改變盒子占位的大小，但是盒子的寬高并沒有改變，而是位置的改變！

根據 W3C 的規范，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。

怪異盒模型

ie 盒子模型的 content 部分包含了 border 和 pading

要讓網頁按標準盒模型去解析，則需要加上 doctype聲明，否則不同的瀏覽器會按照自己的標準去解析。

box-sizing

box-sizing 屬性允許你以某種方式定義某些元素，以適應指定區域。
例如，假如您需要并排放置兩個帶邊框的框，可通過將 box-sizing 設置為 "border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，并把邊框和內邊距放入框中。

box-sizing類似于ie盒模型，它會把內邊距和邊框包含在width內。在實際工作中，我們設置一個固定寬度的盒子，但當給它設置padding、border之后，它的真正寬度就會改變。這時box-sizing就派上用途了。它會自動調整內容的寬度，保證盒子的真正寬度還是我們設置的寬度。

可以查看實例：box-sizing實例

云服務器 GPU云服務器盒模型盒模型html嗎簡述html盒模型對象模型與數據模型

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

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

標準盒模型、怪異盒模型對比與應用

摘要：百度標準盒模型，所有的介紹都是在標準模式下，一個塊的總寬度左右左右左右在怪異模式下，一個塊的總寬度左右既已經包含了和值然后再介紹一下新屬性那么，到底這兩個公式里提到的總寬度是什么意思呢兩種模式最終效果有什么差別呢話不多說，上代碼先看標準百度標準盒模型，所有的介紹都是在標準模式下，一個塊的總寬度=width+margin(左右)+padding(左右)+border(左右)在怪異模式下...

keithxiaoy 2019-08-29 12:59 評論0 收藏0
CSS3中的box-sizing

摘要：的作用了解完這兩種盒模型后，在介紹一下，他一共有種值，，。就是繼承父元素的值，這里不做介紹。比如我們想做一個內邊距，邊框為，最終包括邊框寬度為的，之前的做法是先算出內容寬。懂得如何運用box-sizing之前，必須需要了解一下常規盒模型和怪異盒模型（IE盒模型）。我們都知道盒模型從里到外主要包括：content，padding，border，margin。如下圖：showImg(...

RaoMeng 2019-08-30 15:53 評論0 收藏0
【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

摘要：提供了糟糕的支持，而雖然接近標準，但依舊未能完全正確的支持標準。盡管修復了許多的問題，但是依然延續實現中的其它故障主要是盒模型問題。因此大部分的聲明將觸發嚴格模式即依據標準的規則渲染網頁。深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點主要參考自第一篇文章，然而筆者在讀的時...

binta 2019-08-29 16:13 評論0 收藏0
css1：盒模型

摘要：最近工作中有機會復習一下的基本知識，那么先從的盒模型開始吧，因為這是當時進現在這家公司筆試的第一題怎么把盒模型變成標準盒模型嗯，有辦法，就可以啦。具體參見鏈接描述常見的盒模型分兩類怪異盒模型和標準盒模型，兩種盒模型有著很大的不同。最近工作中有機會復習一下css的基本知識，那么先從css的盒模型開始吧，因為這是當時進現在這家公司筆試的第一題：怎么把IE盒模型變成標準盒模型？嗯，有辦法，...

TalkingData 2019-08-30 10:59 評論0 收藏0