本篇內(nèi)容主要講解“html的盒子模型有哪些”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“html的盒子模型有哪些”吧!

成都創(chuàng)新互聯(lián)公司主營(yíng)霞山網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件定制開(kāi)發(fā),霞山h5成都微信小程序搭建,霞山網(wǎng)站營(yíng)銷(xiāo)推廣歡迎霞山等地區(qū)企業(yè)咨詢(xún)

html的盒子模型有2種：1、w3c的盒子模型，其padding和border不被包含在定義的width和height之內(nèi)；2、IE的盒子模型，其padding和border被包含在定義的width和height之內(nèi)。

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

一、引入

• 在網(wǎng)站的制作中，一個(gè)復(fù)雜的頁(yè)面，被劃分為一個(gè)一個(gè)的小塊。

• 通過(guò)這種劃分，把網(wǎng)站的開(kāi)發(fā)過(guò)程化整為零、化繁為簡(jiǎn)，以達(dá)到減少開(kāi)發(fā)工作，減輕維護(hù)壓力的目的。

• 在網(wǎng)頁(yè)中，把這種劃分后的小塊形象的看成一個(gè)個(gè)的盒子。只有理解了盒子模型才能更好的排版，更好的編寫(xiě)網(wǎng)站界面

二、盒子的布局

把HTML中的元素看做是一個(gè)矩形的盒子（盛裝內(nèi)容的的容器），每個(gè)容器都是由元素內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。

ps：瀏覽器默認(rèn)的margin值為8px！

三、兩種盒子模型

• w3c的盒子模型： padding和border不被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度等于設(shè)置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型。

• IE的盒子模型： padding和border被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度就等于設(shè)置的width值，即使定義有border和padding也不會(huì)改變對(duì)象的實(shí)際寬度，即 ( Element width = width ) 。

ps：一般都使用標(biāo)準(zhǔn)的w3c盒子模型，如果需要使用IE的盒子模型，可以使用box-sizing屬性進(jìn)行修改。

• w3c的盒子模型

.test1{
	box-sizing:content-box;
	width:200px;
	padding:10px;
	border:15px solid #eee;
}

• IE的盒子模型

.test1{
	box-sizing:border-box;
	width:200px;
	padding:10px;
	border:15px solid #eee;
}

到此，相信大家對(duì)“html的盒子模型有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！