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

Bertha 。 2022-08-13 14:46 272阅读 0赞

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

之前写了个页面，将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 : 　对象浮在右边**

**     CSS div float IE和FireFox的兼容性问题  
  
    在IE中，只有指定该DIV的CLASS为FLOAT:left 才会有FLOAT属性  
  
    而在FF中，第一个指定后 其后的div也随着平移，所以可以在同级的float加上  
  
    .clear\{ clear:both;\}  <div class="clear"></div>,  
  
    CSS中 height: 19px !important; height: 21px;  在IE是不认important的，如果属性重复，默认截取最后一个。而在FF中important是优先执行的。  
  
    div 设置 margin-left, margin-right 为 auto 时 IE 不会居中，但FF可以.**

**     **

下面是一个随浏览器自适应大小的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>

![Center][]

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

具体可见：**Display:Block 详细用法**  
      根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如**div元素，它的默认display属性值为“block”**，称为**“块级”元素(block-level)**；而**span元素的默认display属性值为“inline”**，称为**“行内”元素**。  
  
** 块级元素：**  
  
      占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；  
  
** 行内元素：**  
  
      自己的独立空间，它是依附于其他块级元素存在的，因此，**对行内元素设置高度、宽度、内外边距等属性，都是无效的**。

[Center]: /images/20220810/a1c76c612ce34abebc4c717715e37bb9.png