CSS定位与div

一、div标记与span标记

div(division）区块容器标记，是一个块级元素，它包围的元素会自动换行。span是一个行内元素，它的前后不会换行。span标记可以包含于div标记中，成为它的子元素，反过来则不成立。

二、盒子模型

CSS定位与div

一个盒子模型是由content(内容)、border(边框)、padding(间隙)、margin(间隔)4个部分组成。盒子的实际宽度（或高度）是由content+padding+border+margin组成的。
border用于分离元素，border的属性主要有3个，分别是color（颜色)、width(粗细)和style(样式).其中style主要设置边框线类型（none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset)
CSS定位与div

padding控制content和border之间的距离
CSS定位与div

margin指元素与元素之间的距离。倘若将盒子模型比作展览馆里的一幅画，content就是画面本身，padding就是画面与画框之间的留白，border就是画框，margin就是画与画之间的距离
CSS定位与div

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{
           background-color:#a2d2ff;
           text-align:center;
           font-family:Arial,Arial, Helvetica, sans-serif;
           font-size:12px;
           padding:10px;
           width:200px;
        }
    </style>
</head>
<body>
    <div style="margin-bottom:50px;">块1</div>
    <div style="margin-top:30px;">块2</div> //分别改为30px和60px，可以看到明显的区别
    <!--<div style="margin-top:60px;">块2</div>-->
</body>
</html>

一、div标记与span标记

二、盒子模型

相关推荐