本文共 2697 字，大约阅读时间需要 8 分钟。

4.2、4.3盒子模型

首先要清楚盒子可以是页面中的任意元素

1.盒子模型：页面中的所有元素都可以看成一个盒子，占据着一定的页面空间。 盒子模型的组成： content（内容），内容占据着一定的空间，用height（高度）和width（宽度）来表示； 在内容和边框可以有空白距离，我们把这个空白距离叫做内边距，用padding来表示； 我们可以用border来设定一个边框； 在边框之外的距离称为外边距，用margin来表示；当页面上有多个盒子的时候，我们可以通过外边距margin来设定盒子之间的距离。 即盒子模型由content、height、width、border、padding、margin六部分组成，这六部分除了content之外其余的都是CSS样式的属性。 2.盒子模型的属性 border、padding、margin每个属性都可以带有子属性，top、bottom、left、right。 那么一个盒子的实际宽度和高度是由：content+padding+border+margin共同来组成的。 3.盒子模型例子： HTML部分代码

   
    		内容内容内容内容内容内容		内容内容内容内容内容内容		内容内容内容	
   

CSS部分代码：盒子的宽度是100px，高度是100px，盒子的边框用1px的实线来表示，另外内容与边框之间的边距，内边距为20px，边框之外10px的外边距。

#box{
   			width: 100px;			height: 100px;			border: 1px solid;			padding: 20px;			margin: 10px;		}

最终的效果：这里的border外面其实还有10px的外边距，这里都是白色没有看出来而已。

4.overflow属性：当盒子里的内容溢出盒子时，overflow属性取值。 overflow属性有三个值： （1）hidden：表示超出盒子部分的内容不可见； （2）scroll：显示滚动条； （3）auto：如果有超出部分，显示滚动条，若没有则正常显示。 5.border属性：几个子属性 （1）border-width：px、thin、medium、thick； （2）border-style：dashed（短横线组成边框）、dotted（点组成边框）、solid（实线边框）、double（双实线边框）； （3）border-color：边框颜色。 当把所有子属性统一写在border属性内部：width、style、color。 border非常常见的一个应用：进行水平分割线的一个制作

.line{
   			height: 1px;			width: 500px;			border-top: 1px solid #e5e5e5;		}

像上面的css代码，被引用进来就是一个水平分割线。这个水平分割线其实是一个盒子，在引用的时候，我们直接使用class属性设置成这个样式的名字就可以了，每引用一次就会插入一条水平分割线。

padding属性和margin属性

1.对浏览器默认的设置清零

*{
   	padding: 0;/* 只有当属性的取值为零的时候，它的单位才可以省略。 */	margin: 0;}

2.padding属性和margin属性的取值可以是px，也可以是%（外层盒子的宽度和高度）

3.border、padding、margin都分为四个方向，下面用margin为例，介绍这四个方向的取值。 （1）当把margin设置了一个值，四个属性都写在margin属性里面，这个时候它的取值只有一个就是四个方向上取值相同。

margin: 1px;

当我们拆开写的时候，最多可以写四个值，可以写成下面那样

margin: 1px 1px 1px 1px;

这四个值分别是：top、right、bottom、left。其实就是顺时针的一个顺序。

（2）当把margin设置了两个值，意味着把后面两个值（也就是bottom和left的值）省略，当省略的时候，bottom的值和top的值相等，left的值和right的值相等。

margin: 1px 2px;

相当于

margin: 1px 2px 1px 2px;

（3）当把margin设置了三个值，意味着把最后一个值（也就是left的值）省略，当省略的时候，left的值和right的值相等。

margin: 1px 2px 3px;

相当于

margin: 1px 2px 3px 2px;

注意：下面的margin属性设置值里面，虽然top和bottom的值是相等的，但是我们不能省略掉中间的bottom这个值，如果省略掉，位置关系就会发生变化，值的设置也会改变。

margin: 1px 2px 1px 3px;

注意：

（1）每个div标签做出来的盒子有一个换行的效果，每个div标签都会独占一行；

（2）margin的合并：两个盒子垂直方向的margin边距合并，合并后的margin取二者较大值，在水平方向不合并。

像下面这个图这样

下面通过一个例子来说明：

HTML代码：

   
    		box1	
   
		
   
    		box2	
   

CSS代码：

div{
   		width: 100px;		height: 100px;		margin: 15px 10px 20px 30px;/* 上 右 下 左 */		border: 1px solid red;	}

运行效果图：可以看到两个可以并没有排在一排，而是第二个和在第一个盒子的下面；这就是div标签做出来的盒子的换行的效果。而且再看两个盒子的上下边距，并不是第一个盒子的下边距20px和第二个盒子的上边距15px之和，而是第一个盒子的下边距20px（取了两者的较大值），这就是margin的垂直方向的合并。

4.水平居中：margin属性可以设定盒子的水平居中， （1）对于图片和文字，我们都可以用text-align属性来设置水平居中； （2）对于div水平居中： margin：0 auto；我们把margin的值设置为两个，第一个就表示上下，可以根据需求自己设定，第二个表示左右，设置为auto，这时浏览器会自动根据外层盒子的宽度和div区域的宽度相减除以2，计算出来他的margin-right和margin-left，这时两个值相等，就有了一个居中的效果。 margin：0 auto；实际应用非常多。

转载地址：http://npqzi.baihongyu.com/