盒子模型

网页布局的本质：

            1、用css设置好盒子的大小，摆放盒子的位置

            2、将网页元素放入盒子里面

盒子模型由内容、边框、内边距、外边距四部分组成

盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

边框（border）

1、border-width 定义边框的粗细  属性值用px

2、border-style 定义边框的样式   

    常用的属性值

            solid实线、dashed虚线、dotted点线

3、border-color  定义边框的颜色

边框的组合写法

border： width  style color；不按顺序

例如.nav { border: 1px solid red;}

在设置表格的单元格时，cellspcing=“0”，将单元格与单元格之间的巨鹿设置为0，但是两个单元格之间的边框会出现重叠，从而使边框变粗，这时需用css属性使其变细

border-collapse：collapse  表示相邻边框合并在一起

collapse 单词是合并的意思

例如：

<style>

table {

width: 500px;

height: 300px;

border: 1px solid red;

}

td {

border: 1px solid red;

text-align: center;

}

table, td {

border-collapse: collapse;  /*合并相邻边框*/

}

</style>

内边距（padding）

padding是内容与盒子之间的距离

padding属性值：left、right、top、bottom

padding复合写法：

                一个值代表上下左右边距

                两个值代表上下边距、左右边距

                三个值代表上、左右、下边距

                四个值代表上、右、下、左边距

注意：给盒子设置内边距时会撑大盒子的大小

解决：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小

当然也有不影响盒子大小的情况：

如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。

外边距（margin）

外边距是盒子与盒子之间的距离

margin属性值：left、right、top、bottom

复合写法跟padding一样

清除元素默认的内外边距：

* {

            margin： 0；

            padding： 0；

}

外边距合并：

1、相邻块元素垂直块元素外边距的合并

当上下相邻的两个块元素上面的设置了margin-bottom，下面的设置了margin-top，它们之间的间距并不是margin-bottom+margin-top，而是选择其中较大的值作为二者之间的间距。

解决方法：只给其中一个盒子设置边距

2、嵌套块元素垂直外边距的合并（塌陷）

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框

，父元素的上外边距会与子元素的上外边距发生合并

，合并后的外边距为两者中的较大者

解决方法：

1、可以为父元素定义上边框。

2、可以为父元素定义上内边距

3、可以为父元素添加overflow:hidden。

块级盒子水平居中：

可以让一个块级盒子实现水平居中必须：

盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，

如：.header{ width:960px; margin:0 auto;}

常见的写法，以下下三种都可以。

margin-left: auto;  margin-right: auto;

margin: auto;

margin: 0 auto;