表格自动适应浏览器大小及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”,称为 “行内”元素。
块级元素:
占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;
行内元素:
自己的独立空间,它是依附于其他块级元素存在的,因此, 对行内元素设置高度、宽度、内外边距等属性,都是无效的。