CSS关于Border你可能会不注意的东西

作者：zishu 来源：zishu.cn 时间：2007-10-20 13:50:00　

今天写了一段CSS,写时突然想到的,写出来和大家分享一下; 我们可能早已习惯了padding在不同浏览器中的不同之处, 但这个你不一定注意过;

先说一个场景,例如:

一个宽400px的黄盒子,左边放一个300px的小蓝盒子,右边放一个宽100px的红盒子.这样应该正好放下对吧? 因为300+100正好是400呀! 好了,先试一试!
我开始写了(头部省略):

<style>
#yellow{ width:400px; border:1px solid #FF9900; background:#FFCC99; float:left;}
#blue{ width:300px; height:100px; border:1px solid #0066FF; background:#00CCFF; float:left;}
#red{ width:100px; height:100px; border:1px solid #FF3300; background:#FF9900; float:right;}
</style>
400px
<div id="yellow">
<div id="blue">300px</div>
<div id="red">100px</div>
</div>

看一下效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS关于Border你可能会不注意的东西</title><style>*{ margin:0; padding:0;}body{padding:50px; font-size:12px; font-family:Arial, Helvetica, sans-serif; line-height:1.8;}#yellow{ width:400px; border:1px solid #FF9900; background:#FFCC99; float:left;}#blue{ width:300px; height:100px; border:1px solid #0066FF; background:#00CCFF; float:left;}#red{ width:100px; height:100px; border:1px solid #FF3300; background:#FF9900; float:right;}</style></head><body>400px<div id="yellow"> <div id="blue">300px</div> <div id="red">100px</div></div></body></html>[提示：你可先修改部分代码，再按运行]最后的效果是这样的:

没有放下,原因就是因为我写了一个border:1px; 那我们把他去掉看一下.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS关于Border你可能会不注意的东西</title><style>*{ margin:0; padding:0;}body{padding:50px; font-size:12px; font-family:Arial, Helvetica, sans-serif; line-height:1.8;}#yellow{ width:400px; border:1px solid #FF9900; background:#FFCC99; float:left;}#blue{ width:300px; height:100px; background:#00CCFF; float:left;}#red{ width:100px; height:100px; background:#FF9900; float:right;}</style></head><body>400px<div id="yellow"> <div id="blue">300px</div> <div id="red">100px</div></div></body></html>[提示：你可先修改部分代码，再按运行]

恩,这下对了,正好放下.

2 下一页

标签：border,css

投稿

CSS关于Border你可能会不注意的东西

猜你喜欢

Microsoft SQL Server 2008 正式发布

解析：MySQL 数据库搜索中大小写敏感性

ASP Recordset 分页显示数据的方法(修正版)

用Dreamweaver设计Wordpress留言板教程（一）

mysql查询一天，查询一周，查询一个月的数据

常用的三种修改mysql最大连接数的方法

asp怎么实现中文字符串按声母检索

CSS Expression 的优化

实例讲解Access数据库在线压缩的实现方法

FrontPage2003 中网页布局功能的应用

用DW8制作网页中常用的过度效果

Javascript 每日测试 - 第五期 callee及function

dl,dt,dd标签 VS 传统table实现数据列表

JS数组方法汇总

如何在服务器端调用winzip命令行对文件压缩和解压

良好体验，必须是全方位的

BigPipe:高性能的"流水线技术"网页

利用SQLyogEnt对Mysql数据库进行转移

浅谈javascript面向对象编程

用javascript实现Base64编码