html默认的是按照流的方式,对块元素按出现的顺序从上到下排列,每出现一个块元素,进行一个换行,

而内联元素,在块元素内从左上角向右下方流,文本则当作一个特殊的内联元素,由浏览器根据需要分割成不同长度。

但有几种特殊方式可以改变这个定位。

1,浮动布局,使用float属性 ,其有两个值,left,right,代表向左或向右浮动。

     使用float时,html以流的方式正常加载页面,直到碰到有float属性的元素时,会将其从流中删除,并使相应的元素向左或向浮动,后面的块元素继续加载,因为已经从流中删除,块元素会填充浮动元素所在的区域,但是内联元素,会知道其边框所在,并围绕它。

        有float属性的元素之前元素的css属性会生效,如float元素在某一个div中,那他左右浮动也是相对于这个div,而且有float属性的元素与别的元块的外边距不折叠(这点针对他之前的块元素),另有float属性的元素,必须有宽度,另有clear(值为left,right)属性,可以让别的元素,不与其接触。

2,凝胶布局

     在所有容外面添加一个元素,如div,包围所有元素,设置宽度,再设置margin-left , margin-right 值为auto,这样内容会一直居中于页面中间,比较适用于论坛这类,如百度贴吧。

3,使用position属性

    position有四个属性,static (静态,默认),absolute(绝对布局), Fixed(固定布局), relative(相对布局)

    其中static是默认值,

    absolute是绝对布局,会从流中彻底删除,因为从流中彻底删除,块元素与内联元素会彻底忽略该元素,填充其所在匹域。

    绝对布局是指相对于页面的布局,会根据页面大小变化而变化。

   Fixed固定布局,是指相对于窗口的布局,也会从流中彻底删除,但不会根据页面的大小而位置变化

   absolute与Fixed都有z-index属性,其值为数字,可正可负,越大的位置离你越近,即显示在最上面,且有最大值

   relative相对布局,仍在流中,只对原先位置的一定偏移

4,表格显示布局

配置属性为  display:table 指表

                    display:rable-row 指行

                    display:table-cell指单元格,

                    使用div最外层为table,里面用table-row,再table-cell.


以上内容为笔记,如有错误请指示,如不详细请见谅, 谢谢