HTML CSS盒子模型

最新推荐文章于 2024-08-06 14:46:11 发布

龙之华2

最新推荐文章于 2024-08-06 14:46:11 发布

阅读量511

点赞数 1

分类专栏： HTML CSS盒子模型文章标签： html css

本文链接：https://blog.csdn.net/weixin_46394746/article/details/117533864

版权

本文介绍了CSS盒子模型，包括内容区域、内边距、边框和外边距的概念，并通过示例详细讲解了边框(border)、内边距(padding)和外边距(margin)的设置方式及效果。

摘要由CSDN通过智能技术生成

1、CSS盒子模型简介
在HTML页面中，每一个元素都是一个规则的矩形，因此每一个元素都由一个盒子模型来表示，盒子模型由四个区域组成：
（1）content box：内容区域
（2）padding box：内边距区域
（3）border box：边框区域
（4）margin box：外边框区域
如下图：
补充：补充：图中400*100区域就是内容区域
2、CSS边框（border）
作用： border可以设置元素边框的：宽度、样式、颜色；
示例：

<body>
    <!--建立一行-->
    <div>我不会啊</div>
</body>

<!--style设置-->
    <style>
        div{
            border: 10px dashed black;
            width: 200px;
            height: 200px;
        }
    </style>

浏览器展示效果：