CSS盒状模型_html/css_WEB-ITnose

CSS盒状模型是大多数CSS布局与定位的基础，它以包含4个成分的有界限的盒子来描述网页中的每个元素。盒状模型示意图如下图所示。

盒子的尺寸=内容尺寸(width+height) + 内边距(padding) + 边框粗细(border) + 外边距(margin)

一、在给元素设置背景时

　　IE作用域：content + padding

　　Firefox作用域：content + padding + border

二、border

　　border-color : red green;　　上下为红色，左右为绿色

　　border-width : 1px 2px 3px;　　上边宽为1px，左右边宽为2px，下边宽为3px

　　border-style : dotted dashed solid double;　　上右下左的边线分别为：点线、虚线、实线、双线

三、margin

　　1、若有两个上下排列的块级元素，分别为第一个块级元素设置 margin-bottom ，第二个块级元素设置 margin-top，则两块元素之间的距离并不是margin-bottom + margin-top的总和，而是两者中的较大者，这个现象称为margin的“塌陷”现象，也叫外边距合并。意思是说较小的margin塌陷到了较大的margin中，因此在实际操作中，当修改某些margin值后，页面效果而无变化的情况时，不要被表象所迷惑.

　　2、当两个元素产生父子关系时，即一个元素包含另一个元素时，子块的 margin 将以父块的 content 为参考。当父块和子块高度确定，且子块的高度超过父块的高度，则IE和Firefox会有两种完全不同的处理方法：

　　　IE : 会自动扩大父块，以保持子元素的margin-bottom的空间和父元素自身的padding-bottom的空间

　　   Firefox : 子元素将超出父元素的范围

           从css的标准规范来说，IE的处理方法是不合规范的，虽然此处它可能更符合前端开发人员的初衷，但它的这种方式，本应该由min-height属性承担