第二阶段：页面布局

1、布局的概念
1、采用table表格布局
作为页面的整体布局来说，不提倡使用table布局法，过时的方式。是因为现代社会是商业社会，做推广，那么涉
及到SEO的搜录问题，因为表格布局可能多次进行嵌套，SEO搜录最多是三层标签，多了无法解析。 但是在我们布
局的过程中，涉及到局部的布局可能会使用到。
2、div+CSS布局
是主流的布局方式，一般用来做整体布局，当然了局部布局也可以使用div+css 。
3、html中的标签分类
1）块级标签
div、h、ul、dl form table hr
2）行级标签
其他的都属于行级标签
3)特点：
行级会在一行显示，高度和宽度是内容的高宽。块级就是会自动换行，里面可以包含块级和行级。
4）块级元素和行级的元素可以互相转换
a、它们是通过设置样式display属性：block就会把行级变成块;
b、inline属性，可以把块变成行。
c、none，该值可以使得元素隐藏。
2、盒子模型
1）padding:内边距，它是内容和border之间的距离。
上下左右可以分别来表示：padding-top(上)、padding-bottom(下)、padding-left(左)、padding-right(右边)
2）border:是盒子的宽度。
子属性：border-width:宽度；border-color颜色；border-style：线型
3）margin:外边距，盒子和盒子之间的距离。它也和内边距一样也是4个方向，分别四个子属性；margin
top(上)，margin-bottom(下)、 margin-left(左)、margin-right(右边)
小技巧：margin: 0px auto;来设置盒子的自动居中
4）要计算盒子的宽度和高度的公式
宽度：width+padding-left+padding-right+margin-left+margin-right+border-left+border-right
3、布局实战
1、对一个页面进行整体的布局规划，就是切割成多个div块
2、对每个小块，再去分析局部布局的形式。一种是div局部布局，另一种是table局部布局
3、确定网页的宽度和高度，宽度是根据屏幕的分辨率来确定。1024768分辨率是1003 * 600; 780428宽高。
4、浮动的问题
float: left;right;
clear: both;
1）文档流：如果把元素放到普通文档流中，那么它们的位置按照从上到小。
5、关于元素的定位
1）相对定位
如果有1个元素设置了相对的定位，那么它的参照物是它不设置定位前的位置
2）绝对定位
如果一个元素采用绝对定位，那么它的参照物是浏览器的左上角，不管该元素是否被父元素包含。如果元素采用绝
对定位，它的参照物要改成父容器，那么必须将父容器的定位设置为relative相对定位。这就是规
则，这就是语法。
3）固定定位
6、z-index
1、设置层和层之间的的上下层关系。数字越小越在下面，数字越大越在上面。
2\需求：div1盖住div2，div2盖住div3？怎么做？用z-index属性来操作，同时必须设置定位方式为相对定位或者
是绝 对定位。