盒子模型 - 概念

最新推荐文章于 2024-09-04 23:24:54 发布

X20050417

最新推荐文章于 2024-09-04 23:24:54 发布

阅读量128

点赞数 5

文章标签： html css 前端

本文链接：https://blog.csdn.net/X20050417/article/details/140084456

版权

盒子模型是CSS的一个重要概念，网页的所有元素都可以看成一个盒子。每个盒子由4个属性组成!
内容(ontent) 边框(Border) 内边距(Padding) 外边距(Margin)

内容(Content)
有3个属性:width、height和overflow。width和height属性指定盒子内容区高度和宽度，当内容过多超出，使用overfow属性指定溢出处理方式。

内边距(Padding)
内容区与各方向边框之间的距离，有5个属性padding-top、padding-bottom、padding-left、padding-right，以及综合了以上4个方向的简写内边距属性padding。

边框(Border)
边框属性有border-width、border-style、border-color，及简写边框属性border，其中，border-width指定边框宽度，border-style指定边框类型，border-color指定边框颜色

外边距(Margin)
是两个盒子之间的距离，可能是子元素与父元素之间距离，也可能是兄弟元素之间距离。属性有5个:margin-top、margin-botom、margin-let、margin-right，以及简写外边距属性margin。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型</title>
    <style type="text/css">
        .A{
            /* 这是div的高和宽 */
            width: 900px;
            height: 500px;


            /* 这是边框的宽度 */
            border:rgb(0, 21, 255) 20px solid ;
            /* 背景颜色 */
            background-color: rgb(242, 255, 0);

            /* 内外边距 */
            padding: 100px;
            margin: 50px;

            box-sizing: border-box;
            /* 字体颜色 */
            color: rgb(165, 42, 56);
        }
    </style>
</head>
<body>
    <div class="A">
        css盒子模型
    </div>
</body>
</html>

X20050417

关注

5
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒子模型 - 概念

边框属性有border-width、border-style、border-color，及简写边框属性border，其中，border-width指定边框宽度，border-style指定边框类型，border-color指定边框颜色。内容区与各方向边框之间的距离，有5个属性padding-top、padding-bottom、padding-left、padding-right，以及综合了以上4个方向的简写内边距属性padding。盒子模型是CSS的一个重要概念，网页的所有元素都可以看成一个盒子。
复制链接

扫一扫