1,box模型：盒子模型
概述：我们所看到的每个HTML网页都是由一个的HTML标签拼凑起来的。每一个HTML标签都是显示为一个个的四方的盒子形态。网页就是由这样的标签组合在一起形成的。
电脑的显示器，高度如果不够的话，我们的页面可以向下拉，但是在宽度上限制的比较严格，因为我们的阅读习惯绝对我们接受不了左右拉动页面浏览。
所以我们必须将一行的内容尽可能显示在浏览器的一屏宽度内，所以我们需要计算好一行内，每个HTML标签应该占多宽的位置。
这个实际的占地宽度计算方式：
我们想要知道计算的方式就必须知道每个标签占位置的方式有那些？
1， width：宽度//在除了IE浏览器之外，我们的设置宽度是从文字或者图片内容的左侧到右侧的宽度。
2，内容到HTML标签的边框距离：叫做内边距：padding:上，右，下，左
3，HTML标签自身的边框：border:它的边框的宽度也是占位置的。
4，HTML标签和HTML标签之间的距离，叫做外边距：margin：上，右，下，左
每一个HTML标签都有四部分组成：内容宽度：contentwidth，内容到HTML边框的距离叫做padding，HTML自身边框的宽度：border-width；HTML到另一个HTML的距离叫做：外边距
margin
每一个HTML的实际占地宽度=width+border+padding+margin
如果浮动之后：因为浮动之后，所有参与浮动的元素都变为了块元素，那么在水平方向上：两个块之间的margin值，是相加的，在垂直方向上，上下margin值，以大的为准：
例如：div1和div2浮动成一行：div1：margin-right：20px;div2:margin-left:25px;div1到div2之间的间距是45px;
div1和div2垂直排列，div1：margin-bottom:30px;div2:margin-top:20px;div1到div2的垂直距离是30px;
在父级标签内嵌套有子级块标签，那么如果我们给子级标签设置margin-top:,这个时候，浏览器会认为父级和子级共同拥有一个margin-top：父级和子级会同时下降，这种现象叫做边距合并：
解决方案：最佳解决方案：父级和子级高度设置和子级一样，给父级使用padding-top:取值为子级需要下降的高度。就可以了
如果父级内的子级标签里面只有行标签或者行内块标签，那么我们可以给子级设置为：display:inline-block直接给子级使用margin-top也可以实现
写HTML做静态还原的时候：
1，HTML先写布局：布局的原则：凡是处在一行的内容，背景色不等于内容宽度的，背景色一个div单独写，内容一个div单独写，一般都是内容div嵌套在背景div里面，并且做居中处理。
2，布局写好之后再写HTML语义化标签，这个时候凡是在一行内，内容类型不一样的，按照从左往右的顺序以此使用div分别包裹起来。如果该部分内容已经处在一个单独的标签内的。我们可以不用div包裹。
3.样式的书写顺序：先浮动，排在一行的内容必须同时都浮动。
4，浮动完毕，先去a的下划线，列表的点。
5，开始设置字体，尺寸，颜色，
6，设置内容之间的间距，设置上下居中问题。
