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

当前位置: 编程技术>WEB前端

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

来源: 互联网发布时间：2014-10-04

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

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

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

代码如下:

  
#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;}  
  
400px  
  
 300px

100px

看一下效果:

www.zishu.cn *{ 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;} 400px

300px

100px

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

最后的效果是这样的:

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

www.zishu.cn *{ 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;} 400px

300px

100px

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

BS项目中的CSS架构_仅加载自己需要的CSS

做网页中需要掌握的八个CSS布局技巧

Web服务器/前端 iis7站长之家

Web2.0下XHTML+CSS 设计需要注意的地方小结

95%的中国网站需要重写CSS

css利用A标签的背景可能作出很有意思的效果第1/2页