CSS盒模型

標籤：2-2   pad   兩種   標準   包含   box   image   tom   margin   

一、CSS盒模型基本概念

        基本概念：margin、border、padding、content

     1. IE盒模型與標準盒模型的區別

        我們先來看一看對於這兩個盒模型，其實本質上是一樣的，都包含盒模型的基本屬性，但是，這兩種盒模型的區別就是對於寬高計算的不同。

        標準盒模型：width = content-width； height = content-height；

        IE盒模型：width = content-width + padding-left + padding-right + border-left + border-right；height = content-height+ padding-top+ padding-bottom+ border-top+ border-bottom；

        那麼我們怎麼去設定盒模型的標準呢？

        答案就是CSS3中的一個屬性box-sizing。這個屬性有兩個參數：border-box(IE模型)  content-box(標準模型).

CSS盒模型