布局相關(guān)屬性:
定位方式 —— position:relative(正常定位)absolute(根據(jù)父元素進(jìn)行定位)fixed(根據(jù)瀏覽器窗口進(jìn)行定位) static(沒(méi)有定位)inherit(繼承)?
定位 —— left (左) right(右)? top(上)? bottom(右)
優(yōu)先級(jí)——z-index:n? 層覆蓋先后順序槐秧,n值越大券勺,顯示在越上層
顯示屬性——display:none(層不顯示)? bloc(塊顯示)? inline(內(nèi)聯(lián)顯示)
一第股、定位方式和定位
1.relative正常定位
.div1{
background-color:red;
position:relative;
left:20px;
top:20px;
}
2.absolute根據(jù)父元素進(jìn)行定位
.div2{
background-color:red;
width:100px;
height:100px;
position:absolute;
left:20px;
top:20px;
}
3.fixed根據(jù)瀏覽器窗口進(jìn)行定位
.div3{
background-color:blue;
width:60px;
height:120px;
position:fixed;
left:10px;
top:10px;
}
二砂吞、優(yōu)先級(jí)
z-index:n? 層覆蓋先后順序穗酥,n值越大袜香,顯示在越上層动壤,默認(rèn)n=0
.div1{
background-color:green;
width:200px;
height:200px;
position:relative;
left:100px;
top:200px;
z-index:2;
}
.div3{
background-color:red;
width:100px;
height:100px;
position:absolute;
left:20px;
top:20px;
z-index:1;
}
三咳榜、顯示屬性
display:none(層不顯示)? bloc(塊顯示)? inline(內(nèi)聯(lián)顯示)
.div4,.span1{
background-color:green;
}
.div5,.span2{
background-color:red;
}
.div4,.div5{
display:inline;
}
.span1,.span2{
display:block;
}
待續(xù)牢撼。匙隔。。