CSS盒模型讲解。
【摘要】 首先我们先介绍下什么是盒子模型： 盒子模型，英文即box model。所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面一个的图片我们讲解下盒子的...
首先我们先介绍下什么是盒子模型：
盒子模型，英文即box model。所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面一个的图片我们讲解下盒子的模型组成
外边距（Margin）；边框（Border）；内边框（Padding）；内容（Content）。
要设置边框，需要至少设置三个样式：
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style
我们来做一个简单的盒子效果。
下面是一些实现改效果的代码：
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid ;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 黑色边框。</div>
</body>
</html>
终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
小贴士：
CSS盒模型和IE盒模型的区别：
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）