CSS框模型笔记

框模型（Box Model）规定了元素框处理元素内容、内边距（padding），外边距（margin）,边框（border）。边框位于外边距与内边距之间。框模型里所说的高度和宽度是指的是元素的高和宽，是指的内边距以内位置，即元素框的最内部分，它也是实际的内容。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，因为要考虑到两边都是这样的，要15px*2才行。但是内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。外边距可以是负值，而且在很多情况下都要使用负值的外边距。

CSS padding 属性定义元素的内边距，padding 属性接受长度值或百分比值，但不允许使用负值。

h1 {padding: 10px;}

h1 {padding: 10px 0.25em 2ex 20%;}

一个是h1元素的个边都有10像素的内边距。第二个是按照上右下左的顺时针顺序设置个边的内边距，且各边均可以使用不同的单位或百分比值，如果只有两个参数，那么第一个参数表示的是上和下，第二个参数表示左和右。或者使用单边属性：

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。百分比的数值往往都是继承得来的。

CSS border

元素的边框就是围绕元素内容和内边据的一条或多条线。每个边框有 3 个方面：宽度、样式，以及颜色。

border 简写属性，用于把针对四个边的属性设置在一个声明之中。它的值有border-width，border-style，border-color。

p 
{
border: medium double rgb(250,0,255)
}

轮廓是在边框边缘的外围，这个边框的属性是和轮廓一样的，但是边框可以有四个不同的边，轮廓不行。

border-style   属用于设置元素所有边框的样式，或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。它的样式跟轮廓outline-style一样，但是这里有更多的参数，参数为一个时，是所有边框。两个时第一个是上边和下边框。三个参数时，第一个参数和第三个参数表示上下，第二个参数表示 左右一起的。四个参数时是上右下左顺时针边框。border-style还有个hidden属性，与none相同。但是在应用于表中，hidden可以解决边框冲突。

border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。属性值与outline-width一样。但它与border-style一样可以有1、2、3、4个参数。

border-color  简写属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。同上，默认值不是反转颜色，是transparent，透明。

与简写属性相对的是非简写属性，这就是四个边各自属性了，

border-bottom、border-left、border-right、border-top四个也是简写属性

其中每个简写属性下又有三个非简写属性：border-XXX-color、border-XXX-style、border-XXX-width。意思很简单。

CSS margin

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的空白。

margin 简写属性在一个声明中设置所有外边距属性或者设置各边上外边距的宽度。块级元素（如<div>）的垂直相邻外边距会合并（下面讲到），而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值。该属性可以有 1 到 4 个参数值，与border-style一样的。margin 属性接受任何长度单位，可以是像素、英寸in、毫米或 em。还有百分比。默认值为0。在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要作了声明，就会覆盖默认样式。

对应的有四个非简写属性：margin-bottom，margin-left，margin-right，margin-top。意思也很简单。

CSS外边距合并

当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。意思是，上面的margin-bottom设置为20px，下面的块级元素的margin-top设置为10px，那么它们将会产生合并，合并之后的外边距是大吃小，为20px，不是20+10=30px。

当一个元素包含在另一个元素中时，如果父亲元素不设置内边距和边框，那么子元素的上外边距将于父元素的上外边距合并（叠加）。只有上外边距会合并。如果父为20px，子为10px，上边距合并之后就是20px。

外边距可以与自身发生合并，假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。合并规则同上面的一样。如果这个外边距遇到另一个元素的外边距（垂直相遇或者一个包含另一个），它还会接着发生合并。这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

外边距合并是有意义的，假如一篇文章有几个段落，假如没有外边距合并，段落之间的外边距是上外边距的两倍。有这样的设定之后，段落之间的外边距和上外边距相同。

另外：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。