2009年09月04日 星期五 下午 01:33
padding 屬性是css用于在一個聲明中設(shè)置所有 padding 屬性的簡寫屬性。
Padding屬性包含了padding left ：左補(bǔ)距離（設(shè)置距左內(nèi)邊距） ；padding top：頭頂補(bǔ)距離（設(shè)置距頂部內(nèi)邊距）；padding right ：右補(bǔ)距離（設(shè)置距右內(nèi)邊距） ；padding bottom ：底補(bǔ)距離（設(shè)置距低內(nèi)邊距）。其二維構(gòu)建圖可見CSS屬性二維圖。
padding left用法：padding-left:10px; 這個意思距離左邊補(bǔ)距10像素，可跟百分比如（padding-left:10%; 距離左邊補(bǔ)10%的距離）；
padding right用法：padding-right:10px; 這個意思距離右邊補(bǔ)距10像素，可跟百分比如（padding-right:10%; 距離右邊補(bǔ)10%的距離）；
padding top用法：padding-top:10px; 這個意思距離頂邊補(bǔ)距10像素，可跟百分比如（padding-top:10%; 距離頂邊補(bǔ)10%的距離）；
padding bottom用法：padding-bottom:10px; 這個意思距離低邊補(bǔ)距10像素，可跟百分比如（padding-bottom:10%; 距離底邊補(bǔ)10%的距離）；
注意padding中間的鏈接“ - ”號，設(shè)置距離值時用“ ： ”并賦予值，并以“ ； ”結(jié)束，并且全部用小寫半角字母。
如果是左右上下都需要設(shè)置padding的值時可以簡寫來實(shí)現(xiàn)，以優(yōu)化css 。
如簡寫方式有：
padding:10px; 意思就是上下左右補(bǔ)丁距離就是10px（10像素）等于padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right:10px; 一樣效果簡寫；
padding:5px 10px; 意思上下補(bǔ)丁距離為5px，左右的補(bǔ)丁距離為10px，等于padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; 一樣效果簡寫；
padding:5px 6px 7px; 意思上補(bǔ)丁距離5px，下補(bǔ)丁距離為7PX，左右補(bǔ)丁距離為6px，等于padding-top:5px; padding-bottom:7px; padding-left:6px; padding-right:6px; 一樣效果簡寫；
padding:5px 6px 7px 8px; 意思上補(bǔ)丁為5px，左補(bǔ)丁距離為6px ，下補(bǔ)丁距離為7px，左補(bǔ)丁距離8px，等于等于padding-top:5px; padding-right:6px; padding-bottom:7px; padding-right:8px; 一樣效果簡寫；
其中padding:5px 6px 7px 8px; 的轉(zhuǎn)法為順時針即圖：
padding的屬性轉(zhuǎn)法圖解
上面即是css網(wǎng)站總結(jié)的padding的屬性與用法。其中margin的用與padding相同。
很多朋友問過我absolute與relative怎么區(qū)分，怎么用？我們都知道absolute是絕對定位，relative是相對定位，但是這個絕對與相對是什么意思呢？絕對是什么地方的絕對，相對又是相對于什么地方而言的呢？那他們又有什么樣的特性，可以做出什么樣的效果呢？關(guān)于兩者之間又有什么樣的技巧呢？下面我們就來一一解讀。
Absolute，CSS中的寫法是：position:absolute; 他的意思是絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進(jìn)行定位，在沒有設(shè)定TRBL，默認(rèn)依據(jù)父級的做標(biāo)原始點(diǎn)為原始點(diǎn)。如果設(shè)定TRBL并且父級沒有設(shè)定position屬性，那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位，位置將由TRBL決定。
一般來講，網(wǎng)頁居中的話用Absolute就容易出錯，因?yàn)榫W(wǎng)頁一直是隨著分辨率的大小自動適應(yīng)的，而Absolute則會以瀏覽器的左上角為原始點(diǎn)，不會應(yīng)為分辨率的變化而變化位置。很多人出錯就在于這點(diǎn)上出錯。而網(wǎng)頁居左其特性與Relative很相似，但是還是有本質(zhì)的區(qū)別的。
Relative，CSS中的寫法是：position:relative; 他的意思是絕對相對定位，他是參照父級的原始點(diǎn)為原始點(diǎn)，無父級則以BODY的原始點(diǎn)為原始點(diǎn)，配合TRBL進(jìn)行定位，當(dāng)父級內(nèi)有padding等CSS屬性時，當(dāng)前級的原始點(diǎn)則參照父級內(nèi)容區(qū)的原始點(diǎn)進(jìn)行定位。
有時我們還需要依靠z-index來設(shè)定容器的上下關(guān)系，數(shù)值越大越在最上面，數(shù)值范圍是自然數(shù)。當(dāng)然有一點(diǎn)要注意，父子關(guān)系是無法用z-index來設(shè)定上下關(guān)系的，一定是子級在上父級在下。
二 詳解定位與定位應(yīng)用
http://blog.sina.com.cn/u/4bcf4a5e010008o0css絕對定位相對定位定位一直是WEB標(biāo)準(zhǔn)應(yīng)用中的難點(diǎn)，如果理不清楚定位那么可能應(yīng)實(shí)現(xiàn)的效果實(shí)現(xiàn)不了，實(shí)現(xiàn)了的效果可能會走樣。如果理清了定位的原理，那定位會讓網(wǎng)頁實(shí)現(xiàn)的更加完美。
定位的定義：
在CSS中關(guān)于定位的內(nèi)容是：
position:relative | absolute | static | fixed
static(靜態(tài)) 沒有特別的設(shè)定，遵循基本的定位規(guī)定，不能通過z-index進(jìn)行層次分級。
relative(相對定位) 對象不可層疊、不脫離文檔流，參考自身靜態(tài)位置通過 top,bottom,left,right 定位，并且可以通過z-index進(jìn)行層次分級。
absolute(絕對定位) 脫離文檔流，通過 top,bottom,left,right 定位。選取其最近一個最有定位設(shè)置的父級對象進(jìn)行絕對定位，如果對象的父級沒有設(shè)置定位屬性，absolute元素將以body坐標(biāo)原點(diǎn)進(jìn)行定位，可以通過z-index進(jìn)行層次分級。
fixed（固定定位） 這里所固定的參照對像是可視窗口而并非是body或是父級元素?？赏ㄟ^z-index進(jìn)行層次分級。
注：
CSS中定位的層疊分級：z-index: auto | namber;
auto 遵從其父對象的定位
namber 無單位的整數(shù)值?？蔀樨?fù)數(shù)
定位的原理：
1.可以位移的元素 （相對定位）
在本文流中，任何一個元素都被文本流所限制了自身的位置，但是通過CSS我們依然使得這些元素可以改變自己的位置，我們可以通過float來讓元素浮動，也可以通過margin來讓元素產(chǎn)生位置移動。但事實(shí)上那并非是真實(shí)的位移，因?yàn)?，那只是通過加大margin值來實(shí)現(xiàn)的障眼法。而真正意義上的位移是通過top,right,bottom,left（下稱TRBL，TRBL可以折分使用。）針對一個相對定位的元素所產(chǎn)生的。我們看下面的圖：
我們看圖中是一個相對定位的元素
#first {
width:200px;
height: 50px;
margin:25px;
border:25px solid #333;
padding:25px;
position:relative;
top: 50px;
left: 50px;
}
而下方是一塊默認(rèn)定位的黑色區(qū)塊
#second {
width:400px;
height:75px;
margin:0;
border:0;
padding:0;
backgroud-color:#333;
}
我們看到這個處在文本流的區(qū)塊被上面的相對定位擋住了一部分，這說明：“當(dāng)元素被設(shè)置相對定位或是絕對定位后，將自動產(chǎn)生層疊，他們的層疊級別自然的高于文本流”。除非設(shè)置其z-index值為負(fù)值。并且我們發(fā)現(xiàn)當(dāng)相對定位元素進(jìn)行位移后，表現(xiàn)內(nèi)容已經(jīng)脫離了文本流，只是在本文流中還為原來的相對對定位留下了原有的總寬與總高（內(nèi)容的高度或是寬度加上 margin\border\padding的數(shù)值）。這說明在相對定位中，雖然表現(xiàn)區(qū)脫離了原來的文本流，但是在文本流中還還有此相對定位的老窩。這點(diǎn)要特別注意，因?yàn)樵趯?shí)際應(yīng)用中如果相對定位的位移數(shù)值過大，那么原有的區(qū)域就會形成一塊空白。
并且我們注意，定位元素的坐標(biāo)點(diǎn)是在margin值的左上邊緣點(diǎn)，即圖中的B點(diǎn)。那么所有的位移的計算將以這個點(diǎn)為基礎(chǔ)進(jìn)行元素的推動。
