css盒子模型的简单介绍

一、什么是盒子模型？ 盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是 HTML元素的内容。或者说这个盒子模型就是用来做页面布局的，其实就是我们做布局的一个思想，我们称它是盒模型 二、盒子模型的组成部分 内容区 content + 填充补白（里面的） + padding（内边距） + margin（外边距）+border（边框）

三、盒子模型的相关元素 1、margin的使用方法 解释：围绕在元素边框的空白区域是外边距。被称为边界/边距。 • margin-top 上外边距 • margin-right 右外边距 • margin-bottom 下外边距 • margin-left 左外边距

属性值四种方式： 方式1 margin:10px 5px 15px 20px; 上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px 方式 2 margin:10px 5px 15px; 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px 方式 3 margin:10px 5px; 上外边距和下外边距是 10px 右外边距和左外边距是 5px 方式4 margin:10px; 4个方向外边距都是 10px 2、padding的使用方法 解释; 元素的内边距在边框和内容区之间是内边距，也称为补白/填充。 • padding-top 上内边距 • padding-right 右内边距 • padding-bottom 下内边距 • padding-left 左内边距 属性值四种方式： 四个值： 上 右 下 左 三个值： 上 左右 左 两个值： 上下 左右 一个值： 四个方向

四、标准盒子模型的计算方法 高 = 上下border + 上下margin + 上下padding + height 宽 = 左右border + 左右margin + 左右padding + width 列如：一个盒子它的border是2px，padding是15px，content高是50px，宽是100px。 则高是：2border + 2 padding + 2高 = 22px + 215px +50px = 84px 宽是：2border + 2padding + 2高 = 2X2px + 2X15px +100px = 134px