寫CSS_關(guān)于Border你可能需要注意的地方第1/2頁
更新時(shí)間：2007年12月11日 21:48:39 作者：
今天寫了一段CSS,寫時(shí)突然想到的,寫出來和大家分享一下; 我們可能早已習(xí)慣了padding在不同瀏覽器中的不同之處, 但這個(gè)你不一定注意過;
先說一個(gè)場景,例如:
一個(gè)寬400px的黃盒子,左邊放一個(gè)300px的小藍(lán)盒子,右邊放一個(gè)寬100px的紅盒子.這樣應(yīng)該正好放下對吧? 因?yàn)?00+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í)行]
最后的效果是這樣的:
沒有放下,原因就是因?yàn)槲覍懥艘粋€(gè)border:1px; 那我們把他去掉看一下.
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
先說一個(gè)場景,例如:
一個(gè)寬400px的黃盒子,左邊放一個(gè)300px的小藍(lán)盒子,右邊放一個(gè)寬100px的紅盒子.這樣應(yīng)該正好放下對吧? 因?yàn)?00+100正好是400呀! 好了,先試一試!
我開始寫了(頭部省略):
復(fù)制代碼 代碼如下:
<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í)行]
最后的效果是這樣的:
沒有放下,原因就是因?yàn)槲覍懥艘粋€(gè)border:1px; 那我們把他去掉看一下.
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
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í)行后這段代碼 兩個(gè)span標(biāo)簽雖在同一行但它們之間有空隙? 但是 兩個(gè)div標(biāo)簽雖然在同一行就沒有空隙?2008-07-07
主要用于不能輸入中文的情況下，使用，這樣就不要用js2008-06-06
CSS 浮動(dòng)清理，不使用 clear:both標(biāo)簽
CSS:浮動(dòng)清理，不使用 clear:both標(biāo)簽 在進(jìn)行浮動(dòng)布局時(shí)，大多數(shù)人都深知，在必要的地方進(jìn)行浮動(dòng)清理：<div style="clear:both;"></div>。2008-07-07
不用float實(shí)現(xiàn)div模塊居中布局...2007-02-02
為了兼容和區(qū)分多瀏覽器我們需要用一些css hack來解決這些問題，但不建議用，能不用則不用2008-08-08
調(diào)用265天氣預(yù)報(bào)，不顯示鏈接
調(diào)用265天氣預(yù)報(bào)，不顯示鏈接...2006-12-12
IE和FIREFOX下CSS的區(qū)別與解決方法...2007-03-03
純css實(shí)現(xiàn)的圓角邊框效果代碼2008-04-04