溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css3兩種盒模型的區(qū)別有哪些

發(fā)布時(shí)間：2022-02-28 14:40:34 來源：億速云 閱讀：155 作者：iii 欄目：web開發(fā)

這篇“css3兩種盒模型的區(qū)別有哪些”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“css3兩種盒模型的區(qū)別有哪些”文章吧。

區(qū)別：1、標(biāo)準(zhǔn)盒子的width和height就是內(nèi)容區(qū)域的寬度和高度，而怪異模型的width和height是指“內(nèi)容區(qū)域+border+padding”的寬度和高度；2、標(biāo)準(zhǔn)盒子增加內(nèi)邊距、邊框和外邊距不會(huì)影響元素的尺寸，而怪異模型會(huì)。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

盒子模型包括content（內(nèi)容）、padding（內(nèi)邊距）、border（邊框）、margin（外邊距）

CSS中有兩個(gè)盒子模型，分別是W3C標(biāo)準(zhǔn)模型和IE怪異模型。

引入：

<!DOCTYPE html>  
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>  申明文檔的解析類型，那么它到底有多重要呢
解析類型：
　　BackCompat：怪異模式，瀏覽器自己的模式
　　CSS1Compat:標(biāo)準(zhǔn)模式，W3C標(biāo)準(zhǔn)解析渲染頁面    
    如果不做申明，則按照怪異模式進(jìn)行渲染，不同的瀏覽器渲染有所不同

一、標(biāo)準(zhǔn)模型

css3兩種盒模型的區(qū)別有哪些
W3C  標(biāo)準(zhǔn)模型

當(dāng)我們對(duì)一個(gè)元素設(shè)置他的width和height的時(shí)候，標(biāo)準(zhǔn)盒模型只是對(duì)content(藍(lán)色部分)設(shè)置了寬高，那么這個(gè)元素真正的寬高就還要加上他的padding(內(nèi)邊距)border（邊框）margin（外邊距）。

公式：

  • width = 內(nèi)容的寬度

  • height = 內(nèi)容的高度

二、怪異模型

css3兩種盒模型的區(qū)別有哪些
怪異模型

當(dāng)我們對(duì)一個(gè)元素設(shè)置他的width和height的時(shí)候，怪異盒模型把整個(gè)盒子看成是一個(gè)整體。給整個(gè)盒子一個(gè)寬高。如果你還給盒子設(shè)置了額外的邊距和邊框。那么中間的content藍(lán)色部分就要受到擠壓,變小。

公式：

  • width = border + padding + 內(nèi)容的寬度

  • height = border + padding + 內(nèi)容的高度

W3C標(biāo)準(zhǔn)模型和IE怪異模型的主要區(qū)別是盒子的寬高。

①標(biāo)準(zhǔn)盒子的width和height表示內(nèi)容content的寬高，width=內(nèi)容的寬度、heigth=內(nèi)容的高度；增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。

②而怪異盒子的width包含padding、內(nèi)容的寬度、border。height包含內(nèi)容的高度、border、padding

width=（border-left+padding-left+內(nèi)容的寬度+padding+right+border+right）

height=(border-top+padding-top+內(nèi)容的高度+padding-bottom+border-bottom)

以上就是關(guān)于“css3兩種盒模型的區(qū)別有哪些”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手