當(dāng)前位置：首頁(yè) > news >正文

網(wǎng)站備案信息核驗(yàn)單填寫成都網(wǎng)絡(luò)推廣優(yōu)化

news 2025/7/13 8:38:20

網(wǎng)站備案信息核驗(yàn)單填寫,成都網(wǎng)絡(luò)推廣優(yōu)化,北京市疫情最新消息,2018年做網(wǎng)站還能文章目錄定位概述偏移量（offset)坐標(biāo)及方向相對(duì)定位——position絕對(duì)定位——absolute固定定位 ——fixed粘滯定位——sticky絕對(duì)定位對(duì)布局的影響水平布局：垂直方向定位概述定位（position) 定位是一種更加高級(jí)的布局手段通過(guò)定位可以將…

文章目錄

定位概述
偏移量（offset)
坐標(biāo)及方向
相對(duì)定位——position
絕對(duì)定位——absolute
固定定位 ——fixed
粘滯定位——sticky
絕對(duì)定位對(duì)布局的影響
- 水平布局：
- 垂直方向

定位概述

定位（position)
定位是一種更加高級(jí)的布局手段
通過(guò)定位可以將元素?cái)[放到頁(yè)面的任意位置，而且不會(huì)對(duì)其他元素產(chǎn)生影響。
使用position屬性來(lái)設(shè)置定位
可選值:
static 默認(rèn)值，元素是靜止的沒(méi)有開(kāi)啟定位
relative 開(kāi)啟元素的相對(duì)定位
absolute 開(kāi)啟元素的絕對(duì)定位
fixed 開(kāi)啟元素的固定定位
sticky開(kāi)啟元素的粘滯定位

偏移量（offset)

當(dāng)元素開(kāi)啟了定位以后，可以通過(guò)偏移量來(lái)設(shè)置元素的位置

top：定位元素和定位位置上邊的距離
bottom：定位元素和定位位置下邊的距離
定位元素垂直方向的位置由top和bottom兩個(gè)屬性來(lái)控制，通常情況下我們只會(huì)使用其中一個(gè)
top值越大,定位元素越向下移動(dòng)
bottom值越大，定位元素越向上移動(dòng)
left：定位元素和定位位置的左側(cè)距離
right：定位元素和定位位置的右側(cè)距離
定位元素水平方向的位置由left和right兩個(gè)屬性控制
通常情況下只會(huì)使用一個(gè)
left越大元素越靠右
right越大元素越靠左

坐標(biāo)及方向

在頁(yè)面中坐標(biāo)的樣式：
在這里插入圖片描述

相對(duì)定位——position

相對(duì)定位:
當(dāng)元素的position屬性值設(shè)置為relative時(shí)則開(kāi)啟了元素的相對(duì)定位

相對(duì)定位的特點(diǎn):
1.元素開(kāi)啟相對(duì)定位以后，如果不設(shè)置偏移量元素不會(huì)發(fā)生任何的變化
2.相對(duì)定位是參照于元素在文檔流中的位置進(jìn)行定位的
3.相對(duì)定位會(huì)提升元素的層級(jí)
4.相對(duì)定位不會(huì)使元素脫離文檔流
5.相對(duì)定位不會(huì)改變?cè)氐男再|(zhì)塊還是塊，行內(nèi)還是行內(nèi)

eg：元素開(kāi)啟相對(duì)定位以后，如果不設(shè)置偏移量元素不會(huì)發(fā)生任何的變化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.box1,.box2,.box3{width: 100px;height: 100px;}.box1{background-color: teal;}.box2{background-color: tomato;position: relative;}.box3{background-color:rgb(236, 233, 61);}</style></head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body>
</html>

在這里插入圖片描述
eg：相對(duì)定位是參照于元素自己在文檔流中的位置進(jìn)行定位的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.box1,.box2,.box3{width: 100px;height: 100px;}.box1{background-color: teal;}.box2{background-color: tomato;position: relative;left: 100px;top: -100px}.box3{background-color:rgb(236, 233, 61);}</style></head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body>
</html>

在這里插入圖片描述

eg：提升元素的層級(jí)

   .box2{background-color: tomato;position: relative;left: 50px;top: -100px}

在這里插入圖片描述

絕對(duì)定位——absolute

當(dāng)元素的position屬性值設(shè)置為absolute時(shí)，則開(kāi)啟了元素的絕對(duì)定位
絕對(duì)定位的特點(diǎn):
1.開(kāi)啟絕對(duì)定位后，如果不設(shè)置偏移量元素的位置不會(huì)發(fā)生變化
2.開(kāi)啟絕對(duì)定位后,元素會(huì)從文檔流中脫離
3.行內(nèi)元素：行內(nèi)元素脫離文檔流以后會(huì)變成塊元素，特點(diǎn)和塊元素一樣。
4.塊元素：塊元素不再獨(dú)占頁(yè)面的一行；如果沒(méi)有設(shè)置寬度和高度，脫離文檔流以后,塊元素的寬度和高度默認(rèn)都被內(nèi)容撐開(kāi)；如果設(shè)置了寬度和高度，就按設(shè)置的來(lái)。
5.絕對(duì)定位會(huì)使元素提升一個(gè)層級(jí)
6.絕對(duì)定位元素是相對(duì)于其包含塊進(jìn)行定位的
包含塊( containing block ):
正常情況下:
包含塊就是離當(dāng)前元素最近的祖先塊元素
<div> <div></div> </div>div的包含塊就是div
<div><span><em>hello</em></span></div>em的包含塊也是div，因?yàn)閟pan是行內(nèi)元素
絕對(duì)定位的包含塊:
包含塊就是離它最近的開(kāi)啟了定位（即position不是static即可）的祖先元素，
如果所有的祖先元素都沒(méi)有開(kāi)啟定位，則根元素（html）就是它的包含塊
初始包含塊：html（根元素）
eg：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><style>body{font-size: 50px;}.box0{width: 100px;height: 100px;background-color: rgb(52, 78, 102);}.box1 {width: 400px;height: 400px;background-color: teal;}.box2 {width: 100px;height: 100px;background-color: tomato;position:absolute;left: 0px;top: 0px;}.box3 {width: 200px;height: 200px;background-color: rgb(236, 233, 61);}</style></head><body><div class="box0">0</div><div class="box1">1<div class="box3">3<div class="box2">2</div></div></div></body>
</html>

輸出：
在這里插入圖片描述
如果開(kāi)啟2的定位：

      .box1 {position: relative;width: 400px;height: 400px;background-color: teal;}

輸出：
在這里插入圖片描述

如果開(kāi)啟3的定位：

.box3 {position: relative;width: 200px;height: 200px;background-color: rgb(236, 233, 61);}

在這里插入圖片描述

固定定位 ——fixed

固定定位:

將元素的position屬性設(shè)置為fixed則開(kāi)啟了元素的固定定位
固定定位也是一種絕對(duì)定位（absoult），所以固定定位的大部分特點(diǎn)都和絕對(duì)定位一樣：
1.開(kāi)啟固定定位后，如果不設(shè)置偏移量元素的位置不會(huì)發(fā)生變化
2.開(kāi)啟固定定位后,元素會(huì)從文檔流中脫離
3.固定定位會(huì)改變?cè)氐男再|(zhì)，行內(nèi)變成塊,塊的寬高被內(nèi)容撐開(kāi)
（也就是脫離文檔流的特點(diǎn)）
4.固定定位會(huì)使元素提升一個(gè)層級(jí)
5.唯一不同的是固定定位永遠(yuǎn)參照于瀏覽器的視口（即窗口）進(jìn)行定位。

即當(dāng)滾動(dòng)條滾動(dòng)時(shí)，固定定位的元素的位置不會(huì)改變
eg：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><style>body{font-size: 50px;height: 1500px;}.box0{width: 100px;height: 100px;background-color: rgb(52, 78, 102);}.box1 {position: relative;width: 400px;height: 400px;background-color: teal;}.box2 {width: 100px;height: 100px;background-color: tomato;position:fixed;left: 0px;top: 0px;}.box3 {width: 200px;height: 200px;background-color: rgb(236, 233, 61);}</style></head><body><div class="box0">0</div><div class="box1">1<div class="box3">3<div class="box2">2</div></div></div></body>
</html>

在這里插入圖片描述

粘滯定位——sticky

該屬性，瀏覽器的支持度不高
粘滯定位

當(dāng)元素的position屬性設(shè)置為sticky時(shí)則開(kāi)啟了元素的粘滯定位
粘滯定位和相對(duì)定位的特點(diǎn)基本一致
1.元素開(kāi)啟相對(duì)定位以后，如果不設(shè)置偏移量元素不會(huì)發(fā)生任何的變化
2.相對(duì)定位會(huì)提升元素的層級(jí)
3.相對(duì)定位不會(huì)使元素脫離文檔流
4.相對(duì)定位不會(huì)改變?cè)氐男再|(zhì)塊還是塊，行內(nèi)還是行內(nèi)

不同的是：

粘滯定位可以在元素到達(dá)某個(gè)位置時(shí)將其固定
2.粘滯定位是參照于body進(jìn)行定位的
eg：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="stylesheet" href="../reset.css" /><style>.nav{/* width: 1246px; */width: 1250px;height: 50px;background-color: rgb(231,231,226);margin: 50px auto;position: sticky;top:100px;}.nav li{height:50px;float: left;/* 設(shè)置height=line-height可以使元素垂直居中 */line-height: 48px;}.nav a{display: block;color: slategray;text-decoration: none;font-size: 18px;padding: 0 42px;}.nav li:last-child a{/* 這樣寫或者將nav的寬度修改為 width: 1246px; */padding: 0 44px 0 44px;}.nav a:hover{background-color: #3f3f3f;color: white;}.box1{width: 200px;height: 1000px;background-color: darksalmon;}body{height: 2000px;}</style></head><body><ul class="nav"><li><a href="#">HTML/CSS</a></li><li><a href="#">Browser Side</a></li><li><a href="#">Server Side</a></li><li><a href="#">Programming</a></li><li><a href="#">XML</a></li><li><a href="#">Web Building</a></li><li><a href="#">Reference</a></li></ul><div class="box1"></div></body>
</html>

在這里插入圖片描述

絕對(duì)定位對(duì)布局的影響

也是相對(duì)于自己的包含快進(jìn)行分居中等位置操作

水平布局：

當(dāng)我們開(kāi)啟了絕對(duì)定位后，水平方向的布局等式就需要添加left和right兩個(gè)值，此時(shí)規(guī)則和之前一樣只是多添加了兩個(gè)值：
left + margin-left + border-left + padding-left + width + padding-rigth + border-right + margin-right + right = 包含塊的內(nèi)容寬度

當(dāng)發(fā)生過(guò)度約束:

如果9個(gè)值中沒(méi)有auto 則自動(dòng)調(diào)整right值以使等式滿足
如果有auto，則自動(dòng)調(diào)整auto的值以使等式滿足
可設(shè)置auto的值
margin width left right
因?yàn)閘eft和right的值默認(rèn)是auto,所以如果不指定left和right，則等式不滿足時(shí),會(huì)自動(dòng)調(diào)整這兩個(gè)值（著重調(diào)整right）
eg：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><style>.box1{width: 500px;height: 500px;background-color: darksalmon;position: relative;}.box2{position: absolute;width: 100px;height: 100px;background-color: darkseagreen;/* 寫不寫都一樣，因?yàn)槟J(rèn)值就是auto */left: auto;right: auto;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div> 
</body>
</html>

在這里插入圖片描述
如果：width，right，left都為auto時(shí)就不會(huì)顯示了

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><style>body{background-color: darksalmon;}.box1{width: 500px;height: 500px;background-color:rgba(253, 253, 253, 0.288);position: relative;}.box2{position: absolute;/* 寫不寫都一樣，因?yàn)槟J(rèn)值就是auto */width: auto;height: 100px;background-color: darkseagreen;/* 寫不寫都一樣，因?yàn)槟J(rèn)值就是auto */left: auto;right: auto;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div> 
</body>
</html>

輸出：
在這里插入圖片描述

水平居中方式：
要先指定 width，并且設(shè)置right = left = 0，水平居中才有效果

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><style>body{background-color: darksalmon;}.box1{width: 500px;height: 500px;background-color:rgba(253, 253, 253, 0.288);position: relative;}.box2{position: absolute; width: 100px;height: 100px;background-color: darkseagreen;left: 0;right: 0;margin-left: auto;margin-right: auto;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div> 
</body>
</html>

輸出：
在這里插入圖片描述

垂直方向

垂直方向布局的等式的也必須要滿足
top + margin-top/bottom + padding-top/bottom + border-top/border-bottom + height + bottom = 包含塊的內(nèi)容高度
所以可以利用這一特性，使元素垂直居中：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><style>body{background-color: darksalmon;}.box1{width: 500px;height: 500px;background-color:rgba(253, 253, 253, 0.288);position: relative;}.box2{position: absolute; width: 100px;height: 100px;background-color: darkseagreen;top: 0;bottom: 0;margin-top: auto;margin-bottom: auto;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div> 
</body>
</html>

在這里插入圖片描述
所以利用絕對(duì)定位可以使元素垂直水平居中

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><style>body{background-color: darksalmon;}.box1{width: 500px;height: 500px;background-color:rgba(253, 253, 253, 0.288);position: relative;}.box2{position: absolute; width: 100px;height: 100px;background-color: darkseagreen;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div> 
</body>
</html>

在這里插入圖片描述

查看全文

http://www.risenshineclean.com/news/60775.html

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

網(wǎng)站備案信息核驗(yàn)單填寫成都網(wǎng)絡(luò)推廣優(yōu)化

文章目錄

定位概述

偏移量（offset)

坐標(biāo)及方向

相對(duì)定位——position

絕對(duì)定位——absolute

固定定位 ——fixed

粘滯定位——sticky

絕對(duì)定位對(duì)布局的影響

水平布局：

垂直方向

相關(guān)文章：