資訊專欄INFORMATION COLUMN
摘要：標(biāo)準(zhǔn)盒模型標(biāo)準(zhǔn)所有元素可以看作盒子，在中，這一術(shù)語是用來設(shè)計(jì)和布局時(shí)使用。在標(biāo)準(zhǔn)盒模型中盒子占位高度與之一樣。不幸的是，和在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。
標(biāo)準(zhǔn)盒模型(w3c標(biāo)準(zhǔn))
所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語是用來設(shè)計(jì)和布局時(shí)使用。
CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。
在標(biāo)準(zhǔn)盒模型中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。
在標(biāo)準(zhǔn)盒模型中：盒子占位width = width + 2margin + 2padding + 2*border,高度與之一樣。
盒子真正德width = width + 2padding + 2border。 margin不算！margin可以改變盒子占位的大小，但是盒子的寬高并沒有改變，而是位置的改變！
根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周圍的 padding 和 border 值是另外計(jì)算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。
怪異盒模型ie 盒子模型的 content 部分包含了 border 和 pading
要讓網(wǎng)頁按標(biāo)準(zhǔn)盒模型去解析，則需要加上 doctype聲明，否則不同的瀏覽器會(huì)按照自己的標(biāo)準(zhǔn)去解析。
box-sizingbox-sizing 屬性允許你以某種方式定義某些元素，以適應(yīng)指定區(qū)域。
例如，假如您需要并排放置兩個(gè)帶邊框的框，可通過將 box-sizing 設(shè)置為 "border-box"。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。
box-sizing類似于ie盒模型，它會(huì)把內(nèi)邊距和邊框包含在width內(nèi)。在實(shí)際工作中，我們?cè)O(shè)置一個(gè)固定寬度的盒子，但當(dāng)給它設(shè)置padding、border之后，它的真正寬度就會(huì)改變。這時(shí)box-sizing就派上用途了。它會(huì)自動(dòng)調(diào)整內(nèi)容的寬度，保證盒子的真正寬度還是我們?cè)O(shè)置的寬度。
可以查看實(shí)例：box-sizing實(shí)例
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113043.html
摘要：百度標(biāo)準(zhǔn)盒模型，所有的介紹都是在標(biāo)準(zhǔn)模式下，一個(gè)塊的總寬度左右左右左右在怪異模式下，一個(gè)塊的總寬度左右既已經(jīng)包含了和值然后再介紹一下新屬性那么，到底這兩個(gè)公式里提到的總寬度是什么意思呢兩種模式最終效果有什么差別呢話不多說，上代碼先看標(biāo)準(zhǔn) 百度標(biāo)準(zhǔn)盒模型，所有的介紹都是在標(biāo)準(zhǔn)模式下，一個(gè)塊的總寬度=width+margin(左右)+padding(左右)+border(左右)在怪異模式下...
摘要：的作用了解完這兩種盒模型后，在介紹一下，他一共有種值，，。就是繼承父元素的值，這里不做介紹。比如我們想做一個(gè)內(nèi)邊距，邊框?yàn)椋罱K包括邊框?qū)挾葹榈?，之前的做法是先算出?nèi)容寬。 懂得如何運(yùn)用box-sizing之前，必須需要了解一下常規(guī)盒模型和怪異盒模型（IE盒模型）。 我們都知道盒模型從里到外主要包括：content，padding，border，margin。如下圖：showImg(...
摘要：提供了糟糕的支持，而雖然接近標(biāo)準(zhǔn)，但依舊未能完全正確的支持標(biāo)準(zhǔn)。盡管修復(fù)了許多的問題，但是依然延續(xù)實(shí)現(xiàn)中的其它故障主要是盒模型問題。因此大部分的聲明將觸發(fā)嚴(yán)格模式即依據(jù)標(biāo)準(zhǔn)的規(guī)則渲染網(wǎng)頁。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點(diǎn) 主要參考自第一篇文章，然而筆者在讀的時(shí)...
摘要：最近工作中有機(jī)會(huì)復(fù)習(xí)一下的基本知識(shí)，那么先從的盒模型開始吧，因?yàn)檫@是當(dāng)時(shí)進(jìn)現(xiàn)在這家公司筆試的第一題怎么把盒模型變成標(biāo)準(zhǔn)盒模型嗯，有辦法，就可以啦。具體參見鏈接描述常見的盒模型分兩類怪異盒模型和標(biāo)準(zhǔn)盒模型，兩種盒模型有著很大的不同。 最近工作中有機(jī)會(huì)復(fù)習(xí)一下css的基本知識(shí)，那么先從css的盒模型開始吧，因?yàn)檫@是當(dāng)時(shí)進(jìn)現(xiàn)在這家公司筆試的第一題：怎么把IE盒模型變成標(biāo)準(zhǔn)盒模型？嗯，有辦法，...
閱讀 1231·2019-08-30 15:55
閱讀 981·2019-08-30 15:55
閱讀 2186·2019-08-30 15:44
閱讀 2955·2019-08-29 14:17
閱讀 1162·2019-08-29 12:45
閱讀 3337·2019-08-26 10:48
閱讀 3162·2019-08-23 18:18
閱讀 2632·2019-08-23 16:47
