CSS中怪異盒模型和標(biāo)準(zhǔn)盒模型有什么用-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“CSS中怪異盒模型和標(biāo)準(zhǔn)盒模型有什么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS中怪異盒模型和標(biāo)準(zhǔn)盒模型有什么用”這篇文章吧。

磐安網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),磐安網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為磐安近1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設(shè)要多少錢，請找那個(gè)售后服務(wù)好的磐安做網(wǎng)站的公司定做！

在html文檔中，每個(gè)渲染在頁面中的標(biāo)簽都是一個(gè)個(gè)盒子模型。

盒子模型又分為 ：W3C標(biāo)準(zhǔn)的盒子模型 和IE標(biāo)準(zhǔn)的盒子模型。

由于目前大部分主流的瀏覽器支持的是W3C標(biāo)準(zhǔn)盒模型（標(biāo)準(zhǔn)盒模型），也有保留對怪異盒子樣式的解析，當(dāng)然IE沿用的是自己標(biāo)準(zhǔn)的盒模型（怪異盒子模型）

用兩個(gè)簡單的例子分別介紹下這兩個(gè)盒子模型：

標(biāo)準(zhǔn)盒模型：

<!--html-->
<div class="box1">
    <div class="box2"></div>
</div>

<!--css-->
.box1{
         width: 200px;
         height: 200px;
         background-color: aqua;
         padding: 30px;
        }
.box2{
         width: 200px;
         height: 200px;
         background-color: red;
        }

這里外層盒子的width和height都是：30 + 200 + 30 = 260px。

怪異盒模型

<!--css中加入box-sizing屬性-->
<!--box-sizing屬性：border-box(怪異盒子模型)，content-box(標(biāo)準(zhǔn)盒模型)-->
.box1{
         width: 200px;
         height: 200px;
         background-color: aqua;
         padding: 30px;
         box-sizing: border-box;
        }
.box2{
         width: 200px;
         height: 200px;
         background-color: red;
        }

這里外層盒子的width和height都是：30 + 140+ 30 = 200px。

這里得出一個(gè)結(jié)論：

標(biāo)準(zhǔn)盒模型，一個(gè)塊的總寬度 = width（content的寬度） + margin（左右）+ padding（左右）+ border（左右）

怪異盒模型，一個(gè)塊的總寬度 = width（content + border + padding）+ margin(左右)

以上是“CSS中怪異盒模型和標(biāo)準(zhǔn)盒模型有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享題目：CSS中怪異盒模型和標(biāo)準(zhǔn)盒模型有什么用-創(chuàng)新互聯(lián)
URL分享：http://bm7419.com/article42/dseoec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、域名注冊、服務(wù)器托管、網(wǎng)站制作、移動(dòng)網(wǎng)站建設(shè)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)