-
讓品牌有溫度、有情感
專注品牌策劃15年
-
當(dāng)前位置：首頁 > 創(chuàng)意學(xué)院 > 景觀設(shè)計(jì) > 專題列表 > 正文
ie盒子和標(biāo)準(zhǔn)盒子（ie盒子和標(biāo)準(zhǔn)盒子模型的區(qū)別）
發(fā)布時(shí)間：2023-04-07 14:14:56
稿源：
創(chuàng)意嶺 閱讀：
107
大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于ie盒子和標(biāo)準(zhǔn)盒子的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。
開始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對話答疑等等
只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁版、PC客戶端
官網(wǎng)：https://ai.de1919.com。
創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，如需了解相關(guān)業(yè)務(wù)請撥打電話175-8598-2043，或添加微信：1454722008
本文目錄:
準(zhǔn)盒子（ie盒子和標(biāo)準(zhǔn)盒子模型的區(qū)別）.jpg)
一、介紹一下標(biāo)準(zhǔn)的css的盒子模型？與低版本ie的盒子模型有什么不同的
標(biāo)準(zhǔn)的css盒子模型：他的寬度=內(nèi)容的寬度+邊框的寬度+加上內(nèi)邊具的寬度
比如：.box{width:100px;border:10px solid #ccc;padding:10px}
那么標(biāo)準(zhǔn)的css盒子模型中的box這個(gè)的總的寬度就是140px=100+10+10+10+10；
但是低版本ie的盒子模型box的寬度還是100px，
二、瀏覽器盒子模型——CSS基礎(chǔ)篇
瀏覽器盒子模型
一般來說有兩種：IE版和標(biāo)準(zhǔn)W3C版
IE版和W3C版主要差別在于IE把border和padding都算進(jìn)width中，而W3C版的則是width只包括content
默認(rèn)瀏覽器會使用標(biāo)準(zhǔn)模型。如果需要使用替代模型，您可以通過為其設(shè)置box-sizing: border-box來實(shí)現(xiàn)。 這樣就可以告訴瀏覽器使用border-box來定義區(qū)域，從而設(shè)定您想要的大小。
.box{
box-sizing:border-box;
}
如果你希望所有元素都使用替代模式，而且確實(shí)很常用，設(shè)置box-sizing在<html>元素上，然后設(shè)置所有元素繼承該屬性，正如下面的例子。如果想要深入理解，請看 the CSS Tricks article on box-sizing 。
html{
box-sizing:border-box;
}
*, *::before, *::after{
box-sizing:inherit;
}
三、面試題：怎么理解盒模型？
回答問題的時(shí)候要整理思路，也就是你的思考方式是怎么樣的？
1） 盒模型有兩種，W3C 和IE 盒子模型
1、W3C定義的盒模型包括margin、border、padding、content，元素的寬度width=content的寬度
2、IE盒模型與W3C盒模型的唯一區(qū)別就是元素的寬度，元素的width=border + padding + content
2） 對盒模型的理解
IE定義的盒模型較為合理，所以在css3中新增了box-sizing，包含兩個(gè)屬性content-box和border-box。
（1） content-box 元素的width = content
（2） border-box 元素的width = border + padding + content
3）更多理解
對于行內(nèi)元素 margin-top/margin-bottom對于上下元素?zé)o效，margin-left/margin-right有效
對于相鄰的塊級元素margin-top和margin-bottom兩者疊加按照一定的規(guī)則
（1） 都是整數(shù) margin值取兩者的最大值
（2） 都是負(fù)數(shù) margin值取最小值
（3）兩者正負(fù)相反，margin值取兩者之和
再往深的說就是bfc的理解了。
四、瀏覽器標(biāo)準(zhǔn)模式和怪異模式的區(qū)別
一.標(biāo)準(zhǔn)模式和怪異模式
二.區(qū)別
1. 盒模型
在怪異模式下，瀏覽器的盒模型為IE盒模型；而在標(biāo)準(zhǔn)模式下。瀏覽器的盒模型則為標(biāo)準(zhǔn)盒模型。二者的區(qū)別在于對元素寬高的計(jì)算不一樣。
IE盒模型
標(biāo)準(zhǔn)盒模型
2. 圖片的垂直對齊方式
對于 inline 和 table-cell 的元素來說，
標(biāo)準(zhǔn)模式下 vertical-align 屬性的默認(rèn)值為 baseline ；
怪異模式下 vertical-align 屬性的默認(rèn)值為 bottom 。
3. 元素的溢出處理
標(biāo)準(zhǔn)模式下 overflow 的默認(rèn)值為 visible ；
怪異模式下元素溢出的內(nèi)容不會被裁減，元素的大小由其內(nèi)容決定，自動調(diào)整。
4. 內(nèi)聯(lián)元素的尺寸
標(biāo)準(zhǔn)模式下inline元素是無法自定義設(shè)置寬高的，而在怪異模式下width和height是可以影響其大小的。
5. table元素中的字體
CSS中，對于font的屬性都是可以繼承的，但是在怪異模式下，對于table元素，字體的某些屬性將不會從body等其他元素中繼承得到，特別是font-size屬性。
6. 元素的百分比寬度
CSS中對于元素的百分比高度規(guī)定：百分比為元素包含塊的高度，不可為負(fù)值；如果包含塊的高度沒有顯示給出，該值等同于auto，所以百分比的高度必須是在元素有高度聲明的情況下使用。
當(dāng)一個(gè)元素使用百分比高度是，標(biāo)準(zhǔn)模式下，高度取決于內(nèi)容變化，怪異模式下，百分比高度被準(zhǔn)確應(yīng)用
以上就是關(guān)于ie盒子和標(biāo)準(zhǔn)盒子相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。
推薦閱讀：
澳大利亞ChatGPT情感（澳大利亞tripviewlite）
阿里巴巴vie架構(gòu)（阿里巴巴vie架構(gòu)所有權(quán)）
贛公網(wǎng)安備 50019002502384號
