简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  编写CSS时关于Border必须要注意的地方总结

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

PHP中文网
PHP中文网Original
2017-03-30 14:54:191642Durchsuche

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

  1.gif

先说一个场景,例如: 
一个宽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>

最后的效果是这样的:

2.gif

没有放下,原因就是因为我写了一个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）！

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：div+css页面布局的五个小技巧Nächster Artikel：用margin和overflow属性实现div间距的方法_经验交流

In Verbindung stehende Artikel

Mehr sehen