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

十多年的從化網站建設經驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。成都全網營銷的優(yōu)勢是能夠根據用戶設備顯示端的尺寸不同，自動調整從化建站的顯示方式，使網站能夠適用不同顯示終端，在瀏覽器中調整網站的寬度，無論在任何一種瀏覽器上瀏覽網站，都能展現優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)公司從事“從化網站設計”,“從化網站推廣”以來，每個客戶項目都認真落實執(zhí)行。

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

一、引入在網站的制作中，一個復雜的頁面，被劃分為一個一個的小塊。通過這種劃分，把網站的開發(fā)過程化整為零、化繁為簡，以達到減少開發(fā)工作，減輕維護壓力的目的。在網頁中，把這種劃分后的小塊形象的看成一個個的盒子。只有理解了盒子模型才能更好的排版，更好的編寫網站界面

---

二、盒子的布局

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

ps：瀏覽器默認的margin值為8px！

---

三、兩種盒子模型

w3c的盒子模型： padding和border不被包含在定義的width和height之內。對象的實際寬度等于設置的width值和border、padding之和，即 ( Element width = width + border + padding ) 此屬性表現為標準模式下的盒模型。

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

ps：一般都使用標準的w3c盒子模型，如果需要使用IE的盒子模型，可以使用box-sizing屬性進行修改。

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;}四、總結

W3C盒模型是與IE盒模型的區(qū)別就是對寬高的定義不同。

W3C認為：寬高是內容區(qū)的寬度（只包含節(jié)點顯示的具體內容）

IE認為：寬高是顯示效果的實際效果（包含節(jié)點的全部內容）

相關推薦：《html視頻教程》

新聞標題：html的盒子模型有幾種
文章鏈接：http://www.rwnh.cn/article28/cpiojp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供外貿建站、關鍵詞優(yōu)化、網站收錄、外貿網站建設、云服務器、標簽優(yōu)化

廣告

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