写CSS_关于Border你可能需要注意的地方第1/2页
更新时间：2007年12月11日 21:48:39 作者：
今天写了一段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>
看一下效果:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
最后的效果是这样的:
没有放下,原因就是因为我写了一个border:1px; 那我们把他去掉看一下.
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
先说一个场景,例如:
一个宽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>
看一下效果:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
最后的效果是这样的:
没有放下,原因就是因为我写了一个border:1px; 那我们把他去掉看一下.
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
相关文章
SPAN元素和DIV元素有的区别...2007-02-02
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解...2007-08-08
为什么在ie里执行后这段代码 两个span标签虽在同一行但它们之间有空隙? 但是 两个div标签虽然在同一行就没有空隙?2008-07-07
主要用于不能输入中文的情况下，使用，这样就不要用js2008-06-06
CSS:浮动清理，不使用 clear:both标签 在进行浮动布局时，大多数人都深知，在必要的地方进行浮动清理：<div style="clear:both;"></div>。2008-07-07
不用float实现div模块居中布局...2007-02-02
为了兼容和区分多浏览器我们需要用一些css hack来解决这些问题，但不建议用，能不用则不用2008-08-08
调用265天气预报，不显示链接...2006-12-12
IE和FIREFOX下CSS的区别与解决方法...2007-03-03
纯css实现的圆角边框效果代码2008-04-04
最新评论