Css之盒子模型

最近身体不舒服,昨天都要发的还没写完,今天先补上一点。等身体好了把昨天的给补上。

说到CSS,不得不提的,也是面试的时候最基础的一个问题就是 —— 盒模型;

我们知道,一个网页都是由许许多多的”盒子”构成的。这些盒子基本的要素有

  • Content (内容)
  • Padding (内边距)
  • Border (边框)
  • Margin (外边距)
  • Height (高度)
  • Width (宽度)

W3C的标准是:

Width = Content ;

1.jpg

IE盒子(怪异盒子)的标准是:

Width = Content + Padding + Border;

2.jpg

两个盒子模型都有他们适用的环境。

用怪异盒子定义的宽度,内边距和边框都不会把它撑大。

用标准盒子定义的宽度,内容就等于宽度,内边距和边框的的改变不会影响内容的大小。

所以两种盒子都没有消亡,一下子也争不出个好坏。所以CSS3里面给盒子添加了一个样式叫做

box-sizing: content-box|border-box|inherit;

box-sizing可以指定浏览器以哪一种方式来解释当前盒子的模型。

content-box即为W3C盒模型or标准盒模型

border-box即为IE盒模型or怪异盒模型

(勉强算把今天的给补上了。。。)