【HTML/CSS】什么是盒子模型

Acceml 發(fā)布于2019-08-30 15:56 / 2582人閱讀

摘要：盒子模型就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的技術(shù)所使用的一種思維模型。網(wǎng)頁設(shè)計(jì)中常聽的屬性名內(nèi)容內(nèi)邊距邊框外邊距，盒子模式都具備這些屬性。

CSS盒子模型就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。網(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)，CSS盒子模式都具備這些屬性。

盒模型一共有2種模式

符合W3C標(biāo)準(zhǔn)的標(biāo)準(zhǔn)盒模型

標(biāo)準(zhǔn)盒子的長寬 = content的長寬

在IE下的怪異盒模型

怪異盒子的長寬 = content的長寬+ padding + border

在html的首部，我們經(jīng)常會(huì)看到一個(gè)的聲明，瀏覽器根據(jù)這個(gè)聲明來判斷這個(gè)文件是什么類型的，并根據(jù)這來判斷怎么解析文件。

當(dāng)我們寫了的聲明的時(shí)候，無論在哪種內(nèi)核的瀏覽器下盒子模型都會(huì)被解析為標(biāo)準(zhǔn)盒模型

當(dāng)我們沒寫聲明或聲明丟失的時(shí)候，部分有IE內(nèi)核的瀏覽器則會(huì)觸發(fā)怪異模型(IE6,7,8)

在CSS3中我們可以通過設(shè)置box-sizing的屬性來完成標(biāo)準(zhǔn)或者怪異模式之間的切換
（1）box-sizing ： content-box 采用標(biāo)準(zhǔn)模式也是默認(rèn)樣式
（2）box-sizing： border-box 采用怪異模式

以上就是我對(duì)盒子模型的理解，如有異議歡迎評(píng)論留言。

云服務(wù)器 GPU云服務(wù)器盒子模型 html css HTML+CSS html+css:

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/117525.html

相關(guān)文章

【HTML/CSS】什么是盒子模型

摘要：盒子模型就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的技術(shù)所使用的一種思維模型。網(wǎng)頁設(shè)計(jì)中常聽的屬性名內(nèi)容內(nèi)邊距邊框外邊距，盒子模式都具備這些屬性。 CSS盒子模型就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。網(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)，CSS盒子模式都具備這些屬性。盒模型一共有2種模式符合W3C標(biāo)...

syoya 2019-08-02 14:32 評(píng)論0 收藏0
DIV+CSS學(xué)習(xí)筆記總結(jié)篇

摘要：每個(gè)列表項(xiàng)始于標(biāo)簽。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。姓名性別姓名性別單元格標(biāo)簽可以定義表格中的一個(gè)單元格，表示一個(gè)單元格。第一部分 HTML 第一章職業(yè)規(guī)劃和前景職業(yè)方向規(guī)劃定位： web前端開發(fā)工程師 web網(wǎng)站架構(gòu)師自己創(chuàng)業(yè) 轉(zhuǎn)崗管理或其他 web前端開發(fā)的前景展望：未來IT行業(yè)企業(yè)需求...

iOS122 2019-08-29 11:13 評(píng)論0 收藏0
DIV+CSS學(xué)習(xí)筆記總結(jié)篇

摘要：每個(gè)列表項(xiàng)始于標(biāo)簽。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。姓名性別姓名性別單元格標(biāo)簽可以定義表格中的一個(gè)單元格，表示一個(gè)單元格。第一部分 HTML 第一章職業(yè)規(guī)劃和前景職業(yè)方向規(guī)劃定位： web前端開發(fā)工程師 web網(wǎng)站架構(gòu)師自己創(chuàng)業(yè) 轉(zhuǎn)崗管理或其他 web前端開發(fā)的前景展望：未來IT行業(yè)企業(yè)需求...

HackerShell 2019-08-01 15:41 評(píng)論0 收藏0
HTML+CSS復(fù)習(xí)之CSS基礎(chǔ)篇

摘要：內(nèi)容簡述關(guān)于，確實(shí)太繁雜了，內(nèi)容多。寫好不易，基本上就這個(gè)調(diào)了。里面有許多屬性是可以繼承的，注意了，繼承一定是繼承父級(jí)元素的樣式在這里我就列出可以繼承的屬性，和不能繼承的屬性啦不可繼承的和。內(nèi)聯(lián)元素可繼承。每個(gè)瀏覽器可能表現(xiàn)不一樣。內(nèi)容簡述關(guān)于CSS，確實(shí)太繁雜了，內(nèi)容多。寫好不易，基本上就這個(gè)調(diào)了。大家肯定聽過CSS奇淫技巧吧，關(guān)于這個(gè)我還沒有去深入了解，只是說普通的效果啥的，我...

Salamander 2019-08-29 12:38 評(píng)論0 收藏0
前端面試題 -- HTML+CSS

摘要：內(nèi)核原為，現(xiàn)為內(nèi)核，等。但盒子的大小由這幾部分決定是一個(gè)屬性，與盒子模型有著密切聯(lián)系。前言貌似又到了一年一度跑路跳槽的時(shí)刻，由于個(gè)人的一些原因最近也參加了很多面試，發(fā)現(xiàn)有很多基礎(chǔ)性的東西掌握程度還是不夠，故此想總結(jié)一下最近面試遇到的問題以及個(gè)人認(rèn)為比較重要的東西，留給自己消化，也分享給有需要的小伙伴 GitHub完整版面試題，歡迎小伙伴們star關(guān)注如果文章中有出現(xiàn)紕漏、錯(cuò)誤之處...

shiina 2019-08-30 15:56 評(píng)論0 收藏0