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...