利用box-sizing实现div仿框架
作者:14px 来源:蓝色理想 发布时间:2009-12-08 15:45:00
标签:box,div,框架
[参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[操作系统:Windows]
先看代码:
运行代码框
关键部分:
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:100px 0; overflow:hidden;}
原理大概就是这样的:
千言万语抵不过一副画,通过整容前后的对比,大家应该能看出box-sizing:border-box的作用了。
了解box-sizing的同学们应该知道,它来自离微国比较遥远的css3世界,因此IE6/IE7是不支持的,但我很负责任滴说:本demo正常兼容IE6/IE7。
因为……
IE6/IE7下,<html>的box-sizing默认值本就是border-box(注:IE7有一点点不正常,overflow:hidden后神志有所恢复,将不影响本demo正常运作)。、
现在的问题就是是不是要采用这个方法了,给点优劣的对比,大家自行斟酌吧:
比较使用绝对定位的方法来实现,这个方法在目前主要存在两个优势:
针对每种浏览器基本使用的同一方法,css代码简单,易修改、易理解。
兼容。绝对定位的方法在OP10下存在暂时找不着修复bug的办法,只好绕个弯走了。
它最大的劣势就是欠灵活,如果没有IE6,我想我是坚决选择绝对定位的方法的。
以下为应用实例demo。
运行代码框
一个应注意的问题:
不要给body以overflow:hidden,它将会无情地隐藏掉任何在它以外的任何东西,包括top/bottom(header/footer);
一个应理解的要点:
[100%+(N)px] 的高度产生的方法:div { height:100%; padding-top:(N)px;}。
0
投稿
猜你喜欢
- 来由:最近的工作一直是学校设计教程的开发,都是自己根据理论知识加一些实际工作经验相结合写的教程,所以不会咬文嚼字,文笔也不一定非常专业和流畅
- 方法一【推荐】、用js插入flash,可防止虚线框激活建立一个ShowFlash.js文件,拷贝以下代码:function sho
- 最近关心电子商务比较多,阿里系产品目前还是业内标杆,值得学习的对象。前几天Jack Ma对支付宝用户体验的严厉批评,成为业内交流热点,据说原
- 代码如下:<% set studentinstance = CreateStudent()&n
- 1、IIS为一个死循的执行过程设定执行时间(缺省为90秒)超时事件:<%response.buffer=true%><BO
- 有2个不同的方法增加用户:通过使用GRANT语句或通过直接操作MySQL授权表。比较好的方法是使用GRANT语句,因为他们是更简明并且好像错
- 获取图片宽度和高度的类,支持JPG,GIF,PNG,BMP我们可以使用这个类来处理图片的显示。<% Class
- 一个封装好的JavaScript拖动类,使用方便:<div id="idDrag" style="bor
- 在很多语言的学习中,“事件”都是一个比较难理解,但是又是一个很重要的概念。javascript中的事件处理也是一样,正因为有了事件处理,才会
- 可在图片连接后面加上宽和高,如:width="150" height="50"<h
- 环境:winxp sp2 ,mysql5.0.18,mysql odbc 3.51 driver 表采用 myisam引擎。access 2
- 在正文前,先简短介绍自己。我任职于广州的某个网站服务公司的系统开发员,主要任务是以.Net编写各种web系统,例如CMS.EIP。大家都知道
- 因工作需要,要将存放在sql server数据库中的数据全部导入到mysql数据库中,在网上搜集相关资料,找到两种方法,现在分别谈谈对他们的
- 阅读上一章:Chapter 4 引用互动性一直是互联网的重点,让使用者与网站能够交换信息,彼此沟通.表单使我们能够有组织的,使用同一方式的从
- 做项目的时候,一位同事导数据的时候,不小心把一个表中的数据全都搞重了,也就是说,这个表里所有的记录都有一条重复的。这个表的数据是千万级的,而
- Oracle数据库提供了几种不同的数据库启动和关闭方式,本文将详细介绍这些启动和关闭方式之间的区别以及它们各自不同的功能。 一、启动和关闭O
- 如何在网上查找链接? 见下:findlinks.html<html><head>
- 简介你手中的这本《JavaScript王者归来》不仅是一本传播知识的书,更是一本求道的书。本书分为五个部分循序渐进地与读者讨论了JavaSc
- < SCRIPT LANGUAGE="VBScript"> < 
- <form action="calscore.asp?action=do" met