標籤：w3c ie 盒子模型 布局
在辨析兩種盒子模型之前，先簡單說明一下什麼叫盒子模型。
原理：
先說說我們在網頁設計中常聽的屬性名稱：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。特點：每個盒子都有：邊界、邊框、填充、內容四個屬性；每個屬性都包括四個部分：上、右、下、左；這四部分可同時設定，也可分別設定；裡的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。（ 以上原理與特點摘於百度）<html><head><title>盒子模型</title><style>#box{width:100px;height:100px;padding:40px;border:solid 40px green;margin:20px;}div{font-size:30px;color:red;background-color:gray;text-align:center;}</style></head><body><div id="box">W3C盒子模型</div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
