【CSS】盒子模型

最新推荐文章于 2022-01-06 07:50:58 发布

琚建飞

最新推荐文章于 2022-01-06 07:50:58 发布

阅读量521

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Gnd15732625435/article/details/52714541

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

前言

首先我们来看一张画框的图：

我们很容易看到它的一些属性：

外边距（margin）：上下左右
内边距（padding）：上下左右
内容（content）：宽和高
画框：宽

CSS盒子模型

每个画框都是一个盒子。在CSS中，我们定义了标签的以上属性，就像是在拼装一个盒子，故称之为盒子模型。示例代码：

<body>
    <div class ="test_menu">栏目一</div>
    <div class ="test_menu">栏目二</div>
    <div class ="test_menu">栏目三</div>
    <div class ="test_title">标题栏</div>  
</body>

.test_menu,.test_title {
    color:#663300;/*文字颜色*/
   border-width:1px;/*边界线宽度*/
    border-color:#f00;  /*边界线颜色*/
    border-style:solid; /*实线样式，例如实线，虚线*/
    /*border:1px solid #f00;  这一个和上面的三个是一样的效果*/
    margin-top:10px;/*外上边距为10px*/
    padding-top:10px;/*内上边距为10px*/
    padding-left:10px;/*内左边距为10px*/
    padding-bottom:10px;/*内下边距为10px*/
    width:200px;/*内容的宽*/
}

效果图：