CSS-posiziton
1. 想要實(shí)現(xiàn)，”返回頂部”永遠(yuǎn)位于頁(yè)面的右下角。需要用到position函數(shù)。CSS:層疊樣式表。用到了分層的功能。
position:fixed;? 永遠(yuǎn)固定在一個(gè)地方。
?運(yùn)行結(jié)果：總是位于頁(yè)面的右下角
?
2. margin-top:52px; 讓它離上面是52px，這樣兩層就沒(méi)有重疊的部分了，有了2px的間距，文字就能正常顯示了。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.pg-header{background-color:#FF83FA;height:50px;position:fixed;top:0px;left:0px;right:0px;}.pg-body{background-color:#dddddd;height:5000px;margin-top:52px;}</style> </head> <body><div class="pg-header">頭部</div><div class="pg-body">內(nèi)容</div> </body> </html>?運(yùn)行效果：
?
3. 插播：
?
margin:0 auto; 是設(shè)置對(duì)象四邊的外延邊距，被稱(chēng)為外補(bǔ)丁或外邊距。指的是：上下=0； 左右自動(dòng)居中。
text-align:center 是規(guī)定元素中的文本的水平對(duì)齊方式。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="position:relative;width:500px;height:400px;border:1px solid red;margin:0 auto;"></div> </body> </html>?運(yùn)行結(jié)果：
?
?
關(guān)于height與line-height的說(shuō)明：
line-height是行高，height就是高，通常height是對(duì)于某個(gè)框架或者圖片來(lái)弄的，line-height用于文字。
如果要實(shí)際效果你可以寫(xiě)一段文字，分好幾行，然后對(duì)它做line-height屬性，就會(huì)注意到變化了。
比如：
<div >abc<br/>abc<br/>abc<br/>abc<br/>abc<br/></div>
調(diào)整20px這個(gè)值，行間距就會(huì)發(fā)生變化
另外，line-height和height組合到一塊兒，還有一種效果，就是如果把它們的值設(shè)置的一樣了，文字就會(huì)在垂直方向居中。
?
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"/> </head><body><div style="height:200px;width:200px;line-height:100px;background-color:#dddddd;">abc<br/>abc<br/></div> </body> </html>運(yùn)行結(jié)果：所以如果設(shè)置行間距=height的話(huà)，就把屏幕一劈兩半，達(dá)到了垂直居中的效果了。
?
?最終總結(jié)：???????????
height:100px;?? line-height:100px;-----------實(shí)現(xiàn)了垂直居中。
text-align:center;-----------實(shí)現(xiàn)了文字的水平居中。?
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"> </head> <body><div style="width:200px;height:200px;background-color:#dddddd;position:relative;"><div style="width:100px;background-color:red;position:absolute;left:50px;right:50px;top:50px;bottom:50px;height:100px;line-height:100px;text-align:center;">中中中</div></div> </body> </html>?效果圖：
?
4. relative+absolute：
???? relative單獨(dú)存在的時(shí)候沒(méi)有任何意義。
?? <div style="position:absolute; top:0; left:0;"></div>? 放在父類(lèi)標(biāo)簽的某個(gè)位置。
?? ?left:0可以改成left:-15px;? 這樣就會(huì)位于父類(lèi)的左邊的外面。不一定非要位于父類(lèi)的里面。只不過(guò)是以父類(lèi)作為參照位置罷了。
定義了position:absolute以后；就可以定義 left:0; right:0; bottom:0; top:0 這四個(gè)屬性了。
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="position:relative;width:500px;height:150px;border:1px solid red;margin:0 auto;"><div style="position:absolute;left:0;bottom:0;width:50px;height:50px;background-color:black;"></div></div><div style="position:relative;width:500px;height:150px;border:1px solid red;margin:0 auto;"><div style="position:absolute;right:0;bottom:0;width:50px;height:50px;background-color:black;"></div></div><div style="position:relative;width:500px;height:150px;border:1px solid red;margin:0 auto;"><div style="position:absolute;right:0;top:0;width:50px;height:50px;background-color:black;"></div></div> </body> </html>?
?運(yùn)行結(jié)果：
?
5. 用三層實(shí)現(xiàn)彈窗的效果：
?? 可以說(shuō)3層是并列關(guān)系：
? 第1層，正常設(shè)置就可以了。
? 第2層和第3層是漂層，所以需要設(shè)置position：fixed，為了控制哪一層在最上面，還需要設(shè)置Z-index。為了能看到效果，第2層還需要設(shè)置opacity，否則會(huì)把第1層檔得嚴(yán)嚴(yán)實(shí)實(shí)。
opacity:0.3; 0.3----1直接，設(shè)置當(dāng)前的透明度。opacity是不透明，曖昧的意思。Z-index: 誰(shuí)的這個(gè)值大，誰(shuí)就在上面。
fixed之后，相當(dāng)于漂起來(lái)了，就無(wú)法通過(guò)margin：0 auto 設(shè)置居中了。
定義了 position：fixed 以后，必須定義上下左右中的至少兩項(xiàng)，否則不知道漂在哪個(gè)位置。 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="z-index:10;position:fixed;top:50%;left:50%;background-color:white;height:400px;width:500px;"></div><div style="position:fixed;z-index:9;background-color:black;top:0;bottom:0;left:0;right:0;opacity:0.5;"></div><div style="height:5000px;background-color:green;">sss</div> </body> </html>
?運(yùn)行結(jié)果：以左上角為參考點(diǎn)，50%-50%居中了。
?
6. 加上 margin-left:-250px; margin-top:-200px; 回到中間了。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="z-index:10;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-200px;background-color:white;height:400px;width:500px;"></div><div style="position:fixed;z-index:9;background-color:black;top:0;bottom:0;left:0;right:0;opacity:0.5;"></div><div style="height:5000px;background-color:green;">sss</div> </body> </html>
?運(yùn)行結(jié)果：
?
?
7. display:none 的勾選和不勾選，就能實(shí)現(xiàn)折層的出現(xiàn)和不出現(xiàn)。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="display:none;z-index:10;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-200px;background-color:white;height:400px;width:500px;"><input type="text"/><input type="text"/></div><div style="position:fixed;z-index:9;background-color:black;top:0;bottom:0;left:0;right:0;opacity:0.5;"></div><div style="height:5000px;background-color:green;">sss</div> </body> </html>?運(yùn)行結(jié)果：
?
轉(zhuǎn)載于:https://www.cnblogs.com/momo8238/p/7421818.html
總結(jié)
以上是生活随笔為你收集整理的CSS-posiziton的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： I2C协议学习
- 下一篇： CSS3详解：transform、tra