页面布局基础1

相对定位和绝对定位

1.相对定位用于小幅修改某个元素的位置，使之相对于正常情况应该出现的地方稍微移动一下位置。使用position:relative属性，再连同left，right，top和bottom等属性，即可实现相对定位功能。

属性名称	属性值	用途
position	static relative absolute fixed	默认值：元素按照正常流动方式渲染 配置元素位置相对于正常流动方式中的位置 配置元素在其容器中的确切位置 元素在浏览器窗口固定，网页滚动时元素不动
left	数值或百分比	元素相对于元素左侧的距离
right	数值或百分比	元素相对于元素右侧的距离
top	数值或百分比	元素相对于元素顶部的距离
bottom	数值或百分比	元素相对于元素底部的距离

2.使用绝对定位指定元素在其容器元素中的确切位置。设置绝对位置需要使用position:absolute属性，加以下属性：left,right,top,bottom.

浮动

1.浏览器逐行渲染HTML文档中的代码。这种方式称为“正常流动”。它按照元素在网页源代码出现的顺序显示元素。

2.元素在浏览器窗口或另一个元素左右两侧浮动通常用float属性来设置。

• 使用float:right;使元素在容器右侧浮动。
• 使用float:left;使元素在容器左侧浮动。
• 除非元素已经有一个隐含的宽度(比如img元素)，否则为浮动元素指定宽度。
• 其他元素和网页内容围绕浮动元素进行流动。
• 只有块级元素(比如div、段落和图片)能配置成浮动。

3.clear属性用于清除浮动。clear属性值为left，right或both。

      一种是用换行清除浮动，在结束标记</div>之前，为一个换行标记分配clearleft类。

      另一种是改向h2元素应用clearleft类，h2会强行单独占一行。

.clearleft{ clear:left; }

<div>
     <img class="float" src="yls.jpg" alt="Yellow Lady Slipper" height="100">
     <p>......</p>
     <br class="clearleft">
</div>

溢出

1.overflow可用来清除浮动，本来是用于配置内容在分配区域容不下时的显示方式。常用值如下：

属性值	用途
visible	默认值；显示内容，如果过大，内容会溢出分配给它的区域
hidden	内容被剪裁，以适应浏览器窗口中分配给元素的空间
auto	内容充满分配给它的区域。如有必要，显示滚动条访问其他内容
scroll	内容在分配给它的区域进行渲染，并显示滚动条

2.为容器元素配置overflow属性清除浮动。用于配置div的示例：

div{   background-color:#f3f1bf;
          overflow:auto;
          width:100%;
}

CSS双栏页面布局

1.网页的一个常见设计是双栏布局。这是通过配置其中一栏在网页上浮动来实现的。

2.左侧导航的双栏布局模板：

<div id="wrapper">
      <div id="leftcolumn">
      </div>
      <div id="rightcolumn">
           <div id="header">
           </div>
           <div id="content">
           </div>
           <div id="footer">
           </div>
     </div>
</div>

#wrapper{
      width:80%;
      min-width:850px;
      margin:auto;
      background-color:#b3c7e6;
}
#leftcolumn{
     float:left;
     width:150px;
}
#rightcolumn{
     margin-left:155px;
     background-color:#ffffff;
}

3. 顶部LOGO左侧导航的双栏布局模板：

<div id="wrapper">
      <div id="header">
      </div>
      <div id="leftcolumn">
      </div>
      <div id="rightcolumn">
           <div id="content">
           </div>
           <div id="footer">
           </div>
      </div>
</div>