又到周末了,又結束了一周的課程了,表示昨前天開始老師布置家庭作業開始寫頁面了,前天的還好,12點之前搞定,昨天的熬到2點,表示大神不要笑哈,畢竟能力有限,第二天看了老師的講解,才發現做了非常多的無用功,好了,閑聊就到這里吧,下面我分享下這周老師講到的一些內容,以下都是自己的理解哈,僅供參考:
CSS盒子定位:
什么是盒子定位呢,顧名思義,就是元素盒子(以下主要以塊級盒講解)在頁面中的位置,定位就是確定他的位置,盒子定位分為以下四種 :
1、靜態位置(position:static)也就是默認值:
每一個元素在沒有float值的時候,都有position值,就是static,可以直接理解它在是默認值的時候就是常規流,所有規則與常規流一樣;
2、相對位置(position:relative):
固定定位,顧名思義就是固定盒子不隨網頁滑動而移動
實際代碼:position:fixed;
可以通過top、bottom、left、right設置像素值來固定位置;
一般用於導航欄或者網頁角落的廣告;
4、絕對位置(position:absolute):
絕對定位使元素的位置與文檔流無關,也就是脫離文檔流,因此不占據空間,比如說有三個縱向排列的三個元素盒子,尺寸寬高都為100px,如果給中間的盒子設置了position:absolute;那么他就會脫離出來,它下面的那個盒子就會向上浮,絕對定位盒子的包含塊主要看他父級或祖先級里面有沒有定義了position值的,如果有,就是他的包含塊;
這一點與相對定位不同,相對定位實際上被看作普通流定位模型的一部分,因為元素的位置相對於它在普通流中的位置。
其實相對定位與絕對定位都屬於常規流。
