編寫CSS時關(guān)于Border必須要注意的地方總結(jié)

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 18:55:14

編寫CSS時關(guān)于Border必須要注意的地方總結(jié)

編寫CSS時關(guān)于Border必須要注意的地方總結(jié):今天寫了一段CSS,寫時突然想到的,寫出來和大家分享一下; 我們可能早已習(xí)慣了http://www.gxlcms.com/wiki/948.html target=_blank

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀編寫CSS時關(guān)于Border必須要注意的地方總結(jié):今天寫了一段CSS,寫時突然想到的,寫出來和大家分享一下; 我們可能早已習(xí)慣了http://www.gxlcms.com/wiki/948.html target=_blank

今天寫了一段CSS,寫時突然想到的,寫出來和大家分享一下; 我們可能早已習(xí)慣了http://www.gxlcms.com/wiki/948.html" target="_blank">padding在不同瀏覽器中的不同之處, 但這個你不一定注意過;

先說一個場景,例如:
一個寬400px的黃盒子,左邊放一個300px的小藍(lán)盒子,右邊放一個寬100px的紅盒子.這樣應(yīng)該正好放下對吧? 因為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>

最后的效果是這樣的:

沒有放下,原因就是因為我寫了一個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應(yīng)該和最開始的效果一樣沒有變化;

接著看最后一個效果:

<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不會變的.
看代碼區(qū)別,我少加了:
程序代碼

<!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">

如果不加(完全沒有); 應(yīng)該是按html3.0執(zhí)行,這一點我不太確定。
程序代碼
轉(zhuǎn)一段：
DOCTYPE是document type(文檔類型)的簡寫，用來說明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文檔類型定義，里面包含了文檔的規(guī)則，瀏覽器就根據(jù)你定義的DTD來解釋你頁面的標(biāo)識，并展現(xiàn)出來。
寫出來就是友情提醒一下在寫CSS千萬把這個記住，如果頁面比較要求不是相相相當(dāng)?shù)膰?yán)格，計算時盡可能留出一點間隔來。這樣即使有1px的邊框，也不會對頁面造成嚴(yán)重影響，1px還好一些，如果是10px呢，你的頁面就完了。我比較傾向于:如果盒子有width就不要加padding,不加border是不太可能的。多套一兩層沒有人會笑話，這些可以避開很多的瀏覽器兼容的問題。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

編寫CSS時關(guān)于Border必須要注意的地方總結(jié)

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：必須注意的 css

熱門焦點

編寫CSS時關(guān)于Border必須要注意的地方總結(jié)

編寫CSS時關(guān)于Border必須要注意的地方總結(jié)

編寫CSS時關(guān)于Border必須要注意的地方總結(jié)

最新推薦

猜你喜歡

熱門推薦