寫CSS_關(guān)于Border你可能需要注意的地方第1/2頁
更新時間：2007年12月11日 21:48:39 作者：
今天寫了一段CSS,寫時突然想到的,寫出來和大家分享一下; 我們可能早已習(xí)慣了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
<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的小藍(lán)盒子,右邊放一個寬100px的紅盒子.這樣應(yīng)該正好放下對吧? 因為300+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í)行]
最后的效果是這樣的:
沒有放下,原因就是因為我寫了一個border:1px; 那我們把他去掉看一下.
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
不通過JavaScript實現(xiàn)的自動滾動視差效果
這篇文章介紹了一種通過CSS3實現(xiàn)的視差（Parallax）效果，這個效果通過在一個元素上疊加多個背景圖片，并使用-webkit- transition-屬性來實現(xiàn)。2009-04-04
Div CSS absolute與relative的區(qū)別小結(jié)
Div + CSS 進(jìn)行網(wǎng)頁布局，適當(dāng)?shù)剡\用 absolute 與 relative，能給布局帶來意想不到的效果和方便，達(dá)到事半功倍…本文介紹了關(guān)于 absolute 與 relative 的運用。2007-12-12
不用javascript實現(xiàn)帶序號的表格隔行換色的效果
這篇文章使用css實現(xiàn)隔行換色的方法，需要的朋友可以參考一下2007-11-11
用js實現(xiàn)的DIV+CSS編輯器代碼...2007-03-03
模仿combox(select)控件，不用為美化select煩惱了。
模仿combox(select)控件，不用為美化select煩惱了。...2006-12-12
學(xué)習(xí)小實例--滾動條的簡單實現(xiàn)
下面小編就為大家?guī)硪黄獙W(xué)習(xí)小實例--滾動條的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
2008-01-01
推薦徹底弄懂CSS盒子模式(DIV布局快速入門)...2007-03-03
在做前端項目時CSS的水平居中我們經(jīng)常使用，但有時還會用到CSS垂直居中，對于小白來說這個就有些難度了，下面看一下我是如何實現(xiàn)的2020-01-01
CSS3是現(xiàn)代Web開發(fā)中不可缺少的技術(shù),提供豐富視覺效果和布局能力,CSS3引入新選擇器、媒體查詢、漸變、陰影、過渡和動畫等特性,支持響應(yīng)式設(shè)計和用戶體驗優(yōu)化,兼容性和性能仍是挑戰(zhàn),未來將結(jié)合JavaScript實現(xiàn)更互動的效果2024-11-11