盒子模型

盒子模型

像div，h1，p标签等块标签都如一个盒子一样，为了方便处理，为这些标签加上了一些属性。

border

border：边框，包含边框宽度，边框风格，边框颜色

<style>
    .box{
        width:600px;
        height: 300px;
        background: #FF00FF;
        border:5px solid #000000;
        border-top:none;
    }
</style>

padding

padding设置页面中一个元素内容到元素的边缘border之间的距离。可以调整内容在容器中的位置。
注：padding值是额外加在元素原有的大小至上的，若想保证元素原有大小不变，需要减去padding的大小之后再设置值。

<style>
    .box{
        width:600px;
        height: 300px;
        background: #FF00FF;
        border:5px solid #000000;
        border-top:none;
        padding: 50px;
    }
</style>

margin

盒子与盒子之间的举例，防止两个盒子上下贴在一起或者浮动起来后左右贴在一起。

margin: 0 auto;可以使得块元素在父元素中居中。