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