CSS盒子模型含義和原理的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹CSS盒子模型含義和原理的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出安多免費(fèi)做網(wǎng)站回饋大家。

什么是盒子模型

說(shuō)起盒子模型，作為前端開(kāi)發(fā)的我們，相信大家都有了解過(guò)的 。這里套用mdn官網(wǎng)的解釋?zhuān)?/p>

在一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子。確定這些盒子的尺寸, 屬性 --- 像它的顏色，背景，邊框方面 --- 和位置是渲染引擎的目標(biāo)。

在CSS中，使用標(biāo)準(zhǔn)盒模型描述這些矩形盒子中的每一個(gè)。這個(gè)模型描述了元素所占空間的內(nèi)容。每個(gè)盒子有四個(gè)邊：外邊距邊, 邊框邊, 內(nèi)填充邊與內(nèi)容邊。

官方語(yǔ)言總是那么的晦澀難懂，那我接用chrome的控制臺(tái)的截圖來(lái)說(shuō)明吧：

最外面橙色的就是外邊距區(qū)域(margin area )，往里黃色的是邊框區(qū)域(border area)，再往里的綠色的是內(nèi)邊距區(qū)域(padding area )，最里面綠色的就是內(nèi)容區(qū)域（content area）了。

盒子模型的作用

好吧，盒子模型的概念好像沒(méi)有什么好說(shuō)的，就上面那張圖片罷了。下面一起來(lái)看看盒子模型對(duì)我們布局有什么影響。舉個(gè)栗子，假如想設(shè)置一個(gè)元素的大小為200px，如果寫(xiě)了如下的代碼：

<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
  }
</style>
<div class="box">
  盒子模型
</div>

結(jié)果，你在審查元素時(shí)，發(fā)現(xiàn)這個(gè)元素的大小變成了240px，而不是200px了。

這是為什么呢？因?yàn)槟J(rèn)情況下，設(shè)置width 、height 等作用對(duì)象是內(nèi)容區(qū)域，所以設(shè)置的width: 200px僅僅是內(nèi)容區(qū)域的寬度，加上左右內(nèi)邊距大小，導(dǎo)致了元素的整體尺寸變大了。這和我們對(duì)現(xiàn)實(shí)世界的中盒子的認(rèn)識(shí)有差異的。比如，你我們說(shuō)房子的面積，并不單單指可用面積，還要包括墻壁厚度、陽(yáng)臺(tái)、電梯之類(lèi)的空間的。

盒子模型和box-sizing

為了把CSS和現(xiàn)實(shí)世界對(duì)應(yīng)起來(lái)，這時(shí)候box-sizing就要用上場(chǎng)了。box-sizing是用來(lái)設(shè)置width、height的作用對(duì)象的。有三個(gè)值，分別是content-box 、 paading-box 、 border-box， 默認(rèn)值是content-box?？赡苡腥藭?huì)問(wèn)，為什么沒(méi)有margin-box??？具體原因就不知道了，可以參考張?chǎng)涡窭蠋熢凇禖SS世界》一書(shū)中提到了兩個(gè)原因：

margin-box 本身沒(méi)有多大的價(jià)值

和 margin 的規(guī)范會(huì)沖突。因?yàn)閙argin規(guī)范寫(xiě)著“ margin的背景永遠(yuǎn)是透明的 ”，如果來(lái)個(gè)margin-box，那background怎么辦？

至于為什么沒(méi)有margin-box就簡(jiǎn)單的提一下，有興趣的朋友可以自己去查一下。

最佳實(shí)踐

為了布局上的方便，一些專(zhuān)家建議我們將所有的元素都設(shè)置為box-sizing: border-box

如果不考慮低版本瀏覽器的話，可以用下面的代碼：

*,
*:before,
*:after { 
  box-sizing: border-box;
}

后來(lái),又有專(zhuān)家建議用的繼承的方法，如下：

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

這種方法被稱(chēng)為最佳實(shí)踐，具體原因就不說(shuō)了，既然是專(zhuān)家推薦 ，那我們以后可以把第二種方法的段代碼放到reset.css里面的。

以上是“CSS盒子模型含義和原理的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前名稱(chēng)：CSS盒子模型含義和原理的示例分析-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)路徑：http://muchs.cn/article10/dieedo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、微信小程序、網(wǎng)站設(shè)計(jì)、域名注冊(cè)、全網(wǎng)營(yíng)銷(xiāo)推廣、外貿(mào)建站

廣告

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