HTML CSS基礎知識個人筆記 6

2021-09-01 13:30:11 字數 1547 閱讀 7299

2. 定位

2.1 靜態定位（static）

2.2 相對定位（relative）

2.3 絕對定位（absolute）

2.4 固定定位（fixed）

2.5 絕對定位（特殊固定）和浮動的隱藏模式轉換

2.6 定位z-index疊放順序

2.7 經典案例

清除浮動的問題**，就是由於子級元素的浮動導致父級元素的內部高度為0
在 父級元素 新增overflow hidden scroll auto 皆可以
常用方法：

.clearfix:after 


.clearfix 


.clearfix:before, 


.clearfix:after 


.clearfix:after 


.clearfix
定位，有定位屬性和邊偏移

position： ；

預設定位，標準流。

以自身為基準

脫標，但不完全，會在標準流之上

留坑！
以最近的有定位（相對 絕對 固定）的父級（祖先）元素為基準

沒有已定位的父級（祖先），則以瀏覽器首屏為基準

完全脫標，在標準流之上

不留坑以瀏覽器首屏為基準
依據最近的已經定位(絕對,相對,固定)的父元素(祖先)進行定位
常用操作。

要理解透徹。
浮動，蓋不了文字和。

定位可以，定位是脫標的

123ty
定位的盒子，使用auto無效（relative在沒有指定水平方向的margin或者為0時，auto任然有效）

浮動也是如此，不過浮動可以加乙個父盒子，對父盒子居中，但是麻煩

要理解定位盒子居中的演算法
是特殊的絕對定位，絕對脫標，不佔坑

但是只以瀏覽器為基準，與其他無關
絕對定位和浮動都會有inline-block特性，預設寬度為內容的寬度

div
z-index只針對定位！！！對其他無效，也無法指定！

沒有單位

越大，越高

z-index值一致的時候，後來者居上（後來者是指元素的使用順序）

預設為0
hom

HTML CSS基礎知識個人筆記 1

html input 控制項 建立方式，table cap tr td或者table tr th，th為表頭，caption為標題 注意和dl的小差別，dl dt dd 的dd為空，不會佔位。目前是如此。user info name num male 111 xiaohong female 2221...

HTML CSS基礎知識個人筆記 4

2.盒子模型 2.2 內邊距 padding 2.3 外邊距 margin 2.4 盒子小結 background background color background image background repeat background attachment background positio...

HTML CSS基礎知識個人筆記 7

display 不佔坑 visibility 佔坑 典型處理a mask 預設，溢位部分顯示 overflow visible 溢位部分隱藏，不是刪除 overflow hidden 滾動條，不管有沒有超出，都顯示滾動條 overflow scroll 在超出的時候，加滾動條，body 和 test...