css盒模型

css盒模型

每个元素都是盒子的样子。呵呵。。只是通过编程给你要看的样子。它是这样的。

不光是div等块级元素，p等内联元素也是这个样子。

现在的网页时一个个盒子嵌套或连接形成的。

它分成4部分，content内容部分，padding内边距，border边，margin外边距。

通过实践就可知道他们的具体作用

1.content 内容

2.padding 内边距，常用来隔开内容与边框，美化和定位，留白。

3.border 边框，设个好看的边框～

4.margin 外边距，我理解为无形的隔膜，隔开一个个盒子。

 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px

 W3C 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际 大小 为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px

IE 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px。

在网页的顶部加上 DOCTYPE 声明后，浏览器就会按w3c标准解析，是w3c盒模型

在 CSS3 中：

box-sizing

box-sizing 有两个可选值，一个是默认的 content-box 一个是 border-box，选用后者，盒子模型将按 IE6 的方式进行处理。