写CSS_关于Border你可能需要注意的地方


今天写了一段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需刷新才能执行]



相关阅读:
换个角度看页面重构中的语义化
简化php模板页面中分页代码的解析
使用DIV+CSS布局网站的优点和缺陷分析
Linux系统下文件的压缩、打包与解压包
网页设计布局基础
prototype 学习笔记整理
Ubuntu Linux 中也能轻松刻录光盘
破解浏览器内网页禁用鼠标右键的N个绝招
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
Oracle表中重复记录高效删除法
DIV+CSS 全屏垂直居中的一个办法
vbs删除文本文件的行的函数
ASP.NET页面中标题单点解决方案
仔细考虑维护脚本
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4