編寫CSS時關於Border必須要注意的地方總結

最後更新：2017-03-30 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

今天寫了一段CSS,寫時突然想到的,寫出來和大家分享一下; 我們可能早已習慣了http://www.php.cn/wiki/948.html" target="_blank">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  <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應該和最開始的效果一樣沒有變化;

接著看最後一個效果:

<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必須要注意的地方總結的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More