DIV+CSS页面布局

一、页面布局

1.确定网页的主体内容，在页面中水平居中显示

2.分析页面中的模块，思考各个模块的排版

3.控制页面中的各个模块到指定位置，完成页面布局

二、CSS的定位机制

  1.普通流方式：有元素在html文件中的位置决定(由标签在文件中的位置来决定)
        
   2.浮动方式：元素在页面中可以左右移动,直到碰到包含框或其他浮动框
        
   3.绝对定位：直接将元素定位到页面的任何位置(设置元素在页面中的位置坐标)

三、浮动属性

1.浮动：元素脱离原有的标准文档流,移动到其父元素中指定的位置

2.浮动的实现：在元素的CSS中添加float属性

left:向左浮动

right：向右浮动

none：不浮动（默认设置）

浮动元素不占据空间

四、常见的浮动布局

1.一列固定宽度并自动居中：margin设置为auto

2.一列自适应宽度：相对于浏览器而言,盒子的宽度会随浏览器宽度的改变而改变

3.两列自动居中：采用盒子嵌套方式实现,让外层的盒子自动居中

五、清除浮动

浮动的元素离开了原有的文档流,它会对页面中其他元素的排版产生影响。为了消除这种影响，可以使用clear属性消除浮动

在clear属性中设置

            left：清除左侧的浮动影响

            right：清除右侧的浮动影响

            both：清除左右两侧的浮动影响    

六、绝对定位与相对定位

1.相对定位：元素以它所在的普通流中的位置为起始点进行定位(设置坐标)

position:relative;/*相对定位*/
top:150px;
left:150px;

2.绝对定位：可以把元素精确定位到页面中的某个地方

position: absolute; 
top:30px;
left: 45px;
z-index: -1;

（1）元素绝对定位后，它与普通文档流就没有关系，不占据普通文档流的空间

（2）绝对定位的元素的位置是相对于最近的父元素而言的

（3）因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index 
            
         来控制它层级次序。z-index 的值越高，它显示的越在上层

注意：页面中元素的z-index(层级)为0

七、在页面布局中常用的CSS属性

 1.visibility：元素是否可见

  visible:元素可见（默认）

  hidden：不可见

2.display：元素的显示方式

block:块状显示

inline：显示在一行

none：不显示

hidden和none的区别

visibility: hidden; 隐藏元素后，保留元素所占有的物理空间
             
 display: none;隐藏元素后，不保留元素所占有的物理空间

八、CSS中的块级元素和行内元素

1.常见的块级元素(block)：占据了全部的宽度,在前后都有换行符

		    <h1></h1>
			<p></p>
			<div></div>
			<ul></ul>
			<table></table>
			<form></form>

宽度(width)、高度(height)、内边距(padding)、外边距(margin) 都是可以控的

2.内联元素(inline)：只需要必要的宽度,不强制换行

  <span></span>
  <a></a>

  宽度(width)、高度(height)
           
  内边距(padding-top、padding-bottom)
           
  外边距(margin-top、margin-botom)
           
  都是不能改变的

块元素：无论内容是什么都会独占一行，主要用于页面布局

行内元素：只占用自身的大小，不会占用一行。