Day12 CSS定位屬性 還沒寫完

2022-10-11 18:18:11 字數 1102 閱讀 6738

css各種定位屬性:

使用 position 屬性進行修改.

靜態定位:

預設定位方式.

position: static;

相對定位:

布局中會占用文件空間,

position: relative;

top: 20px;

left: 20px;

後面這個 top 和 left 是相對於自身原有位置移動.

會覆蓋在 static 定位上面

(還有 right 和 bottom)

絕對定位:

浮於其他元素上方,可實現層疊,被固定在乙個絕對的位置,相對於父級元素移動

不會隨著滾輪移動.

position: absolute;

top: 20px;

right: 120px;

固定定位:

浮於其他元素上方,會隨著網頁滾輪移動(比如廣告就是這樣)

position: fixed;

top: 20px;

left: 100px;

粘性定位:

在文件所在位置時,和靜態定位沒有區別,當超出文件所在位置時會變成固定定位.

positon: sticky;

top: 20px;

left: 20px;

特殊:

兩種隱藏元素的方法:

display: none; //不會占用文件空間

visibility: hidden; //預設為 visible,元素仍然存在且會占用空間.

display: none; 時元素是無法被選中的,即無法使用 hover 偽類選擇器.

要用其他偽類選擇器來選中:(如下 .mask 的 display: none;)

.photo:hover .mask

此時我們就選中 .photo 來使 .mask 顯示出來.

Day12 CSS簡單用法

當我想要將html中的部分屬性修改的時候,如果單個改的話,費時費力,這時候我就需要利用css和html結合起來了。hello1 hello2 hello3 div當 中有pp 當我想要修改裡邊的標籤的時候,我們可以利用後代標籤,可以這麼寫。pppp 塊級標籤 可以設定長寬 內聯標籤 設定長寬無效 w...

CSS定位屬性

position 把元素放置到乙個靜態的 相對的 絕對的 或固定的位置中。top定義了乙個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。left 定義了定位元素左...

CSS 定位屬性

使用定位屬性可以控制元素的位置,包括相對定位和絕對定位兩種方式。相對定位是指允許元素在相對於文件布局的原始位置上進行偏移,而絕對定位是指允許元素與原始的文件布局分離且任意定位。1.1定位方式 position 使用定位方式屬性可以控制瀏覽器應如何定位html 元素。語法 position stati...