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

发布时间:2022-04-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了写CSS_关于Border你可能需要注意的地方第1/2页脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
今天写了一段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需再刷新一下页面才能执行]

脚本宝典总结

以上是脚本宝典为你收集整理的写CSS_关于Border你可能需要注意的地方第1/2页全部内容,希望文章能够帮你解决写CSS_关于Border你可能需要注意的地方第1/2页所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。