位置：首页>> 网络编程>> 网页设计>> CSS关于Border你可能会不注意的东西（2）

CSS关于Border你可能会不注意的东西（2）

作者：zishu　来源：zishu.cn　发布时间：2007-10-20 13:50:00　

标签：border,css

所以说:边框是计算在width外边的. 是这样吗? 我们接着看下边的代码:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS关于Border你可能会不注意的东西</title><style>*{ 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;}</style></head><body>400px<div id="yellow"> <div id="blue">300px</div> <div id="red">100px</div></div></body></html>[提示：你可先修改部分代码，再按运行]

如果你是用IE; 那么你会看他们间隔小了很多,FIREFOX应该和最开始的效果一样没有变化;
接着看最后一个效果:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS关于Border你可能会不注意的东西</title><style>*{ margin:0; padding:0;}body{padding:50px; font-size:12px; font-family:Arial, Helvetica, sans-serif; line-height:1.8;}#yellow{ width:400px; 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></head><body>400px<div id="yellow"> <div id="blue">300px</div> <div id="red">100px</div></div></body></html>[提示：你可先修改部分代码，再按运行]

这个里边两个小盒子都有边框,在宽度没有变的情况下,在IE中放下了. FIREFOX不会变的.
看代码区别,我少加了:border:1px solid #FF9900;

程序代码

<!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是不太可能的。多套一两层没有人会笑话，这些可以避开很多的浏览器兼容的问题。

第一页上一页 1

投稿

CSS关于Border你可能会不注意的东西（2）

猜你喜欢