写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> 看一下效果: 
 
 
 
 
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需刷新才能执行]

            12下一页阅读全文