写CSS_关于Border你可能需要注意的地方第1/2页

发布时间：2007-12-11　作者：　来源：转载

标签：雪佛兰通用奢华劳斯莱斯旗舰版 64位收藏夹解调器

今天写了一段CSS,写时突然想到的,写出来和大家分享一下;我们可能早已习惯了padding在不同浏览器中的不同之处,但这个你不一定注意过;先说一个场景,例如:一个宽400px的黄盒子,左边放一个300px的小蓝盒子,右边放一个宽100px的红盒子.这样应该正好放下对吧?因为30

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

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

400px

300px

100px

看一下效果:

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
最后的效果是这样的:

没有放下,原因就是因为我写了一个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>www.zishu.cn</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 300px 100px </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
当前1/2页12下一页阅读全文

上一篇：js倒计时代码

下一篇：windows内存诊断工具有什么作用

网站首页

网络编程

数据库

操作系统

平面设计

网站运营

网络安全

电脑相关

手机学院

写CSS_关于Border你可能需要注意的地方第1/2页

相关推荐

文章分类

热门关键词

热门文章

最新更新