编写CSS时关于Border必须要注意的地方总结-css教程-PHP中文网

首页

web前端

css教程

编写CSS时关于Border必须要注意的地方总结

PHP中文网

Mar 30, 2017 pm 02:54 PM

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

编写CSS时关于Border必须要注意的地方总结

先说一个场景,例如:
一个宽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  
<p id="yellow">  
 <p id="blue">300px</p>  
 <p id="red">100px</p>  
</p>

看一下效果:

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>www.zishu.cn</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 
<p id="yellow"> 
 <p id="blue">300px</p> 
 <p id="red">100px</p> 
</p> 
</body> 
</html>

最后的效果是这样的:

编写CSS时关于Border必须要注意的地方总结

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

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>www.zishu.cn</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;  background:#00CCFF; float:left;} 
#red{ width:100px; height:100px;  background:#FF9900; float:right;} 
</style> 
</head> 

<body> 
400px 
<p id="yellow"> 
 <p id="blue">300px</p> 
 <p id="red">100px</p> 
</p> 
</body> 
</html>

恩,这下对了,正好放下.
所以说:
边框是计算在width外边的. 是这样吗? 我们接着看下边的代码:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>www.zishu.cn</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 
<p id="yellow"> 
 <p id="blue">300px</p> 
 <p id="red">100px</p> 
</p> 
</body> 
</html>

如果你是用IE; 那么你会看他们间隔小了很多,FIREFOX应该和最开始的效果一样没有变化;

接着看最后一个效果:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>www.zishu.cn</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 
<p id="yellow"> 
 <p id="blue">300px</p> 
 <p id="red">100px</p> 
</p> 
</body> 
</html>

这个里边两个小盒子都有边框,在宽度没有变的情况下,在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是不太可能的。多套一两层没有人会笑话，这些可以避开很多的浏览器兼容的问题。

以上就是编写CSS时关于Border必须要注意的地方总结的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn