大前端筆記06

2021-10-01 05:16:37 字數 963 閱讀 3975

三種布局方式: 文件流、浮動布局、層布局(定位)

1、靜態定位(不定位) position:static;

靜態定位的元素按照文件流內的位置排列

2、相對定位 position:relative;

偏移參考元素:離絕對定位的元素最近的帶有position屬性的祖先元素, 如果不存在就是相對body定位

會脫離文件流

4、固定定位position:fixed;

偏移參考位置:瀏覽器可視視窗

會脫離文件流

5、z-index 調整定位元素的層級

定位的元素才能使用z-index

多個定位的元素預設按照順序決定層級,越靠後層級越高

通過z-index屬性可以改變層級,預設z-index值為0 ,數字越大層級越高

6、位置偏移屬性:

top: 距離參考位置頂部的偏移 正值向下 負值向上

bottom : 距離參考位置低部的偏移 正值向上 負值向下

left: 距離參考位置左邊的偏移 正值向右 負值向左

right : 距離參考位置右邊的偏移 正值向左 負值向右

float:left

float:right

position:absolute

position:fixed

1、通過絕對定位,給left和top都設定為50%,再通過margin-left:向左移動寬度的一半,margin-top:向上移動寬度的一半

.inner
2、通過絕對定位,left/right/top/bottom的值都是0,margin:auto;

.inner

前端自學筆記06

1 學習目標 能寫出全部清除浮動的方式 能簡述定位的使用場景 能說出3種定位的特點 能寫出絕對定位的盒子居中的 能夠說出子絕父相的使用目的 為什麼沒有清除定位卻有清除浮動?因為定位有子絕父相,父盒子 會把位置佔好。2 定位模式轉換 3 css高階技巧 隱藏物件 display block 顯示某個元...

大前端學習筆記(2)

在學習各種自己哥哥接觸的東西時同情況下都是不知道如何下手,這個是最近這兩天的學習目標和大綱 目前自己的一種比較老套的學習方法。布局無布局 文字文字 列表 字型 斜體 粗體 下劃線 上標 下標 列表 1 ul 無序列表 ol 有序列表 dl 定義列表 2 列表巢狀 布局 table tr td 1.行...

Web前端學習 06

今天寫頁面的時候,在定位側面的固定欄的時候遇到了一些小問題 我給它加了fixed定位 然後測試的時候發現當我縮放瀏覽器時這個div會往右上偏移 因為我只是單純的用了top xx px right xx px 之後審查jd頁面後發現 在乙個頁面中實現乙個固定導航欄的話,需要先將其固定在頁面中心位置 t...