盒模型与浮动

H5中，在学习的前期，要理清布局规则很重要。一个良好的页面，布局思路要清晰，同时不能有任何地方拖泥带水。
所以本篇的内容讲解的就是盒模型与浮动。在一个文档中，每个元素都被表示为一个矩形的盒子。确定这些盒子的尺寸, 属性 — 像它的颜色，背景，边框方面 — 和位置是渲染引擎的目标。
在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个部分：外边距部分, 边框部分, 内填充部分与内容部分。这个就是盒模型，盒模型的作用：为了充分理解div+css模型的定位功能,利用盒子模型这样的布局方式代替了传统的表格布局方式。下图就是盒模型是示意图。属性为content（内容）、padding（内填充）、margin（外边距）、border（外边框）。

当我们第一眼看到一个页面的时候，我们会感到页面东一块，西一块，很难下手，捉摸不透，那么我们引入一个DIV标签，也就是本篇文章的盒模型所使用的标签。首先我们刚接触他的时候放入三个盒子：

样式： 当我们就改变了box2的样式，添加了一个margin-top属性，使他与其他元素空出50px的距离。那么便可以看到这样的画面

看到橘黄色的色块与粉色的色块之间有了一个空隙，这个就是margin-top设置出来的50px的空隙，因为页面背景是白色的，所以看到的也就是白色的样子。除了margin-top还有margin-right、margin-bottom、margin-left几个方向。最后，同理，实现其他方向上的布局。
那还有人说，蓝色子盒子的位置怎么调动呢？Margin可以用吗？我只能说，可以实现，但不推荐。毕竟我们还有padding属性，padding控制子元素与父元素之间的距离。我们来试一下：

我们在box2中也就是父元素中添加padding-left属性：

可以看到，蓝色的边框与其父盒子的最左端也有了一点的空隙。那么这个时候，我们已经可以实现了简单的上下左右位置的移动。和margin一样，padding也有四个方向。这两个元素的缩写有很多情况，padding（margin）:后一个属性值，表示四周都要求这样的间隙；两个属性值，前后分别代表上下和左右；三个代表上，左右，下；四个代表上，右，下，左。
再然后是盒子自带的“纸板”啦，也就是边框属性，border。
我们给box1加上边框：

可以看得到在粉盒子的周围出现了宽度为2px的边框：

在此时，边框会占用一点空间，它把粉盒子也往右下角挤压了，同时，边框外围与box2的边距依然是50px，而不是48px。
到这里，我们已经把盒子的全部模型属性讲完了，从最里的padding（内填充）到内容本身的盒子，到紧贴着盒子的border（边框），到盒子与盒子之间的margin（外边距）。

可是还是会有疑问，那如果页面同一行出现两个内容呢？上下布局的盒子通过padding也只是实现了一个内容的向右靠拢。
那么是时候该提出浮动的概念了。
浮动，你可以把父元素想象成一个水缸，里面装了水，子盒子是泡沫，在水的浮力下，盒子都飘在的水面上，只是可惜了，父盒子（水缸）有块隔板把水缸给盖住了，所以泡沫的子盒子漂不出父盒子的范围。
我们简单的试验一下，在box2里添加第四个盒子：

样式为：

可以看到这样的画面：

看到金色的盒子4就靠在盒子3的左边。
浮动（float）也有两个属性值最常用，一个是left（左浮动），一个是right（右浮动），字面意思，一个从左边开始（吸附在水缸的左侧）浮动，一个从右边开始浮动。我们只需要在两个子元素添加浮动属性便可以了。当然，设置两个子元素的位置，继续用margin便可以了。
以上便是全部的盒模型与浮动的知识，可以多尝试一些来熟悉这些属性。
加油，逆战2020.