盒子模型的属性

努力小贼

于 2024-10-11 13:09:46 发布

阅读量427

点赞数 8

分类专栏： web前端文章标签：前端 html

本文链接：https://blog.csdn.net/2302_81399643/article/details/142849657

版权

web前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

每个HTML元素都可以看作是一个盒子，这个盒子包含了内容、内边距、边框和外边距四个部分。这些部分加在一起就构成了盒模型。

内容（Content）：盒子中呈现的实际内容，比如文字、图片等。
内边距（Padding）：内容与边框之间的空白区域，可以为这个区域设置背景色或背景图片。
边框（Border）：内边距和外边距之间的边界线，可以具有不同的样式、宽度和颜色。
外边距（Margin）：盒子与周围元素之间的空白区域，可以用来控制元素之间的间距。

在CSS中，可以通过设置不同的CSS属性来调整盒模型的各个部分。比如，可以使用padding属性来设置内边距的大小，border属性来设置边框的样式、宽度和颜色，margin属性来设置外边距的大小等。

一、边框

盒子模型的边框可以通过CSS的border属性来设置。border属性有多个子属性可以使用，包括border-width、border-top、border-right、border-bottom、border-left、border-style、border-color 和 border-radius。

其中border-width 可以一次性设置所有的边框宽度；border-color同时设置4面边框颜色时，可连续写上4种颜色，用空格分隔。

border-width：用于设置边框的宽度，可以取值为像素（px）、百分比（%）或预定义的值（thin、medium、thick）。

border-style：用于设置边框的样式，其参数为：

solid：实线
dotted：点线
dashed：虚线
double：双线
groove：3D凹槽
ridge：3D凸槽
inset：内边框
outset：外边框

border-color：用于设置边框的颜色，可以取值为颜色名称、十六进制值或RGB值。

border-radius：用来设置边框的圆角效果。

这些子属性可以分开设置，也可以合并在一起设置。例如：

border-width: 1px;
border-style: solid;
border-color: red;

可以简写为：

border: 1px solid red;

示例代码：


<head>
    <style>
        #img1{
            /* 设置盒子内容的宽高 */
            width: 200px;
            height: 200px;
            /* 设置盒子的边框厚度，颜色，样式（线型） */
            border: 3px blue solid;
            /* 设置盒子边框四个角的弧度 */
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <img src="../html5.jpg" alt="" id="img1">

</body>

运行结果：

二、外边距

盒子模型的外边距可以通过CSS的 margin 属性来设置。margin属性用于控制元素与其周围元素之间的间距。

margin 属性有多个子属性可以使用，包括 margin-top、margin-right、margin-bottom和margin-left，分别用于设置上、右、下和左的外边距值。这些值可以取像素（px）、百分比（%）或auto（自动）的形式。

可以使用以下的方式来设置外边距：

设置所有边距的值：margin: 上右下左;
设置上下和左右边距的值：margin: 上下左右;
分别设置每个边距的值：margin-top: 上; margin-right: 右; margin-bottom: 下; margin-left: 左;

示例代码：


<head>
    <style>
        #ins1{
            /* 设置盒子内容的宽高 */
            width: 300px;
            height: 50px;
            background-color: gray;
            /* 行内元素强制变成块级元素，进而可以自由变换宽高 */
            display: block;
            margin-top: 100px;
            margin-left: 25px;
            /* 单独控制边框四个角弧度，（左上角，右上角，右下角，左下角） */
            border-radius: 0px 0px 30px 0px ;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <ins id="ins1">下划线文本：行内元素</ins>

</body>

运行结果：

其距离网页上边距100px，距离网页左边距25px（其中网页默认外边距为8px，需要精确计算不要忘了加上哦~）

注：其中 display: block; 可将行内元素强制变成块级元素，进而可以自由变换宽高

三、内边距

盒子模型的内边距可以通过CSS的 padding 属性来设置。padding属性用于控制元素内容与元素边框之间的间距。

padding 属性也有多个子属性可以使用，包括padding-top、padding-right、padding-bottom和padding-left，分别用于设置上、右、下和左的内边距值。这些值可以取像素（px）、百分比（%）或auto（自动）的形式。

可以使用以下的方式来设置内边距：

设置所有边距的值：padding: 上右下左;
设置上下和左右边距的值：padding: 上下左右;
分别设置每个边距的值：padding-top: 上; padding-right: 右; padding-bottom: 下; padding-left: 左;

注：内边距属性不能负值

示例代码：


<head>
    <style>
        #img1{
            background-color: rgb(255, 134, 134);
            /* 设置盒子内容的宽高 */
            width: 200px;
            height: 200px;
            /* border-width: 10px;
            border-color: red;
            border-style: dashed; */
            /* 设置盒子的边框厚度，颜色，样式（线型） */
            border: 3px blue solid;
            /* 设置盒子边框四个角的弧度 */
            border-radius: 10px;
            /* 设置盒子内边距的大小 */
            padding: 20px;
            /* 设置盒子外边距的大小 */
            /* margin: 50px; */
            margin-bottom: 50px;
            margin-left: 17px;
        }
    </style>
</head>
<body>
    <img src="../HTML5.png" alt="" id="img1">

</body>

运行结果：