CSS盒子模型

最新推荐文章于 2024-03-01 11:37:06 发布

一只爱好编程的程序猿

最新推荐文章于 2024-03-01 11:37:06 发布

阅读量110

点赞数 1

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/qq_37881565/article/details/108320435

版权

CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

CSS盒子模型（Box Model）

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用的。

CSS盒模型本质是一个盒子，封装周围的HTML元素，它包括:边距，边框，填充和实际内容。

下面的图形展示一个盒子模型（Box Model）

说明:

Margin（外边距）-清除边框外的区域，外边距是透明的。
Border（边框）-围绕在内边距和内容外的边框
Padding（内边距）-清除内容周围的区域，内边距时透明的。
Content（内容）-盒子的内容，显示文本和图像。

元素的宽度和高度

当你指定一个CSS元素的宽度和高度属性时，只是设置内容区域的宽度和高度。完整大小的元素，你必须添加内边距，边框和边距。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
div {
    background-color: yellow;
    width: 300px;
    border: 25px solid blue;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>
	<h2>盒子模型</h2>
	<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
	<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 蓝色边框。</div>
</body>
</html>

效果图如下所示:

最终元素的总宽度计算公式是这样的:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

一只爱好编程的程序猿

关注

1
点赞
踩
1

收藏

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

CSS盒子模型（BoxModel）所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用的。CSS盒模型本质是一个盒子，封装周围的HTML元素，它包括:边距，边框，填充和实际内容。下面的图形展示一个盒子模型（BoxModel）说明:Margin（外边距）-清除边框外的区域，外边距是透明的。 Border（边框）-围绕在内边距和内容外的边框 Padding（内边距）-清除内容周围的区域，内边距时透明的。 Content（内容）-盒子的..
复制链接

扫一扫