盒模型的属性

原创已于 2025-05-19 21:28:46 修改 · 840 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2025-05-19 21:27:54 首次发布

盒模型

概念：在网页布局中，盒模型（Box Model）是一个非常重要的概念。它将网页中的每个元素都看作是一个矩形的盒子，这个盒子由内容区域（content）、内边距（padding）、内边框（padding)、外边距（margin）几个部分组成。

盒模型的属性

概念：

padding-border-margin模型是一个及其通用的描述盒子布局形式的方法。

边框

1、所有边框宽度

medium为默认宽度，thin为小于默认宽度，thick为大于默认宽度。length是由数字和单位标识符组成的长度值，不能为负值。

语法格式：border-width：medium | thin | thick | length

示例代码：

span{
    border-style:solid;
    border-width:thin;
}

1.2、上边框宽度

参数：该属性是复合属性。

语法格式：border-top:border-width || border-style || border-color

1.3、有边框宽度

参数：该属性是复合属性。

语法格式：border-right:border-width || border-style || border-color

1.4、下边框宽度

参数：该属性是复合属性。

语法格式：border-bottom:border-width || border-style || border-color

1.5、左边框宽度

参数：该属性是复合属性。

语法格式：border-left:border-width || border-style || border-color

1.6、边框颜色

说明：要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。

语法格式：border-color：颜色

边框宽度案例及案列代码

案例：

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子边框</title>
   <style>
     #container1{
            width: 100px;
            height: 100px;
            /* 上边框 */
            border-top: 2px red solid;
            /* 右边框 */
            border-right: 2px orange solid;
            /* 左边框 */
            border-left: 2px yellow solid;
            /* 下边框 */
            border-bottom:2px plum solid;
     }
   </style>
</head>
<body>
    </head>
<body>
    <div id="container1">
        原价票请来来来
    </div>
</body>
</html>

2、边框样式：

属性	说明
none	无边框（与任何指定的border-width值无关）
dotted	边框为点线
dashed	边框为短线
solid	边框为实线
double	边框为双线
groove	根据border-color的值画3D凹槽
ridge	根据border-color的值画菱形边框
inset	根据border-color的值画3D凹边
outset	根据border-color的值画3D凸边

语法格式：border-style：none

3、圆角边框

参数：length由浮点数字和单位标识符组成的长度值，不允许为负值。

语法格式:border-radius：length{1，4}

案例：

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            /* 上边框 */
            border-top: 2px red solid;
            /* 右边框 */
            border-right: 2px orange solid;
            border-left: 2px yellow solid;
            border-bottom:2px plum solid;
            /* 圆角边框 */
            border-radius: 10px 10px;
            /*  */
            padding: 50px;
            margin: 50px;
        }
        p{
            width: 100px;
            height: 100px;
            /* 上边框 */
            border-top: 1px blue solid;
            /* 右边框 */
            border-right: 1px yellow solid;
            border-left: 1px black solid;
            border-bottom:1px purple solid;
            /* 圆角边框 */
            border-radius: 10px 10px;
            /*  */
            padding: 60px;
            margin: 60px;
        }
    </style>
</head>
<body>
    <div style="border-style: dashed;">
        虚线
    </div>
    <div >
        <p>treasure</p>
    </div>
</body>
</html>