6、div盒子模型

最新推荐文章于 2025-05-31 14:06:44 发布

茶色小键帽

最新推荐文章于 2025-05-31 14:06:44 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：心得

本文链接：https://blog.csdn.net/qq_48773808/article/details/107878191

心得专栏收录该内容

13 篇文章

订阅专栏

本文介绍了CSS中的盒子模型，包括Content、Border、Padding和Margin四部分。详细讲解了width、height、background-color、border以及padding和margin的属性用法，特别是margin的特殊技巧，如水平居中、负值应用和外边距合并。还提到了元素溢出时overflow属性的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、盒子模型

1、模型图

在这里插入图片描述

Content：盒子里面的内容；
Border：盒子的边框；
Padding：内容与边框的距离；
Margin：盒子与盒子之间的距离。

2、`<div>`标签的快捷操作

在这里插入图片描述

3、`<div>`标签各个属性的用法

width、height

width、height表示内容的宽高，不是盒子的宽高；所以要留心盒子的尺寸，及时做出修改。
盒子的宽度：width + padding左右 + border左右；
盒子的高度：height + padding上下 + border上下；

background-color

设置盒子的背景色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .la{
            width:200px;
            height:200px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <div class="la">背景色</div>
</body>
</html>

在这里插入图片描述

border

border属性有：border-top、border-right、border-bottom、border-left四个，分别表示上、右、下、左边框；且border还有color、width、style样式；其中style有：实线：solid、虚线：dashed、点线：dotted。

border属性还可以简写：
1、border:15px green dashed;对四个边一起做的快捷方式；
2、border-bottom:15px green dashed;对单个边的快捷方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:200px;
            height:200px;

            background-color:gold;

            border-top-color:black;
            border-top-width:10px;
            border-top-style:solid;

            border-right:20px red dotted;

            border-bottom:15px green dashed;

        }
    </style>
</head>
<body>
    <div class="box">content</div>
</body>
</html>

在这里插入图片描述

padding

padding属性有：padding-top、padding-right、padding-bottom、padding-left四个，分别表示上、右、下、左内容与边框的距离。

border属性还可以简写：
1、padding：10px、20px、30px、40px;表示给上、左、下、右顺时针的方向加样式
2、padding：10px、20px、30px;表示给上、左右、下加样式；
3、padding：10px、20px;表示给上下，左右加样式；
4、padding：10px;表示同时给四个做样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:200px;
            height:200px;

            background-color:gold;

            padding-top:50px;
            padding-left:20px;
            padding-right:80px;
            padding-bottom:100px;
        }
    </style>
</head>
<body>
    <div class="box">content</div>
</body>
</html>

在这里插入图片描述

margin

与padding属性类似，表示盒子与盒子之间的而距离。

margin还有一些其他属性没有的技巧。

· margin设置水平居中：margin:x auto;x表示上下间距；auto表示自动水平居中，而且不管屏幕尺寸。
· margin可以设置负值让元素位移及边框合并。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:202px;
            height:156px;
            margin:50px auto;
        }
       .box div{
            width:200px;
            height:30px;
            border:1px solid green;
            background-color:gold;
            margin:-1px;
       }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

</body>
</html>

在这里插入图片描述
· 外边距合并：当两个垂直外边距相遇时，在设置他们的垂直间距的时候，如果两个都加了边距，哪呢取二者最大的边距，不会叠加。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .one{
            width:200px;
            height:200px;
            background-color:red;
            margin-bottom:30px;
       }
       .two{
            width:200px;
            height:200px;
            background-color:gold;
            margin-top:10px;
       }
    </style>
</head>
<body>
    <div class="one">只会取30px</div>

    <div class="two"></div>

</body>
</html>

在这里插入图片描述
·元素溢出：某些元素会超出div的大小，这时元素会溢出，这时候就可以用overflow解决。
overflow的属性：
1、visible：缺省值，溢出内容在div外可见；
2、hidden：隐藏溢出内容；
3、scroll：无论内容是否溢出，都会加入一个横纵向的滚动条；
4、auto：只有当元素溢出时，才会产生一个只有纵向的滚动条；