11.22学习日志

  11.22学习日志

                                                                                                                                   盒子模型

  

认识盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。因此，可以说网页就是多个盒子嵌套排列的结果。

内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。

外边距是该元素与相邻元素之间的距离。

如果给元素定义边框属性，边框将会出现在内边距和外边距之间。

PS：doctype是盒子模型的基础，没有确定doctype，直接谈盒子模型就是耍流氓。

5.2 盒子模型相关属性

盒子的总宽度=width+左右内边距之和+左右边框宽度之和；

盒子的总高度=height+上下边框宽度之和+上下边距之和；

5.3 盒子模型边距

（1）内边距

padding属性用于设置内边距，复合属性。

.box{/*上右下左*/
padding:20px5px10px5px;
border:1pxsolid#09c;
width:100px;
height:100px;
}

（2）外边距

margin属性用于设置外边距，复合属性。实际中经常对块元素应用宽度属性width，并将左右的外边距设置为auto，可以使块级元素水平居中，实际工作中常用这种方式进行网页布局。

.header{
width:960px;
margin:0pxauto;
}

此外，为了更方便地控制网页中的元素，制作网页时，可以使用如下代码清除元素的默认内边距：

*{
padding:0;/*清除内边距*/
margin:0;/*清除外边距*/
}

（3）行内元素关于padding和margin的问题

行内元素不要设置上下的padding和margin，因为上下padding和margin不会起作用，当然，左右padding和margin还是会起作用。

（4）相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-botton和margin-top之和，而是取两者之中的较大者。这种现象就被称为相邻块元素垂直外边距的合并（也称为外边距塌陷）。

（5）嵌套块元素垂直外边距的合并

当块级元素进行嵌套时，如果父盒子没有设置上边框和上内边距的话，子盒子的上外边距和父盒子的上外边距会进行合并。合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

如果希望外边距不合并，那么可以为父元素定义1像素的上边框或上内边距。这里以定义父元素的上边框为例，在父p元素的css样式中假如以下样式：

.father{
border-top:1pxsolid#fcc;
}