Java-CSS 盒子模型(Box Model)

最新推荐文章于 2024-02-07 11:35:12 发布

树叶过河 Z

最新推荐文章于 2024-02-07 11:35:12 发布

阅读量848

点赞数

CC 4.0 BY-SA版权

文章标签： Java-CSS 盒子模型(Box Model)

在CSS中，“box model”用于设计和布局。所有HTML元素可看作盒子，CSS盒模型封装周围HTML元素，包含边距、边框、填充和实际内容，允许在元素间放置空间，其总尺寸为border+padding+margin+内容宽度。

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

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素
在这里插入图片描述

盒子模型总尺寸=border+padding+margin+内容宽度

<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
    }
</style>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>