DIV用于搭建网站结构（框架），CSS用于创建网站表现（样式/美化）
DIV+CSS模式设计网站的优势：
1、表现和内容分离。 2代码简洁，提高网页浏览速度。 3、易于维护，改版。 4、提高搜索引擎对网页索引的效率
大部分标签都有意义，例如a标签创建链接h标签创建标题 div和span是无意义的标签，但是div和span可以与css，结合起来。应用就非常的广泛。
<div id="scissors">使用div组合一块大的代码
<p> This is <span class ="paper">crazy</span></p>使用span内联在p标签中
</div> div结束一个块
· W3C盒子模型：每个HTML模型都可以看做一个区块，类似于装了东西的盒子，所以称为盒子模型。
<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
<style>
#box {
200px; /*盒子宽度为200像素*/
height: 200px; /*盒子高度为200像素*/
border: 5px solid #ccc; /*盒子边框各自边宽为5px*/
padding: 10px; /*盒子内填充为10px*/
margin: 20px; /*盒子的4个外边距为10px*/
}
</style>
</head>
<body>
<div id="box"> <!--使用div定义一个盒子 -->
内容区 <!--盒子内还可以嵌套一个盒子-->
</div>
</body>
</html>
声明盒子的css属性：
margin：定义外边界与上级元素距离的属性，用1——4来设定元素的边界，每个值都是长度，百分比或者auto。百分比的值是参考上级元素的宽度，允许使用负值。margin-top上边界 margin-bottom下边界 margin-left左边界 margin-right右边界
padding：用于设置区块的内边距属性，是边框和元素内容之间的间隔距离，与margin属性相反padding-top上补白 padding-bottom下补白 padding-right右补白
padding-left左补白
border：边框属性用于设置一个元素的边框风格，宽度，颜色
width：盒子的宽度
height：盒子的高度
和页面布局有关的css属性：
position：用于定义一个元素是否absolute（绝对的）、relative（相对的）、static（静态）或者fixed（固定）
top：层距离页面顶点纵坐标的距离
left：层距离页面顶点横坐标的距离
text-align：横向排列，可以使用left（居左对齐）、right（居右对齐）、center（居中对齐）。
z-index：决定层的先后顺序和覆盖关系、值高的元素会覆盖值低的元素。、
display：是一个显示属性，设定为block值以块状显示，在元素后，添加换行符，即其他元素不能在其后面并列显示。
visibility：这个属性是针对嵌套层的设置，如果存在嵌套的层（子层）和被嵌套的层（父层），可以使用inherit值设置子层继承父层的可见性，如果父层可见，那么子层也可见，当值为visiable，无论父层是否可见，子层都可见。而当值为hideen时。无论父层是否可见。子层都隐藏。
overflow：用于设置层内容超出所能容纳的范围的处理方式。
float：设置区块漂浮属性，允许网页制作作者将文本环绕，环绕在一个元素的周围，可以使用左漂浮值left和右漂浮值right值；
clear：清楚属性，指定一个元素是否允许有元素漂浮在它的旁边，值left移动元素到左边漂浮的元素下面：
盒子区块的定位：普通流、结对定位、浮动、三种基本定位机制。
如果不专门追定区块位置，默认为都是普通流中定位即从上到下一个接一个的排列。位置元素由HTML决定，如果使用像span和strong等不自动换行元素，就会在同一行中水平布局，可以使用水平填充，外部边距等调整他们的水平边距。
相对定位：通常被看做普通定位的一部分，因为元素的位置相对于它本身普通流中的位置定位并不是布局的常用方式。如果某个区块框在他所在的位置处，设置垂直或水平位置，就可以让这个“相对于”他在普通流的起点位置进行移动。但使用相对位置时，无论是对否移动，元素都占据原来的空间，因此这种移动方式会导致覆盖其他区块。
a：hover { /*定义a元素的伪选择器，当鼠标移动到链接上时改变样式
position：relative； *设置元素使用相对位置
top：1px； *鼠标进入时a元素将出现在原位置顶部下面1px的地方
left：1px； *鼠标进入时a元素将出现在原位置右边1px的位置
} */
本咧是实现将鼠标移动到页面的链接时，链接的元素就会在网页上震动一下，还会相对原位置下移1像素，向右移动1像素。
相对定位是相对于自身在普通流中的位置移动。
绝对定位：absolute使元素的位置与文档的普通流无关，他的位置是相对于已定位包含的上层元素中上、下、左、右移动。如果没有已定位的上层元素，那么他的位置相对于最初包含的区块，例如body或HTML元素。
风场灵活的定位方式不会占据普通流中现有的区框位置空间，网页中浮动的广告，都采用的是绝对定位的机制，因为它可以浮动在其他区块的上面，也可以使用
z-index属性来控制这些区块的堆放次序，z-index的值越大，区块在层中的位置就会越高。
绝对定位一般不做布局，配合JavaScript使用完成一些页面特效，登录框的盒子需要用绝对定位完成。
<!DOCTYPE html>
<html>
<head>
<title>登录框盒子模型定位</title>
<style>
#login{ ./*定义一个id选择器*/
300px;
height: 200px;
position: absolute;
left: 50%;/*左部盒子开始位置是页面宽度的50%*/
top: 50%/*顶部盒子开始位置是页面高度的50%*/
margin-left:-150px;/*左部开始位置退回盒子宽度的一半*/
margin-top: -100px;/*顶部开始位置在退回盒子高度的一半*/
background: #BABABA;/*设置背景颜色为灰色*/
}
</style>
</head>
<body>
<div id="login">
登录框的盒子模型
</div>
</body>
</html>