CSS(1) CSS盒子模型

1、概述

    html任何一个元素都可以看作一个盒子，这个盒子不可见，但是它存在于页面的每个角落，也正是由于它不可见、不直观，很多人在初学CSS的时候不能透彻得理解盒模型的概念，导致在页面布局中出现各种各样的问题。

    一个盒子包括了content（实际内容）、border（边框）、padding（内边距）和margin（外边距）。

2、content

    盒子的内容，显示文本和图像。我们给元素设置的width和height其实是content的宽高，如果指定高度大于显示内容所需高度，多余的高度会产生类似内边距一样的效果；如果指定高度小于显示内容所需高度，会出现滚动条。如果元素内容的高度（手动设置content的height时）大于元素边框的高度，浏览器的具体行为取决于overflow属性。

3、border

    元素的边框是围绕元素内容的内边距的一条或多条线。边框由粗细、样式和颜色三部分组成，如border:1px solid red。

4、padding

    content到border之间的空白区域，内边距是透明的，取值不能为负，受盒子的Background属性影响，padding是有背景的。

5、margin

    在元素外创建额外的空白区域，可理解成元素与元素的间距，这个空白区域通常指不能放其他元素的区域（可用定位的方式在这个空白区域中放元素），而且在这个区域中可以看到父元素的背景（padding能看到本元素的背景）。margin经常取负值实现定位的作用。

    外边距问题：

    1.相邻兄弟元素外边距合并问题：当两个垂直外边距相遇时，它们将进行合并最后形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

    对于水平相邻的元素，它们的水平间距是相邻外边距之和。

    2.父子元素外边距合并问题：当一个父元素没有border、padding，且子元素有margin-top时，子元素的margin-top会成为父元素的margin-top，除非为父元素添加border-top或padding-top

    margin虽不可见，但是它确实在文档中占据了空间，我们要区分两个概念即：盒子所占空间(计入margin)和盒子实际的大小(不计入margin)。

6、两种盒子模型

    盒模型有两种，分别是ie盒子模型（IE6以下版本浏览器)和标准w3c盒子模型，区别在于前者content的宽度和高度包括了border和padding。

    CSS3中，可用box-sizing属性为元素设置盒模型。

    box-sizing有三个取值：

    1.content-box:使元素遵循标准 w3c 盒子模型（默认值）。

    元素的实际宽度=width+(padding-left)+(padding-right)+(border-left)+(border-right)

    元素的实际高度=height+(padding-top)+(padding-bottom)+(border-top)+(border-bottom)

    元素所占空间宽度=元素实际宽度+(margin-left)+(margin-right)

    元素所占空间高度=元素实际高度+(margin-top)+(margin-bottom)

    在显式设定了width和height的前提下，padding和border的设定会加大盒子的宽高

    2.border-box:使元素遵循ie 盒子模型。

    元素的实际宽度=width

    元素的实际高度=height

    元素所占空间宽度=元素实际宽度+(margin-left)+(margin-right)

    元素所占空间高度=元素实际高度+(margin-top)+(margin-bottom)

    元素内容的宽度=width-(padding-left)-(padding-right)-(border-left)-(border-right)

    元素内容的高度=height-(padding-top)-(padding-bottom)-(border-top)-(border-bottom)

    在显式设定了width和height的前提下，padding和border值的设定会减少元素内容的宽高

    不管如何设置padding和border（小于width/2），它只在盒子里面伸缩，不影响整体的宽高，但它会影响content，如果padding和border太大，会把内容挤掉。

    3.inherit:规定应从父元素继承 box-sizing 属性的值。

    注意：行内元素的宽高始终为元素内容的宽高

        width/height、margin是可以设置为auto的，那么这个auto到底是多大呢？

        假设padding和border为0，以width、margin-left、margin-right为例进行说明。

        这3个值加起来往往是父级元素的width值。

        如果任意一个为auto，另外2个未固定值，那么这个auto=父元素width-两个固定值之和

        如果设置margin-left，width为auto，margin-right为固定值，width=父元素width-子元素margin-right margin-left为0

        如果设置width，margin-right为auto，margin-left为固定值，width=父元素width-子元素margin-left margin-right为0

        如果设置margin-left，margin-right为auto，width为固定值，auto=(父元素width-子元素width)/2 表示将元素居中

        如果这3个属性都设置为auto，子元素的width=父元素width，margin-left、margin-right为0

        总结：只有margin-left和margin-right同时为auto且width为固定值时，margin的auto才有意义，否则margin的auto都为0

7、两种盒子模型宽高计算示例

    假设一个盒子的 margin 为 20px，border 为 2px，padding 为 10px，content 的宽为 200px、高为 50px。

    当box-sizing为content-box时：

    元素的实际宽高:200+10*2+2*2=224,50+10*2+2*2=74

    元素所占空间宽高：224+20*2=264,74+20*2=114

    当box-sizing为border-box时：

    元素的实际宽高:200,50

    元素所占空间宽高：200+20*2=240,50+20*2=90

    元素内容宽高：200-10*2-2*2=176,50-10*2-2*2=26