通过盒子模型，知道大部分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）