表格自动适应浏览器大小及DIV浮动设计（页面自适应浏览器大小）

标签：style   blog   http   color   ar   使用   sp   strong   div   

        一、表格自适应浏览器大小

      之前写了个页面，将width和height值给定死了，这样导致浏览器缩小时，表格不会跟着自动适应浏览器大小。

      解决方法：

      1.一般是给表格整体使用样式：table-layout:fixed；

      2.将表格中的各个单元格的width和height属性值设为比例，而不是给定值。

    <table style="width:100%">

　　   <tr>

　　       <td style="width:20%">skinny cell</td>

　　       <td style="width:80%">fat cell</td>

　　    </tr>

　　</table>

　　注意，表格的大小指定为100%，这将使表格与浏览器窗口等宽。使用百分比而不是像素时，表格将自动调整大小以适应浏览器窗口的大小，同时保持你所追求的美学平衡。在这个例子中，表格中的两个单元格将分别自动调整为表格宽度的20%和80%。

         二、DIV浮动

        要想页面上的DIV随着浏览器大小的改变，始终在自己想要的位置，一般使用float语法：
        float : none | left |right

       参数值：
       none : 　对象不浮动
       left : 　对象浮在左边
       right : 　对象浮在右边

       下面是一个随浏览器自适应大小的DIV浮动案例:

       DIV2 和 DIV3 位于一行，分别在靠左和靠右，实现方法是将DIV2和DIV3放置在一个大DIV1中，然后分别对DIV2和DIV3使用：float :left 和float :right。

<div id="layer1" style="width:100%; margin:3px; border:5px solid #99CC00; background-color:#99CC00; overflow:hidden;">
        <Span style="display:block;text-align:center;">我是DIV1</span>
	<div id="sonLayer1" style="width:35%;margin:3px; height:100px; float:left; border:5px solid #999999;  background-color:#999999;">
	   <Span style="display:block;text-align:center;"> 我是DIV2 </span>
	</div>

     <div id="sonLayer2" style="width:40%; margin:3px; height:100px; float:right;border:5px solid #6666FF;   background-color:#6666FF;">
		<Span style="display:block;text-align:center;">我是DIV3</span>
     </div>

</div>

<div id="sonLayer2" style="width:100%;  margin:3px; height:100px;  border:5px solid red;  background-color:yellow;">
<Span style="display:block;text-align:center;">我是DIV4</span>
</div>

    注意：要想在span中将内容居中，需要先使用Display:Block属性，因为“行内”元素span的默认display属性值为“inline”，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

   具体可见：Display:Block 详细用法
      根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。

 块级元素：

      占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；

 行内元素：

      自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

表格自动适应浏览器大小及DIV浮动设计（页面自适应浏览器大小）

标签：style   blog   http   color   ar   使用   sp   strong   div   

原文地址：http://blog.csdn.net/yuzongtao/article/details/40681635