菜鸟教程：盒子模型

前言

模型是前端写页面的基础，也是最重要的基础，我们写出来的代码其实放到浏览器中就是一个一个盒子将元素包裹然后排列呈现出来的结果。

一、盒子是什么？

每个元素在页面中都会形成一个矩形区域，我们能将其称之为盒子。在浏览器中显示出来的界面就是这样一个一个盒子拼凑排列然后展示出来的。

二、盒子类型

盒子的类型分为两类，分类的依据是它的display属性

1.行盒

行盒的display属性是inline，在页面中它是无法独占一行的。最典型的行盒就是.

2.块盒

块盒的display属性是block，与行盒相反，它在页面中会独占一行，最典型的块盒就是

三、盒子的组成部分

1.内容

我们一般把盒子的内容部分称呼为内容盒，通过width、height来设置盒子内容的宽高，当我们没有给它设置宽高是，盒子就会被内容撑开，其宽高也就是内容的宽高

2.填充

我们一般称呼这部分为内边距，也就是盒子的边框到盒子的距离，通过top、right、button、left（上右下左）来设置距离。一般设置内边距是为了让盒子里的内容调整位置，比如说文本内容需要居中是就可以通过调整父元素的内边距来使其居中。

3.边框

边框用border来表示，它有三项需要设置，
1.边框的样式，border-style如：实线、虚线。。
2.边框宽度border-width：也就是粗细程度，单位时px（像素）
3.边框颜色border-color ：设置边框颜色，当没有设置时会显示为字体颜色。
简写{border：1px solid #fff;}

4.外边距

外边距用margin表示，它代表的是盒子边框与其他盒子的边框之间的距离，我们通过margin-top、margin-right、margin-button、margin-left（上右下左）来改变其数值，

如图：

其中最外面一层margin就是外边距，实线border表示边框，padding表示内边距，而最中间就是内容1040x70，其中1040表示宽1040px，70就是盒子高70px

总结

盒子模型是重中之重，在书写网页代码之前，一定要对页面进行盒子模型的规划，一般网页稍微复杂一点都会出现盒子包裹盒子的情况，这个时候我们在写代码之前一定要先把盒子分划出来，然后一个盒子一个盒子去写。
在布局时需要注意，盒子的display属性是可以改动的，虽然元素是行盒，但是我们在需要时也可以通过设置display属性为bolck来使它变为块盒，反之亦然。盒子的内外边距的使用也是需要注意的，当我们需要改变盒子的位置时，选择内边距和外边距都是有效果的，具体情况就要灵活运用。同时边框的宽度也是会对盒子整体产生影响，所以在设定盒子的宽高时边框宽度，内边距，外边距都是需要考虑进去的。