CSS基础教程（十） 盒子模型

在HTML文档中所有的标签元素均可以看做是一个盒子模型，在CSS中“box model”这个术语经常被用来设计和布局页面排版是使用。

CSS盒子模型本质上类似于盒子，它包括外边距、边框宽度、内边距、内容。它封装了HTML的标签元素。

一、盒子模型

其中：

Margin(外边距) - 清除边框外的区域，外边距是透明的，常用来设置外部与其他标签元素之间的距离。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的，常用来设置其与内部标签元素之间的距离。

Content(内容) - 盒子的内容，显示文本和图像，就是我们经常看到的内容部分。

<p>hello mihguan</p>
<p>hello mihuguan</p>

二、标签元素设置

上述实例如果想要两个p标签元素之间的距离增大，我们可以设置：

p{
margin:15px;
}

上述设置并不能做到精确的要求，因为只是要求两个p标签之间增加距离，但是标签元素的左右也增加了距离。如果想要设置盒子模型中任意一个方向的高度或者宽度，我们使用一下属性：

margin-top:可以单独设置margin盒子中的上边距离；

margin-right:可以单独设置margin盒子中的右边距离；

margin-bottom:可以单独设置margin盒子中的下边距离；

margin-left:可以单独设置margin盒子中的左边距离；

其他属性padding，border也具有top right bottom left四个方向。

三、实例说明

1、设置p标签的下边框为1px;

代码：

<style>
p{
    border-bottom: 1px solid black;	
}
</style>
<p>hello mihuguan</p>
<p>hello mihuguan</p>

2、设置span标签的边框为1px,内边距为5px;

span{
    margin-top:20px;
    border: 1px solid black;
    padding: 10px;	
}
</style>
<span>hello mihuguan</span>

学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~