学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>css>>基础教程>>

CSS基础教程(十) 盒子模型

发布时间:2020-01-06点击:

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

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

    一、盒子模型

    其中:

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

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

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

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

    比如说:

    <p>hello mihguan</p>
    <p>hello mihuguan</p>
    
    这个标签在显示的时候其margin、border、padding均为0px,并且透明,所以我们看到的只是其content的盒子。

    二、标签元素设置

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

    p{
    margin:15px;
    }
    这样设置的话,标签margin盒子宽度为5px;这样就是说两个p标签之间的距离增加了5+5=10px.

    上述设置并不能做到精确的要求,因为只是要求两个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>
    效果如下:

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

赞一个(0)     踩一个(0)    

相关链接

搜索

昵称:*
邮箱:
电话:
评论: