定位的認(rèn)識(shí)
- 定位的概念：可以控制元素在瀏覽器中的位置
- 關(guān)于定位使用的條件
- 需要移動(dòng)修飾的對(duì)象
- 位置的移動(dòng)方式需要改變
- 參照物
- 定位屬性的使用 position
- static 靜態(tài)定位（默認(rèn)值）
- relative 相對(duì)定位
- absolute 絕對(duì)定位
- fixed 固定定位
- sticky 粘性定位（css新增的定位屬性值忠寻，兼容差）
相對(duì)定位屬性
屬性：position
屬性指標(biāo)：relative
-
特點(diǎn)：
- 設(shè)置相對(duì)定位的時(shí)候需要給元素設(shè)置移動(dòng)方向值（top/right/bottom/left）
- 相對(duì)定位是相對(duì)于初始位置進(jìn)行移動(dòng)的
- 總結(jié)盒模型和定位屬性之間的區(qū)別
- 相同點(diǎn)：可以控制元素在瀏覽器中進(jìn)行移動(dòng)
- 不同點(diǎn)：盒模型設(shè)置的時(shí)候需要有父級(jí)包含框的接觸灰追，定位不需要淤击，沒(méi)有方向的限制
- 總結(jié)浮動(dòng)和定位屬性之間的區(qū)別
- 相同點(diǎn)：可以控制元素在瀏覽器中進(jìn)行移動(dòng)
- 不同點(diǎn)：浮動(dòng)是脫離文檔流的，相對(duì)定位是不脫離文檔流的
position: relative; left: 100px; 相對(duì)定位作用：是工具人铃剔，為了給絕對(duì)定位提供參照物的
絕對(duì)定位屬性
屬性：position
屬性值：absolute
-
特點(diǎn)：
- 絕對(duì)定位的參照物（父相子絕）
- 當(dāng)父級(jí)有定位屬性的時(shí)候，子級(jí)就會(huì)相對(duì)于父級(jí)進(jìn)行偏移
- 當(dāng)父級(jí)沒(méi)有定位屬性的時(shí)候，會(huì)往上級(jí)查找灰蛙，直到找到瀏覽器
- 絕對(duì)定位是會(huì)脫離文檔流的颅和，不占位置會(huì)破壞正常的網(wǎng)頁(yè)布局（不建議在大布局中使用，會(huì)產(chǎn)生一些問(wèn)題）
案例1：相對(duì)與絕對(duì)定位的使用
- 絕對(duì)定位的參照物（父相子絕）
拓展“流”的概念
- 普通流/普通層/文檔流：正常的網(wǎng)頁(yè)布局
- 浮動(dòng)層/浮動(dòng)流：在正常的網(wǎng)頁(yè)上一層
- 定位層/定位流：在浮動(dòng)上一層
固定定位屬性
- 屬性：position
- 屬性值：fixed
- 特點(diǎn)
- 相對(duì)于瀏覽器的位置進(jìn)行偏移的缕允，是脫離文檔流的
- 作用：廣告彈窗峡扩、聊天窗口、登錄注冊(cè)
粘性定位屬性
- 屬性：position
- 屬性值：sticky
- 特點(diǎn)：
- 粘性定位是css中新增的屬性值障本，兼容性比較差
- 粘性定位是結(jié)合了相對(duì)定位個(gè)固定定位的特點(diǎn)
- 相對(duì)定位:不脫離文檔流
- 固定定位:相對(duì)于瀏覽器進(jìn)行移動(dòng)
總結(jié)
一教届、定位是可以控制元素在瀏覽器中移動(dòng)位置
二、屬性positon
三驾霜、屬性值及用法
- 相對(duì)定位：relative 是相對(duì)于初始位置案训，不會(huì)脫離文檔流
- 絕對(duì)定位：absolute 是相對(duì)于父級(jí)（瀏覽器）進(jìn)行移動(dòng)，會(huì)脫離文檔流
- 固定定位：fixed 是相對(duì)于瀏覽器進(jìn)行移動(dòng)粪糙，會(huì)脫離文檔流
- 粘性定位：sticky 是相對(duì)于瀏覽器進(jìn)行移動(dòng)强霎，不會(huì)脫離文檔流
Q：頁(yè)面中有三個(gè)盒子，考慮讓三個(gè)盒子疊加在一起蓉冈？三個(gè)盒子的排列順序是怎么樣的城舞？
A：在定位中脫離文檔流會(huì)出現(xiàn)在定位層，排列順序是從下到上寞酿，在后面的元素會(huì)顯示在最上面
層疊屬性：z-index
（使用的前提條件是一定需要在定位環(huán)境下使用）
屬性值可以設(shè)置數(shù)字家夺，數(shù)值越大越在上面顯示
定位實(shí)現(xiàn)居中方式
- 已知元素寬高大小，設(shè)置元素在瀏覽器中間顯示
<div>
<p>姓名<input type="text"></p>
<p>密碼<input type="password"></p>
</div>
div{
width: 400px;
height: 300px;
border: 1px solid #000;
position: fixed;
left:50%;
margin-left: -200px;
top:50%;
margin-top: -150px;
}
p{
margin: 20px;
}
拓展：css3中的計(jì)算屬性
用法：calc（計(jì)算公式）
注意：相加相減的時(shí)候需要空格
div{
width: 400px;
height: 300px;
border: 1px solid #000;
position: fixed;
/* left:50%; */
/* margin-left: -200px; */
left:calc(50% - 200px);
top:calc(50% - 150px);
/* top:50%; */
/* margin-top: -150px; */
}
- 未知元素寬高大小伐弹，設(shè)置元素在瀏覽器中間顯示
/* 第二種方法：強(qiáng)制性居中顯示 */
top:0;right: 0;left: 0;bottom: 0;
margin: auto;
錨點(diǎn)
錨點(diǎn)鏈接的使用：需要配合超鏈接使用控制在頁(yè)面內(nèi)的跳轉(zhuǎn)
-
作用：
- 【重點(diǎn)】可以在同一個(gè)頁(yè)面實(shí)現(xiàn)跳轉(zhuǎn)（點(diǎn)擊回到頂部）
- 【了解】可以在不同頁(yè)面間實(shí)現(xiàn)跳轉(zhuǎn)（電商頁(yè)面布局）
-
用法
-
點(diǎn)擊跳轉(zhuǎn)：
<a href="#id屬性值"></a> -
跳轉(zhuǎn)鏈接：
<div id="id屬性值"></div>
<a href="#home">點(diǎn)擊回到頂部</a> <a href="16-detail.html#detail">點(diǎn)擊跳轉(zhuǎn)到另外一個(gè)頁(yè)面部分</a>/* 設(shè)置瀏覽器滾動(dòng)條滾動(dòng)的速度 */ html,body{ scroll-behavior: smooth /* 平滑的/平緩的 */ } -
-
錨點(diǎn)使用的注意點(diǎn)
- 在瀏覽器的地址欄中默認(rèn)會(huì)綁定id并且不可以刷新刪除,需要手動(dòng)
- 單擊錨點(diǎn)的時(shí)候,錨點(diǎn)一定會(huì)讓跳轉(zhuǎn)的地方顯示在最頂部
