回顧:
(1) 定位屬性:position
屬性值:static(預設定位)
absolute(絕對定位)
relative(相對定位)
包含塊設定:
給父元素新增position:relative;形成參照物。
給子元素新增position:absolute;進行位置移動。
定位層次關係:z-index:(屬性值為數字,數字越大越靠上)
(2) 絕對定位與相對定位的區別:
1:參照物:
絕對定位參照物:已經新增定位的父元素
相對定位參照物:自身預設的位置
2:布局流:
絕對定位不佔據空間。脫離布局流。
相對定位佔據空間,不脫離布局流。
一、固定定位
屬性:position:;
屬性值:fixed
參照物:以整個瀏覽器視窗為參照物。
特點:不佔據空間,脫離布局流。
讓乙個元素在瀏覽器視窗中上下左右居中:
辦法1:position:fixed;
left:50%;right:50%
margin-left:-元素寬度一半;
margin-right:-元素高度一半;
辦法2:position:fixed;
left:0;right:0;
bottom:0;top:0;
margin:auto;
二、粘性定位
屬性:position:;
屬性值:sticky
執行邏輯:預設情況下,當瀏覽器視窗滾動條不滾動,當前元素沒有超出整個瀏覽器視窗的時候,執行的position:relative;如果元素超出當前視窗則應用的是position:fixed;
注:如果塊狀元素沒有設定寬度的時候,新增position:absolute;或者position:fixed;出現寬度被內容撐開。
三、錨點
超連結的一種。
作用:能實現在同乙個頁面內實現不同位置的跳轉。
描述:讓錨點繫結id名稱的元素回到瀏覽器視窗的最頂端。
< 標籤 id=」」>< /標籤》
< a herf=」#繫結元素的id名稱」>< /a>
四、pc端寬高自適應
pc端寬度和高度的自適應問題:
之前的專案寬度和高度都是固定的寬高。
有時候我們希望,寫html結構的寬和高,能適應不同的解析度,不同的裝置,不同的內容增刪,使我們的專案更加的靈活。
1:寬度自適應
預設情況下塊狀元素,當width(寬)不設定的時候,或者width:100%;當前元素的寬跟隨父元素的變化。
2:高度自適應
高度自適應第一種情況:
需求1:當內容增加的時候 ,內容能把容器撐開。
需求2:當內容極少或者沒有內容的時候,讓容器保持乙個最小高度。
(1) 當元素height(高)不去設定或者是設定成height:auto;元素高度是被內容撐開的。(該方法只能滿足需求1)
(2)最小高度設定:
min-height:;
能滿足需求1和需求2。
拓展(了解):
min-height:; ie的低版本不支援。
但是,ie6預設的會把height解析成最小高度。
刷題 阿里20200330筆試
目錄 第1題第2題 總結 小強有n個養雞場,第i個養雞場初始有a i 只小雞。與其他養雞場不同的是,他的養雞場每天增加k只小雞,小強每天結束都會在數量最多的養雞場裡賣掉一半的小雞,假如乙個養雞場有x隻雞,則賣出後只剩下x 2 向下取整 隻雞。問m天後小強的n個養雞場一共多少只小雞?最後幾分鐘a了,很...
2020 03 30 事情就怕太容易而看不起
22 30 我努力的方向就是要讓一切變得簡單而合理。亨利 福特 要把一件事情做簡單就已經不是一件簡單的事情。如果還要做得合理,好像很不簡單一樣。這是我正常的第一反應,如果我不對自己許多的這些第一反應追加思考,我會把一切原本可以很簡單的事情,被自己的情感上的主觀弄得像電視劇集一樣複雜。所以,想要把事情...
SQL知識總結
use tablename 要操作的資料庫名 select logicalfilename tablename log 日誌檔名 maxminutes 10,limit on time allowed to wrap log.newsize 1 你想設定的日誌檔案的大小 m setup initia...