資訊專欄INFORMATION COLUMN
摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記絕對(duì)定位的特性絕對(duì)定位與浮動(dòng)相似，都有破壞性和包裹性。利用絕對(duì)定位元素脫離文檔流的特性，使用動(dòng)畫可以避免大范圍的回流和重繪。絕對(duì)定位元素拉伸實(shí)現(xiàn)寬高自適應(yīng)，可應(yīng)用于大范圍的布局。
《張?chǎng)涡竦腃SS深入理解之a(chǎn)bsolute》學(xué)習(xí)筆記絕對(duì)定位的特性
絕對(duì)定位與浮動(dòng)相似，都有破壞性和包裹性。浮動(dòng)的一些應(yīng)用場(chǎng)景中也可用絕對(duì)定位替代
絕對(duì)定位的行為表現(xiàn) 無(wú)依賴絕對(duì)定位元素在未手動(dòng)定位的情況下，絕對(duì)定位元素有以下特性
去float化 - float屬性將會(huì)失效
跟隨性 - 根據(jù)原有位置脫離文檔流放置
無(wú)依賴絕對(duì)定位元素 —— 即未手動(dòng)定位的絕對(duì)定位元素
無(wú)依賴絕對(duì)定位元素的使用無(wú)依賴絕對(duì)定位元素可以使用margin值進(jìn)行定位，實(shí)現(xiàn)脫離文檔流的相對(duì)定位效果，脫離文檔流可以解決溢出限制的問(wèn)題
應(yīng)用實(shí)例：
圖標(biāo)定位：角標(biāo)之類的可以使用DOM位置結(jié)合絕對(duì)定位margin偏移實(shí)現(xiàn)定位，不一定要使父容器成為包含塊
下拉框定位：下拉框和輸入框之間的聯(lián)系可以使用絕對(duì)定位margin偏移實(shí)現(xiàn)
邊緣定位：利用跟隨性，使元素跟隨空白字符放置
圖標(biāo)對(duì)齊和文本溢出處理
絕對(duì)定位脫離文檔流絕對(duì)定位+動(dòng)畫，避免回流和重繪
覆蓋層級(jí)，z-index + 絕對(duì)定位 > 后置絕對(duì)定位元素 > 前置絕對(duì)定位元素 > z-index > 普通元素
https://codepen.io/curlywater...
無(wú)固定width/height，絕對(duì)定位方向是對(duì)立的（如left vs right, top vs bottom）的時(shí)候，絕對(duì)定位元素拉伸。可應(yīng)用于寬高自適應(yīng)
有固定width/height，絕對(duì)定位拉伸失效
固定width + left + right，相當(dāng)于元素有了一個(gè)固定寬度，這時(shí)使用margin: auto可達(dá)到居中效果
總結(jié)絕對(duì)定位相對(duì)于包含塊定位；
在日常使用種，一般會(huì)習(xí)慣性對(duì)父容器使用relative，使用top/bottom/left/right來(lái)脫離文檔流的絕對(duì)定位；
但無(wú)依賴絕對(duì)定位元素結(jié)合margin偏移使用也可以實(shí)現(xiàn)一些實(shí)用的效果。
利用絕對(duì)定位元素脫離文檔流的特性，使用動(dòng)畫可以避免大范圍的回流和重繪。
絕對(duì)定位元素拉伸實(shí)現(xiàn)寬高自適應(yīng)，可應(yīng)用于大范圍的布局。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/117048.html
摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記與容器的尺寸可視尺寸對(duì)于沒(méi)有設(shè)定的塊元素，可改變?cè)厮椒较虻目梢暢叽缯紦?jù)尺寸對(duì)于元素，可改變?cè)厮酱怪狈较虻恼紦?jù)尺寸與百分比單位普通元素的百分比都是相對(duì)于容器的寬度計(jì)算的絕對(duì)定位元素的百分比是相對(duì)于包含塊的寬 張?chǎng)涡竦腃SS深入理解之margin學(xué)習(xí)筆記 margin與容器的尺寸 可視尺寸：對(duì)于沒(méi)有設(shè)定width的塊元素，margin可改變?cè)厮椒较?..
摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記基本屬性屬性介紹默認(rèn)當(dāng)與值相同時(shí)，等同于當(dāng)與值不相同時(shí)，其中一個(gè)值被賦予時(shí)，若另一個(gè)值為，那這個(gè)會(huì)被重置為作用前提元素非對(duì)應(yīng)方位的尺寸限制拉伸對(duì)于單元格等需要為狀態(tài)才可以與滾動(dòng)條頁(yè)面默認(rèn)滾動(dòng)條來(lái)自與無(wú) 《張?chǎng)涡竦腃SS深入理解之overflow》學(xué)習(xí)筆記 overflow基本屬性 overflow屬性介紹 overflow: visible(默認(rèn))|hidd...
摘要：上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為的基線將右邊盒子的行高設(shè)置為，即這個(gè)的高度為，位置處于中間。 vertical-align的值 線類：baseline（默認(rèn)）, top, bottom, middle 文字類：text-top, text-bottom 上標(biāo)下標(biāo)類：sub, super 數(shù)值：1px, 1em - 在baseline對(duì)齊的基礎(chǔ)上上下偏移一定數(shù)值 百分...
摘要：為了實(shí)現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動(dòng)，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。從浮動(dòng)的起因和浮動(dòng)的實(shí)現(xiàn)后果來(lái)看，浮動(dòng)不適合用于大范圍的布局，更適合利用其特性實(shí)現(xiàn)一些小范圍的流體布局效果。 張?chǎng)涡竦腃SS深入理解之float浮動(dòng)學(xué)習(xí)筆記 float的歷史 float為產(chǎn)生文字環(huán)繞效果而生 float的特性 — 包裹和破壞 包裹：即產(chǎn)生一個(gè)BFC破壞：使父容器...
摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記與容器的尺寸元素值過(guò)大，一定影響元素尺寸為定值，會(huì)影響元素尺寸為或者為，同時(shí)值沒(méi)有暴走，不影響元素尺寸元素水平影響尺寸，垂直不影響尺寸，但是會(huì)影響占據(jù)空間會(huì)顯示背景色負(fù)值與百分比單位不支持負(fù)值百分比相對(duì)于自身寬 張?chǎng)涡竦腃SS深入理解之padding學(xué)習(xí)筆記 padding與容器的尺寸 block元素 padding值過(guò)大，一定影響元素尺寸 width為定...
閱讀 1215·2021-11-25 09:43
閱讀 3047·2019-08-30 15:54
閱讀 3404·2019-08-30 15:54
閱讀 3067·2019-08-30 15:44
閱讀 1706·2019-08-26 12:18
閱讀 2305·2019-08-26 11:42
閱讀 918·2019-08-26 11:35
閱讀 3348·2019-08-23 18:22
