繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 写CSS_关于Border你可能需要注意的地方
- CSS样式表
- 推荐一篇利用th,colgroup,col定义表格样式
- 都是IE惹的祸多浏览器兼容问题
- dl,dt,dd制作的CSS垂直菜单
- 推荐css打造经典鼠标触发显示选项
- div+css中Class与ID的区别
- CSS Div 最小高度在IE 6 和IE 7中的兼容性问题
- 让iframe自适应高度（支持xhtml）IE firefox兼容
- 实用的利用 CSS + <em>标签 来完成一个三角形的制作
- CSS控制文本自动换行的问题
- 把 CDATA 中的内容（有可能是不规范的Html代码）以Html方式展现出来。
- 仿客齐集首页导航条DIV+CSS+JS [代码实例]
- 关于margin-left的示例代码
- CSS优化2-(常用CSS缩写语法总结)
- font和line-height之CSS代码书写顺序不同，导致显示效果不一样
- 推荐三种简洁的Tab导航（网页选项卡）简析
- 用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程！
- 解决IE5/IE5.5/IE6/FF的兼容性问题——CSS
- CSS2实现的隔行换色
- CSS中几种常见的注释
- dhtml shtml xhtml的区别解析
CSS样式表 中的 写CSS_关于Border你可能需要注意的地方
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 226 ::
收藏到网摘: n/a
今天写了一段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 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
最后的效果是这样的:
没有放下,原因就是因为我写了一个border:1px; 那我们把他去掉看一下.
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
恩,这下对了,正好放下.
所以说:
边框是计算在width外边的. 是这样吗? 我们接着看下边的代码:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
如果你是用IE; 那么你会看他们间隔小了很多,FIREFOX应该和最开始的效果一样没有变化;
接着看最后一个效果:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
这个里边两个小盒子都有边框,在宽度没有变的情况下,在IE中放下了. FIREFOX不会变的.
看代码区别,我少加了:
程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
如果不加(完全没有); 应该是按html3.0执行,这一点我不太确定。
程序代码
转一段：
DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。
写出来就是友情提醒一下在写CSS千万把这个记住，如果页面比较要求不是相相相当的严格，计算时尽可能留出一点间隔来。这样即使有1px的边框，也不会对页面造成严重影响，1px还好一些，如果是10px呢，你的页面就完了。我比较倾向于:如果盒子有width就不要加padding,不加border是不太可能的。多套一两层没有人会笑话，这些可以避开很多的浏览器兼容的问题。
评论 (0) All
