CSS 盒子模型

当前位置：文江博客话题详情

CSS 盒子模型

发布于 2021-10-29 15:20:50 字数 1575 浏览 819 评论 0

HTML+CSS 中，比较重要的概念就是盒子模型，理解这个盒子模型之后，更加有利于在网页进行排版；下面我们就从以下几方面去了解盒子模型：

盒子模型的认识
盒子模型示例
盒子模型通过浏览器 F12 分析
盒子模型中长度计算法
盒子模型总结

Css 盒子模型介绍：

在 HTML 里面每个元素都可以看成一个盒子，这个盒子由各个内容组成；

Context 表示：具体的内容
Padding 表示：内边距从 Context 到 Border 的距离
Border 表示：边框从 Padding 到 Margin 的距离
Margin 表示: 外边距从 Border 到最外面的距离

盒子模型示例

例：新创建一个 HTML 文件，在 HTML 文件里面写上下面的内容：

<html>
<head>
<title>Css 盒子模型</title>
<style>
div{
width:200px;
padding:10px;
border:1px solid blue;
margin:5px;
}
</style>
</head>
<body>
<div>苹果 梨子 西瓜</div>
</body>
</html>

盒子模型分析
打开浏览器，访问该页面，并且按照 F12 进行查看页面信息：
出现下面的效果:

右侧的图示就是一个盒子模型；从右下角的图中，我们可以看到最外层是 margin
Margin 下面是 border，过了是 padding 最里面的是 Context 内容；而且每层之间设置的宽度，可以看出效果; 一个元素的实际宽度，就等于各个宽度之和，计算公式如下面说明;

计算 div 的实际宽度

从图可以算出 div 的实际宽度：
Div 的实际宽度 = 左 Margin+左 border+左 padding+context + 右 Margin+右 border+右 padding；
对应的数字的值：5+1+10+200+10+1+5 = 232
但是当鼠标放到对应 div 上面显示宽度是 222，这是什么原因导致？