整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
次我們來(lái)說(shuō)一下，HTML網(wǎng)頁(yè)中的定位，有很多小伙伴一定好奇，為什么我們寫(xiě)的代碼都是按順序羅列的而在網(wǎng)頁(yè)的展示效果中，我們的各種樣式，標(biāo)簽，圖片等東西都是出現(xiàn)在網(wǎng)頁(yè)的各個(gè)位置，網(wǎng)頁(yè)看起來(lái)很美觀，各種盒模型擺放合理，這是因?yàn)樵贖TML中有定位的能力，今天我們就來(lái)學(xué)習(xí)一下。
position在英語(yǔ)中是位置的意思，而在我們CSS代碼中position也是跟位置有關(guān)的，position有三個(gè)屬性值分別為relative（相對(duì)定位：相對(duì)于自己原來(lái)的位置進(jìn)行定位，但保留自己原來(lái)的位置，別的元素?zé)o法占用），absolute（絕對(duì)定位：相對(duì)于有定位的父級(jí)進(jìn)行定位，如果沒(méi)有則相對(duì)于文檔進(jìn)行定位，定位會(huì)脫離文檔，不保留原來(lái)的位置，會(huì)和原來(lái)的文檔不在一個(gè)層），fixed（位置定位：他的位置不會(huì)隨著滑輪的滾動(dòng)而改變較常見(jiàn)于彈窗廣告，他也會(huì)脫離文檔流）。
我們說(shuō)完了position，接下來(lái)我們就說(shuō)說(shuō)他是怎么進(jìn)行定位的，我們有l(wèi)eft，top，right，bottom，五個(gè)屬性分別對(duì)應(yīng) 距左邊，距上邊，距右邊，距下邊，大家注意到我在每個(gè)方向前都加了個(gè)距字，我們所做的定位是距各個(gè)方向的距離而不是移動(dòng)，例：left:200px，是向右移動(dòng)200像素，他的意思是距離左邊增加200像素。在我們實(shí)際的編程中一般都不常用bottom，我們知道，滑輪是可以一直往下滑的，所以我們相對(duì)于底部定位的話就很困難。
我們來(lái)通過(guò)代碼和結(jié)果來(lái)看一下：
沒(méi)有定位的樣式
加了relative
加了relative的結(jié)果
上面這個(gè)結(jié)果圖看著比例不太對(duì)是因?yàn)樽髡呓貓D沒(méi)截好[捂臉]
我們可以看出貓圖片并沒(méi)有移動(dòng)，而是給兔子圖片留著位置。
加了absolute
加了absolute的結(jié)果
這個(gè)結(jié)果我們可以看出貓圖片向前移動(dòng)了，并沒(méi)有保留兔子圖片原來(lái)的位置
加了fixed
代碼中的<br>是為了使滑輪可以滑動(dòng)，以便更好的展示效果。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
用了fixed的效果展示。
以上的代碼樣式只對(duì)兔子圖片起作用，我沒(méi)有給貓?zhí)砑尤魏螛邮剑垐D片只是作為參照物。
iv+css是現(xiàn)在比較流行網(wǎng)頁(yè)排版技術(shù)，其中css的靈活運(yùn)用是不可缺少的部分。在完成一些復(fù)雜的頁(yè)面排版都是由最簡(jiǎn)單的排版方式演變而來(lái)的，應(yīng)讀者的要求今天給大家講解一下css最基礎(chǔ)的布局元素對(duì)齊，在css中我們可以用多種屬性來(lái)實(shí)現(xiàn)對(duì)齊元素，如果你是技術(shù)大牛的話這篇文章就可以直接忽略了，不喜勿噴！
css中元素對(duì)齊方式有哪些？
1、塊元素的對(duì)齊
塊元素默認(rèn)占一行，如果一行內(nèi)已經(jīng)出現(xiàn)了塊元素，再添加其他塊元素會(huì)自動(dòng)換行的。塊元素也可以嵌套其他的塊元素使用，塊元素一般是作為容器出現(xiàn)的，比如說(shuō)HTML中常出現(xiàn)的div，塊元素和行元素是可以通過(guò)css相互轉(zhuǎn)換的。塊元素可以使用“margin” 屬性來(lái)水平對(duì)齊，可通過(guò)將左和右外邊距設(shè)置為 "auto"，來(lái)對(duì)齊塊元素。比如.nav{margin-left:auto;margin-right:auto;width:70%;}，如果寬度是100%則對(duì)齊沒(méi)有效果，我們可以把這段代碼改成.nav{margin:0 auto;}來(lái)實(shí)現(xiàn)導(dǎo)航板塊內(nèi)容的水平對(duì)齊。塊元素存在一個(gè)外邊距處理方面的 BUG會(huì)在個(gè)別瀏覽器出問(wèn)題，使用的時(shí)候一定要注意這個(gè)問(wèn)題。
2、使用 position
對(duì)齊元素的方法之一是使用絕對(duì)定位，比如說(shuō)這段代碼：.nav{position:absolute;right:0px;width:300px;}。但是在使用position水平對(duì)齊元素時(shí)會(huì)出現(xiàn)兼容問(wèn)題，使用IE8之前瀏覽器，如果容器設(shè)置了明確寬度，忘記聲明！DOCTYPE左右兩側(cè)會(huì)增加十七像素的外邊距。為了避免這樣問(wèn)題使用 position對(duì)齊元素，一定不要忘記 !DOCTYPE聲明。
3、使用float
對(duì)齊元素的另一種方法是使用 float 屬性，如這段代碼.right{float:right;width:300px;}，這樣對(duì)齊元素也會(huì)出現(xiàn)瀏覽器兼容，，使用IE8之前瀏覽器，如果使用了使用 float 屬性時(shí)，忘記聲明！DOCTYPE左右兩側(cè)會(huì)增加十七像素的外邊距，這一點(diǎn)和position是一樣的，為了避免這樣問(wèn)題使用 position對(duì)齊元素，也一定不要忘記 !DOCTYPE聲明。
關(guān)于“css中的元素對(duì)齊”先聊到這。每天學(xué)習(xí)一個(gè)知識(shí)點(diǎn)，每日寄語(yǔ)”不管有多少面墻阻擋，總還有一道屬于你的明媚陽(yáng)光。”如轉(zhuǎn)載清標(biāo)明出處。
position:fixed;用我自己的話來(lái)說(shuō)，就是讓你想要固定的東西固定。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height: 2000px;
}
.photo{
width: 600px;
height: 600px;
position: fixed;
left: calc(50%-300px);
top: calc(50%-300px);
}
</style>
</head>
<body>
10月7日，昆凌在社交平臺(tái)曬出自己蕩秋千的美照。
照片中，昆凌長(zhǎng)發(fā)披肩，頭戴假日風(fēng)草帽，
穿一襲白裙在海邊蕩著秋千，回眸甜笑，宛若仙子。
<div id="box1">
<img src="img/kunling.jpg" class="photo">
</div>
</body>
</html>
對(duì)了，在這里說(shuō)一下，我目前是在職web前端開(kāi)發(fā)，如果你現(xiàn)在正在學(xué)習(xí)前端，了解前端，渴望成為一名合格的web前端開(kāi)發(fā)工程師，在入門學(xué)習(xí)前端的過(guò)程當(dāng)中有遇見(jiàn)任何關(guān)于學(xué)習(xí)方法，學(xué)習(xí)路線，學(xué)習(xí)效率等方面的問(wèn)題，都可以隨時(shí)關(guān)注并私信我：前端，我都會(huì)根據(jù)大家的問(wèn)題給出針對(duì)性的建議，缺乏基礎(chǔ)入門的視頻教程也可以直接來(lái)找我，我這邊有最新的web前端基礎(chǔ)精講視頻教程， 還有我做web前端技術(shù)這段時(shí)間整理的一些學(xué)習(xí)手冊(cè)，面試題，開(kāi)發(fā)工具，PDF文檔書(shū)籍教程，都可以直接分享給大家。
當(dāng)我下拉時(shí)，圖片的位置是不會(huì)動(dòng)的。即使下滑到了最底部，圖片的位置也是固定的。對(duì)比下面這張圖：
子絕父相就是指子元素設(shè)置絕對(duì)定位，而父元素設(shè)置相對(duì)定位。換句話說(shuō)：如果要對(duì)一個(gè)子元素使用定位的話，讓子元素（絕對(duì)定位）以其父元素（相對(duì)定位）為標(biāo)準(zhǔn)來(lái)定位。
實(shí)操代碼理解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father{
width: 300px;
height: 300px;
background-color: coral;
position: relative;
border: solid 3px red;
}
#son1{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
left: 20px;
top: 50px;
}
#son2{
width: 100px;
height: 100px;
background-color: chartreuse;
position: absolute;
left: 40px;
top: 90px;
}
</style>
</head>
<body>
<div id="father">
I am father
</div>
<div id="son1">
I am son1
</div>
<div id="son2">
I am son2
</div>
</body>
</html>看圖：在father這個(gè)容器設(shè)置了相對(duì)定位之后，son1和son2都設(shè)置了絕對(duì)定位，我們的子類這時(shí)其實(shí)不是在body中絕對(duì)定位（absolute），而是在其父類的范圍中絕對(duì)定位（absolute）。
position: absolute;查找定位的參照物方法：
從當(dāng)前元素開(kāi)始往上找，直到找到一個(gè)具有定位屬性的元素為準(zhǔn)，以這個(gè)元素為參照進(jìn)行定位。
如果沒(méi)有一個(gè)元素有定位屬性,最終就參照body進(jìn)行定位。（我一直理解的就是絕對(duì)定位就是你想定哪里定哪里）
定位的時(shí)候：結(jié)合top left right bottom 這四個(gè)方向?qū)傩赃M(jìn)行配合定位。但是要注意：不能同時(shí)選擇left喝right
注意：這里要區(qū)別于相對(duì)定位，在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，原來(lái)的位置就沒(méi)有了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
background-color: salmon;
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 50px;
}
</style>
</head>
<body>
<div id="box1">
我是box1，我采用了絕對(duì)定位
</div>
</body>
</html>position: relative;相對(duì)定位是相對(duì)于元素在文檔中的初始位置——首先它出現(xiàn)在它所在的位置上（即不設(shè)置position時(shí)的位置，然后通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的原始起點(diǎn)進(jìn)行移動(dòng)；
注意，在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，原來(lái)的位置始終保留著。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: brown;
position: relative;
left: 300px;
top: 300px;
}
#box2{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">
</div>
<div id="box2">
</div>
</body>
</html>原文鏈接：https://link.zhihu.com/?target=https%3A//blog.csdn.net/hanhanwanghaha/article/details/108961741
作者：我一個(gè)超級(jí)無(wú)敵可愛(ài)的人鴨
出處：CSDN
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
