寫CSS_關于Border你可能需要注意的地方第1/2頁
更新時間：2007年12月11日 21:48:39 作者：
今天寫了一段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>
看一下效果:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
最后的效果是這樣的:
沒有放下,原因就是因為我寫了一個border:1px; 那我們把他去掉看一下.
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
先說一個場景,例如:
一個寬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>
看一下效果:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
最后的效果是這樣的:
沒有放下,原因就是因為我寫了一個border:1px; 那我們把他去掉看一下.
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關文章
SPAN元素和DIV元素有的區(qū)別...2007-02-02
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全詳解
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全詳解...2007-08-08
div的dispaly:inline樣式 和span的區(qū)別
為什么在ie里執(zhí)行后這段代碼 兩個span標簽雖在同一行但它們之間有空隙? 但是 兩個div標簽雖然在同一行就沒有空隙?2008-07-07
主要用于不能輸入中文的情況下，使用，這樣就不要用js2008-06-06
CSS:浮動清理，不使用 clear:both標簽 在進行浮動布局時，大多數(shù)人都深知，在必要的地方進行浮動清理：<div style="clear:both;"></div>。2008-07-07
不用float實現(xiàn)div模塊居中布局...2007-02-02
為了兼容和區(qū)分多瀏覽器我們需要用一些css hack來解決這些問題，但不建議用，能不用則不用2008-08-08
調用265天氣預報，不顯示鏈接...2006-12-12
IE和FIREFOX下CSS的區(qū)別與解決方法...2007-03-03
純css實現(xiàn)的圓角邊框效果代碼2008-04-04