為什麼需要定位?
提問: 以下情況使用標準流或者浮動能實現嗎?
某個元素可以自由的在乙個盒子內移動位置, 並且壓住其他盒子
當我們滾動視窗時, 盒子是固定在螢幕某個位置的
以上效果, 標準流或浮動都無法快速實現, 此時需要定位來實現
所以:
定位組成
定位: 將盒子定在某乙個位置.所以定位也是在擺盒子, 按照定位的方式移動盒子
定位模式
定位模式決定元素的定位方式, 它通過css的position屬性來設定, 其值可以分為4個:值語義
static
靜態定位
relative
相對定位
absolute
絕對定位
fixed
固定定位
邊偏移邊偏移就是定位的盒子移動到最終位置. 有top, bottom, left和right 4個屬性
邊偏移屬性
例項描述
toptop: 80px;
頂端偏移量, 定義元素相對於其他元素上邊線的距離
bottom
bottom: 80px;
底部偏移量, 定義元素相對於其他元素下邊線的距離
left
left: 90px;
左側偏移量, 定義元素相對於其他元素左邊線的距離
right
right: 80px;
右側偏移量, 定義元素相對於其他元素右邊線的距離
注意這4個屬性只存在定位之中, 標準流和浮動是沒有這4個屬性的
靜態定位static
靜態定位是元素的預設定位方式, 無定位的意思
語法:選擇器
相對定位relative(重要)
相對定位是元素在移動位置的時候, 是相對於他原來的位置來說的(自戀型)
語法:選擇器
相對定位特點:(務必記住)
絕對定位absolute(重要)
絕對定位是元素在移動位置的時候, 是相對於它的祖先元素來說的(拼爹型)
語法:選擇器
絕對定位特點: (務必記住)
子絕父相的由來
子級是絕對定位的話, 父級要用相對定位
>
div.box1
.box2
.box3
style
>
>
class
="box1"
>
class
="box3"
>
div>
div>
class
="box2"
>
div>
body
>
固定定位是元素固定於瀏覽器可視區的位置. 主要使用場景: 可以在瀏覽器頁面滾動時元素的位置不會改變
語法:選擇器
固定位置的特點: (務必記住)
以瀏覽器的可視視窗為參照點移動元素
固定定位不再占有原先的位置
固定定位也是脫標的, 其實固定定位也可以看作是一種特殊的絕對定位(永遠以瀏覽器為父親)
和版心對齊
讓固定定位的盒子left: 50%;走到瀏覽器可視區(也可以看作版心)的一半位置
讓固定定位的盒子margin-left: 版心寬度的一半距離;多走版心寬度的一半位置
就可以讓固定定位的盒子貼著版心右側對齊了
注意:粘性定位sticky(了解)
粘性定位可以被認為是相對定位和固定定位的混合.
語法:選擇器
粘性定位特點:
以瀏覽器的可視視窗為參照點移動元素(固定定位特點)
粘性定位占有原先的位置(相對定位特點)
必須新增top, left, right, bottom其中乙個才有效
跟頁面滾動搭配使用. 相容性較差, ie不支援
#### 定位疊放次序z-index 在使用定位布局時, 可能會出現盒子重疊的情況. 此時, 可以使用z-index來控制盒子的前後次序(z軸) 語法: `選擇器 ` - 數值可以是正整數, 負整數或0, 預設是auto, 數值越大, 盒子越靠上 - 如果屬性值相同, 則按照書寫順序, 後來居上 - 數字後面不能加單位 - **只有定位的盒子**才有z-index屬性
定位的拓展
絕對定位的盒子居中
加了絕對定位的盒子不能通過margin: 0 auto;(auto不起作用)水平居中, 但是可以通過以下計算方法實現水平和居中對齊
left: 50%; margin-left: -盒子寬度一半;水平居中
top: 50%; margin-top: -盒子高度一半;垂直居中
絕對定位和固定定位也和浮動類似
行內元素新增絕對或固定定位, 可以直接設定高度和寬度(不需要轉為塊狀元素了)
塊級元素新增絕對或固定定位, 如果不給寬度或者高度, 預設大小是內容大小
脫標的盒子不會觸發外邊距塌陷
浮動元素, 絕對定位(固定定位)元素的都不會觸發外邊距合併的問題
絕對定位(固定定位)會完全壓住盒子
如果乙個盒子既有left屬性也有right屬性, 則缺省會執行left屬性(先左後右), 同理top bottom,先上後下
網頁布局總結:
標準流可以讓盒子上下排列或者左右排列,垂直的塊盒子顯示就用標準流布局浮動
可以讓多個塊級元素一行顯示或者左右對齊盒子,多個塊級盒子水平顯示就用浮動布局定位
定位最大的特點是有層疊的概念, 就是可以讓多個盒子前後疊壓來顯示.如果元素自由在某個盒子內移動就用定位布局
網頁布局05 網頁元素定位
網頁元素定位涉及到兩個css屬性 position和z index屬性。position的屬性值如下 position的屬性值說明如下 static 沒有定位，網頁元素以標準文件流方式顯示。relative 設定相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置。設定相對定位的盒子仍在標準...
網頁布局01 網頁元素的分類
css通過display屬性可以將網頁元素設定為block inline inline block三類。這三類網頁元素的區別如下 display屬性值 說明 特點 block 塊級元素 inline 內聯元素 inline block 行內塊元素 網頁元素預設兩種型別 塊級元素和內聯元素。行內塊元素...
11網頁前端CSS CSS顏色屬性
一 color顏色屬性 1 hsl顏色 通過色調 h 飽和度 s 亮度 l 三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色。h hue色調 0 或360 表示紅色，120表示綠色，240表示藍色，也可以取其他數值來指定。s saturation飽和度 取值為0.0 100.0 l li...