寫CSS_關於Border你可能需要注意的地方第1/2頁

今天寫了一段CSS,寫時突然想到的,寫出來和大家分享一下; 我們可能早已習慣了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
<div id="yellow">
<div id="blue">300px</div>
<div id="red">100px</div>
</div>

看一下效果: xmlns="http://www.w3.org/1999/xhtml">

400px

300px100px