資訊專欄INFORMATION COLUMN
摘要：百度標準盒模型，所有的介紹都是在標準模式下，一個塊的總寬度左右左右左右在怪異模式下，一個塊的總寬度左右既已經包含了和值然后再介紹一下新屬性那么，到底這兩個公式里提到的總寬度是什么意思呢兩種模式最終效果有什么差別呢話不多說，上代碼先看標準
百度標準盒模型，所有的介紹都是
在標準模式下，一個塊的總寬度=width+margin(左右)+padding(左右)+border(左右)
在怪異模式下，一個塊的總寬度=width+margin（左右）（既width已經包含了padding和border值）
然后再介紹一下css3新屬性
box-sizing: border-box;
那么，到底這兩個公式里提到的總寬度是什么意思呢？兩種模式最終效果有什么差別呢？
話不多說，上代碼
html
css
#box {
width: 400px;
height: 400px;
margin: 70px;
padding: 20px;
border: 5px solid black;
}
#child {
width: 100%;
height: 100%;
}
先看標準模式：
元素
父元素
子元素
標準模式，我們設置#box的寬高為400px，其對應的content（內容區(qū)）寬高為400px，
父元素的高度為#box內容區(qū)高度+上下border+上下padding，結果為450px
子元素的高度為#box內容區(qū)高度
然后我們再看下怪異模式
css添加代碼
div {
box-sizing: border-box;
}
元素
父元素
子元素
標準模式，我們設置#box的寬高為400px，其對應的content（內容區(qū)）寬高卻是
width-上下padding-上下border，結果為350px;
父元素的高度為#box內容區(qū)高度+上下border+上下padding，結果為400px
子元素的高度為#box內容區(qū)高度350px
標準盒模型中，css設置width為x，對應元素content便為x
而在怪異模式中，元素的content寬度是由x減左右padding，再減左右margin得出的
上面我們了解了標準盒模型和怪異模式的區(qū)別，接下來我們舉個應用的例子，僅供參考
需求：創(chuàng)建一個div，div的左側距屏幕左側20px，div的右側在屏幕中間
標準模式可以輕松實現
position: absolute; left: 20px; right: 50%;
如果右側位置改為屏幕中間位置左側30px，如何實現？
可以設置一個父元素，讓div右側距離父元素30px即可，為方便展示，這里使用行內樣式
如果需求更進一步，要求元素能夠撐起父元素的高度，如何實現？
顯然position已經無法滿足需求
實現方式有很多，這里我們只介紹使用怪異模式如何實現
測試測試測試測試測試測試測試測試測試測試
效果圖
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/112288.html
摘要：標準盒模型標準所有元素可以看作盒子，在中，這一術語是用來設計和布局時使用。在標準盒模型中盒子占位高度與之一樣。不幸的是，和在怪異模式中使用自己的非標準模型。 標準盒模型(w3c標準) 所有HTML元素可以看作盒子，在CSS中，box model這一術語是用來設計和布局時使用。CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。 showImg(h...
摘要：提供了糟糕的支持，而雖然接近標準，但依舊未能完全正確的支持標準。盡管修復了許多的問題，但是依然延續(xù)實現中的其它故障主要是盒模型問題。因此大部分的聲明將觸發(fā)嚴格模式即依據標準的規(guī)則渲染網頁。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點 主要參考自第一篇文章，然而筆者在讀的時...
摘要：盒模型一般分為標準盒模型，盒模型一般大家都是使用需要注意的是設置了這樣一條樣式所以在使用過程中需要小心，不要沖突，導致怪異的情況出現而不知原因默認值標準盒模型顧名思義此時屬性值是內容的寬度，而盒子的寬度是的寬度所以盒子大小會隨 盒模型一般分為：w3c標準盒模型（content-box），IE盒模型（boder-box）一般大家都是使用content-box,需要注意的是bootstra...
閱讀 2333·2021-09-30 09:48
閱讀 3692·2021-09-24 10:27
閱讀 1938·2021-09-22 15:32
閱讀 2098·2021-08-09 13:44
閱讀 3657·2019-08-30 15:55
閱讀 1110·2019-08-29 17:12
閱讀 2140·2019-08-29 17:05
閱讀 2983·2019-08-29 13:43
