css框模型

1.css框模型的概述

css框模型是由内边距，边框，外边距构成。如下图所示：

其中背景应用于内容，内边距和边框

我们可以通过设置页面内所有的元素来改变内，外边距。语法如下：

*｛
margin：0；
padding：0；                         *是指所有元素
｝

PS：上图中的height和width是值内容的宽高与边距无关。且外边距可以是负值，很多时候也是负值。

2.内边距

与外边距不同，内边距不支持负值。

除了常规的内边距设置语法：

h1｛padding：25px；｝                             设置标题1的内边距为25px

也可以采用全方位式的描述

h1｛
padding：25px 0ex 35em 20%                       该代码不仅表述了上下左右的内边距，同时使用了css4中关于长度的描述方式
｝                                                px是像素，ex是x的小写字母的高度，em是16px，以及百分数和不常用的pt（point）

和上面的简写完全一样的是使用

h1{
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
}

其中有必要提到的百分数，是根据父元素的长度决定的。比如width的长度发生改变，则内边距也发生改变。外边距也是一样。

3.边框

css中的边框（boder）是包含在内边距的一条或者多条线，它的关注点在三：宽度，颜色和样式。

最新的css2.1规定，元素的背景是内容，内，外边距的背景，且边框在背景之上。

边框的样式是非常重要的，也是非常有用的

4.外边距

外边距可以接受的长度表示方式是非常多的。除了常规的，还可以有英寸，自动这一类的，当然负值也是允许的。

值复制复制问题：

下面来看两个等价的东西：

h1{margin:1px 2px 1px 2px;}



h1{margin:1px 2px;}

这两个是相同的。

在css中规定了一个语法，就是当margin的值少于4个的时候，上边距的值代替下边距，右边距代替左边距，以及上边距代替右边距。

同内边距一样，外边距也可以设置单边，如：margin-right等

5.外边距合并（叠加）

它的总的规则是，当两个相互平行（w3cschool上说的是垂直，没理解，样子上是平行线的叠加啊）的外边距相遇的时候，两个外边距合并，并且长度按照长的那个来。

具体的图片解析请在w3cschool上查看。