1.最外层称为container，标题header，菜单menu，目录content，以及相关主要内容。 2.页面当中的所有元素都可以看成是一个盒子，占据着一定的空间。 3.需要定义盒子的页面元素大小，边框，内边距和外边距，与其他元素的距离。
1.三种不同定位机制：文档流，浮动定位，层定位。 2.overflow的设置： 超过之后，显示滚动条：scroll； 隐藏滚动条：hidden； 3.margin的设置：各个边框按顺时针方向设置，顺序为上右下左。同时盒子模型垂直方向合并，水平方向不合并。
1.顺序为从上到下，从左到右。 2.各个元素的设定： block：独占一行，元素的宽高可以设置； inline：不单独占据一行，宽度高度不可设置，高度为最高元素的宽度； inline-block：不单独占据一行，可以设置这种元素的宽度和高度，通过display属性来设置。
1.使用div标签实现横向多列布局。 2.float属性：left，right;clear属性：可以清除这种浮动。浮动之后脱离了文档流原来的位置。 3.用处:可以设置文字和图片的相对位置，图片的相对位置。 4.清除浮动clear： both：清除左右方向的浮动； right：清除右侧的浮动； none：默认的值。
<style> #aside{ float: left; width: 300px; height: 500px; background-color: #6cf; } #content{ float: right; width: 700px; height: 500px; background-color: #cff; } </style> <div id="aside"> </div>1.定义：网页上，一个模块叠加到另一个模块上的效果。 2.position属性： static：默认值；（没有定位，元素出现在正常的流中） fixed：固定定位；（相对于浏览器窗口进行定位） 左右图片的相对位置一直不变，始终在屏幕上。
relative：相对定位；（相对于直接父元素进行定位），设置完成后会脱离文档流，原位置依然存在。
#box1{ width:170px;//宽度 height：190px; position:relative; top:20px; left:20px;//边距的设置 }absolute：绝对定位。（相对于static的第一个父元素进行定位），脱离正常文本流，原位置不再存在。
#box1{ width:170px;//宽度 height：190px; position:absolute; top:20px; left:20px;//边距的设置 }z-index属性：设置每层之间的叠加关系。
