css盒子模型

浏览数：19 / 时间：2015年06月09日

在网站的布局中最常用到的就应该是"div"了，可以说网站就是由很多个"div"的组成的

那我们就来了解一下"div"他的结构和属性。

通过上图可以看出"div"主要有margin、padding、width、height、border、element组成。

一、element

主要就是"div"里的内容、也就是显示在网页上面的内容，可以是文字也可以是图片或是其他。

二、width

主要就是用来设置"div"的宽度，最常用的单位就是px（像素）。

三、height

主要用来设置"div"的高度，和width一样常用的单位就是px（像素）。

例子：

#box{

　　width：200px；

　　height：200px；

}

四、border

主要用来设置"div"的边框，一般情况有3个属性

例子：

#box{

　　border：1px solid black；

}

第一个属性”1px“就是设置"div"的边框线宽度为1px；

第二个属性"solid"就是设置"div"的边框线为实线，除了solid外还有double（双边框线）、dashed（虚线）、none（无边框线）等；

第三个属性"black"就是设置"div"的边框线颜色为黑色。

在css3中还可以设置边框圆角

#box{

　　border-radius:10px;

}

五、margin

主要用来设置"div"的外边距，主要有4个属性top、right、bottom、left

例子：

#box{　　

　　margin-top: 10px;
　　margin-right: 10px;
　　margin-bottom: 10px;
　　margin-left: 10px ;

}

也可以简写为

#box{　　

　　margin: 10px;

}

如果各个方向的margin值不一样可以写成（margin：top right bottom left）。

例子：

#box{　　

　　margin: 10px 20px 30px 40px;

}

还有一种marigin写法（margin：上下边距，左右边距）。

例子：

#box{　　

　　margin: 10px 20px;

}

在网页布局中一般用{margin：0 auto}来实现div的居中。

而且margin可以为负值

六、padding

主要用来设置"div"的内边距，与margin同理，不过需要注意的是设置padding后会使div的大小也改变。

div的实际宽度=width+padding-left+padding-right；

div的实际高度=height+padding-top+padding-buttom。

下面就把上面的所有属性整合一下

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>盒子模型</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            border-radius:10px;
            margin: 10px;
            padding: 10px;
        }
    </style>
<body>
    <div id="box">
        盒子模型
    </div>
</body>
</html>