通过盒子模型，知道大部分html标签是一个盒子；
通过css浮动，定位，可以让每个盒子排列成网页；
一个完整的网页是由标准流、浮动、定位一起完成布局的，每个都有自己专门的用法；
多个块级元素纵向排列找标准流；
多个块级元素横向排列找浮动；
为了约束浮动元素的位置，网页布局一般采用：
1、先用标准流的父元素上下排列，之后内部子元素采用浮动左右排列；
2、一个盒子浮动了，他的兄弟元素也浮动；
3、浮动的盒子只会影响浮动盒子后面的标准流，不影响前面的；
可以让盒子上下排列 或者 左右排列，垂直的块级盒子显示就用标准流布局；
可以让多个块级元素一行显示 或者 左右对齐盒子， 多个块级盒子水平显示就用浮动布局；
定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。如果元素自由在某个盒子内移动就用定位布局；
通过z-index属性可以用来设置元素的层级，表示盒子摆放的前后次序；
层级越高，越优先显示；
只有元素开启了定位，z-index属性才可以使用；
如果定位元素层级一样，则结构上 下面元素会盖住上面；
父元素的层级再高，也不会盖住子元素；
为了提高网页制作的效率，布局时通常有以下的整体思路：
必须确定页面的版心（可视区），测量可知；
分析页面中的行模块，以及每个行模块中的列模块，页面布局的第一准则；
一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则；
制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要，所以，先理清布局结构，在写代码尤为重要，需要积累；
然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
注意：去掉列表默认的样式
无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。 代码如下
li?{?list-style:?none;?}
巧妙利用一个技术更快更好的布局：
1、margin负值的运用
2、文字围绕浮动元素
3、行内块的巧妙运用
4、CSS三角强化
1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery