寫CSS_關(guān)于Border你可能需要注意的地方
更新時(shí)間：2007年12月11日 21:48:39 作者：
恩,這下對(duì)了,正好放下.
所以說(shuō):
邊框是計(jì)算在width外邊的. 是這樣嗎? 我們接著看下邊的代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
如果你是用IE; 那么你會(huì)看他們間隔小了很多,FIREFOX應(yīng)該和最開(kāi)始的效果一樣沒(méi)有變化;
接著看最后一個(gè)效果:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
這個(gè)里邊兩個(gè)小盒子都有邊框,在寬度沒(méi)有變的情況下,在IE中放下了. FIREFOX不會(huì)變的.
看代碼區(qū)別,我少加了:
程序代碼
<!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">
如果不加(完全沒(méi)有); 應(yīng)該是按html3.0執(zhí)行,這一點(diǎn)我不太確定。
程序代碼
轉(zhuǎn)一段：
DOCTYPE是document type(文檔類型)的簡(jiǎn)寫，用來(lái)說(shuō)明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文檔類型定義，里面包含了文檔的規(guī)則，瀏覽器就根據(jù)你定義的DTD來(lái)解釋你頁(yè)面的標(biāo)識(shí)，并展現(xiàn)出來(lái)。
寫出來(lái)就是友情提醒一下在寫CSS千萬(wàn)把這個(gè)記住，如果頁(yè)面比較要求不是相相相當(dāng)?shù)膰?yán)格，計(jì)算時(shí)盡可能留出一點(diǎn)間隔來(lái)。這樣即使有1px的邊框，也不會(huì)對(duì)頁(yè)面造成嚴(yán)重影響，1px還好一些，如果是10px呢，你的頁(yè)面就完了。我比較傾向于:如果盒子有width就不要加padding,不加border是不太可能的。多套一兩層沒(méi)有人會(huì)笑話，這些可以避開(kāi)很多的瀏覽器兼容的問(wèn)題。
相關(guān)文章
不通過(guò)JavaScript實(shí)現(xiàn)的自動(dòng)滾動(dòng)視差效果
這篇文章介紹了一種通過(guò)CSS3實(shí)現(xiàn)的視差（Parallax）效果，這個(gè)效果通過(guò)在一個(gè)元素上疊加多個(gè)背景圖片，并使用-webkit- transition-屬性來(lái)實(shí)現(xiàn)。2009-04-04
Div CSS absolute與relative的區(qū)別小結(jié)
Div + CSS 進(jìn)行網(wǎng)頁(yè)布局，適當(dāng)?shù)剡\(yùn)用 absolute 與 relative，能給布局帶來(lái)意想不到的效果和方便，達(dá)到事半功倍…本文介紹了關(guān)于 absolute 與 relative 的運(yùn)用。2007-12-12
不用javascript實(shí)現(xiàn)帶序號(hào)的表格隔行換色的效果
這篇文章使用css實(shí)現(xiàn)隔行換色的方法，需要的朋友可以參考一下2007-11-11
用js實(shí)現(xiàn)的DIV+CSS編輯器代碼...2007-03-03
模仿combox(select)控件，不用為美化select煩惱了。
模仿combox(select)控件，不用為美化select煩惱了。...2006-12-12
學(xué)習(xí)小實(shí)例--滾動(dòng)條的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇學(xué)習(xí)小實(shí)例--滾動(dòng)條的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
2008-01-01
推薦徹底弄懂CSS盒子模式(DIV布局快速入門)...2007-03-03
在做前端項(xiàng)目時(shí)CSS的水平居中我們經(jīng)常使用，但有時(shí)還會(huì)用到CSS垂直居中，對(duì)于小白來(lái)說(shuō)這個(gè)就有些難度了，下面看一下我是如何實(shí)現(xiàn)的2020-01-01
CSS3是現(xiàn)代Web開(kāi)發(fā)中不可缺少的技術(shù),提供豐富視覺(jué)效果和布局能力,CSS3引入新選擇器、媒體查詢、漸變、陰影、過(guò)渡和動(dòng)畫等特性,支持響應(yīng)式設(shè)計(jì)和用戶體驗(yàn)優(yōu)化,兼容性和性能仍是挑戰(zhàn),未來(lái)將結(jié)合JavaScript實(shí)現(xiàn)更互動(dòng)的效果2024-11-11