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

标签: 表格 适应 浏览器 | 发表时间:2014-11-02 00:29 | 作者:yuzongtao
出处:http://blog.csdn.net

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

      之前写了个页面,将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”,称为 “行内”元素

 块级元素:

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

 行内元素:

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
















作者:yuzongtao 发表于2014-11-1 16:29:44 原文链接
阅读:70 评论:0 查看评论

相关 [表格 适应 浏览器] 推荐:

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

- - CSDN博客Web前端推荐文章
        一、表格自适应浏览器大小.       之前写了个页面,将width和height值给定死了,这样导致浏览器缩小时,表格不会跟着自动适应浏览器大小.       1.一般是给表格整体使用样式: table-layout:fixed;.       2.将表格中的各个单元格的 width和height属性值设为比例,而不是给定值.

css 控制div高度自适应浏览器的高度

- - 博客园_首页
css 控制div高度自适应浏览器的高度. 20 这里是内容容这里是内容. 25 这里是内容这里是内容. 35 这里是内容这里是内容. 43 这里是内容这里是内容. 48 这里是内容这里是内容. 55 这里是内容容这里是内容. 57 这里是内容这里是内容. 64 这里是内容容这里是内容.

Silk 浏览器:Google? No!

- 橙子 - 爱范儿 · Beats of Bits
前苹果员工, Blogger Chris Espinosa 指出, Amazon 的 Silk 浏览器技术,让 Amazon 不能把自己置于 Google 的控制之下. Silk 在云端为用户组织和优化网页,之后再下载到本地. 这样做的结果是, Amazon 能掌握用户在网络上的一举一动. 不仅仅包括在 Amazon.com 下的订单.

浏览器检测

- - JavaScript - Web前端 - ITeye博客
1.navigator 对象. 由于每个浏览器都具有自己独到的扩展, 所以在开发阶段来判断浏览器是一个非常重要的步骤. 虽然浏览器开发商在公共接口方面投入了很多精力, 努力的去支持最常用的公共功能;但在现实中,浏览器之间的差异,以及不同浏览器的“怪癖”却是非常多的,因此客户端检测除了是一种补救措施,更是一种行之有效的开发策略.

浏览器缓存机制

- Leo Pay - Learning Correcting Improving
Cache-Control 是最重要的规则. 这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令. 这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为. 缓存指令是单向的,即请求中存在一个指令并不意味着响应中将存在同一个指令. cache-control 定义是:Cache-Control = "Cache-Control" ":" cache-directive.

浏览器进化史

- Hao Zeng - 爱范儿 · Beats of Bits
这张图非常直观,纵轴是浏览器存在的时间线,横轴代表使用此浏览器的用户数量. 出现在图片中的浏览器包括:Netscape、Opera、IE、Firefox、Safari 和 Chrome. Netscape:1994 年诞生,1995 年用户基数达到最大(2.x 版本). 1998 年 Netscape 被创业杀手 AOL 收购,再加上微软的冲击,逐渐走向衰败,2008 年彻底终结.

百度浏览器评测

- 溪梦 - 月光博客
  百度今年在客户端方面的动作不断,目前已经推出了百度输入法、百度电脑管家、百度安全卫士、百度影音,百度压缩软件,而现在,百度客户端领域的重要产品百度浏览器已经进入了测试阶段,不久后将正式对外发布.   百度在其公关稿里称:“百度浏览器具备以下几点特性:第一,整合百度平台的热门应用,使用户一键触达;第二,采用沙箱安全技术将用户电脑与病毒木马隔离;第三,融合百度搜索技术的智能地址栏;第四,界面设计简洁易操作……百度希望通过浏览器的改进,推动互联网的良性发展,吸引更多的用户来使用互联网,增进使用的频度与时长,最终推动搜索这个媒体平台的发展和巩固.

最新浏览器评测

- John - Solidot
Tom's Hardware发布了最新的浏览器评测,在Windows 7 和Mac OS X Lion系统上分别对Chrome 13、Firefox 6、IE9、Opera 11.50和Safari 5.1执行了近40项测试. 测试结果是:Windows 7上的排名依次是Chrome 13、Firefox 6、IE9、Opera 11.50,Safari 5.1;Mac OS X上是Safari,Chrome,Opera,Firefox.

appcache的浏览器限制

- - 前端观察
appcache(之前的manifest)是html5的一个特性,用来实现浏览器端的资源缓存,是webapp的一个重要工具. 虽然大部分浏览器的最新版都它提供了支持,但是各浏览器的实现却有些差异,我们来看一下~~. 数据来源: browserscope. 可以看出,桌面端的浏览器除了IE10都没有限制,移动端的基本都有各种限制.

IE 浏览器的创新

- - 博客 - 伯乐在线
译者按:IE 曾是 web 创新的先驱,但最近几年因为对 web 标准的支持落后于其他 浏览器以及低版本 IE 的各种 bug 而被人诟病. Zakas 带我们回顾了 IE 在 web 发展过程中扮演的辉煌角色,让我们能以一个更客观的眼光来看待 IE. 看完这篇文章,也许大家都会对 IE 浏览器有一定的改观,这也是我翻译这篇文章的目的.