定位屬性:
定位就是指把元素(標簽)放在哪個位置的猛。
實際上,每個元素都有個定位屬性:position想虎。其有4個值:
1卦尊,position:static ——靜態(tài)定位;——所有元素的初始定位方式就是靜態(tài)(沒有額外使用position或浮動的時候)
2舌厨,position:relative; ——相對定位:其實就是指一個元素在其父盒子中本來該放的位置(靜態(tài)位置)的一個相對值(錯位值)岂却。必須使用left和top配合來設置該值。
a)舉例:position:relative; left:10px; top:15px;
3裙椭,position:absolute; ——絕對定位躏哩;指該元素相對于其上級具有非靜態(tài)定位的元素的一個絕對位置。如果上級沒有非靜態(tài)定位設置揉燃,則會相對網(wǎng)頁主體(html標簽)扫尺。常常絕對定位就是用于在整個網(wǎng)頁上進行“絕對位置設定”——就是相對網(wǎng)頁主體來說。
4炊汤,position:fixed; ——固定定位正驻;有點類似絕對定位,但其是相對于整個“可視窗口”來設置的定位婿崭,(絕對定位是相當于網(wǎng)頁的版面的絕對值)。固定定位的盒子是以“窗口”為參照系肴颊,而絕對定位和相對定位的盒子是以網(wǎng)頁為參照系氓栈。
列表樣式
列表樣式可以設置其列表符號,列表圖片(代替列表符號)婿着,列表符號的位置授瘦。
list-style-type: 設置列表符號醋界,可以是我們之前學的無序列表符或有序列表符。
list-style-image:設置列表的圖片(此時list-style-type自動就無效了提完,被代替了)
list-style-position: 指將列表符放在li的里面還是外面:outside(外面形纺,默認值),inside(里面)
list-style: 這是綜合屬性徒欣,可以設置上述幾個逐样。
css優(yōu)先級:
基本優(yōu)先級:
!important 〉 行內(nèi)樣式 > id選擇器 > 類選擇器|偽類選擇器 > 標簽選擇器 > 通用選擇器 > 繼承屬性
居中問題
前提: 父盒子固定大小(寬高)打肝,其里面的“內(nèi)容”在水平和垂直方向的居中對齊的常見做法:
內(nèi)部居中:
水平居中:
A:“內(nèi)容”為一行文字或文字性行內(nèi)元素(span脂新,a,b粗梭,u):在父盒子上設置text-align:center;
B:“內(nèi)容”為具有一定形狀的行內(nèi)元素(如img争便,input,textarea):在父盒子上設置text-align:center;
C:“內(nèi)容”為塊元素: margin:0 auto;
垂直居中:
A:“內(nèi)容”為一行文字或文字性行內(nèi)元素(span断医,a滞乙,b,u):在父盒子上設置line-height為父盒子的高度鉴嗤;
B:“內(nèi)容”為具有一定形狀的行內(nèi)元素(如img斩启,input,textarea):同塊元素(C)
C:“內(nèi)容”為塊元素: 在塊元素上設置:position:relative;top為父盒子高度一半;margin-top為該塊元素高度一半的負值(top:50%;margin-top:-50% 居中)
外部居中:
img與textarea與其緊挨著的文字垂直居中對齊:設置其vertical-align:middle;
input與緊挨著的文字自然垂直居中