偽元素與元素定位

2021-10-25 03:12:29 字數 1070 閱讀 2707

1. before

語法：

元素::before
作用：

1.建立乙個偽元素，放到匹配的標籤元素前面

2.通過 content 樣式屬性，來為偽元素新增修飾性的內容

特點：語法：

元素::afrter
作用：

特點：語法：

元素::selection
作用：

語法：

元素::placeholder
作用：

所謂定位作用：沒有定位效果

語法:

position：stactic;
特點：

作用：

語法：

position: relative;


top: 0px;


left: 0px;
特點：

定義：

語法：

position: absolute; 


top:0px;


left:0px;
特點：

注意：

由於 相對定位 未脫離文件流，所以絕對定位通常配合 相對定位 使用

定義：相對於瀏覽器視窗進行偏移

語法：

position: fixed;


top: 0x;


left: 0px;
特點：

定義：可以看成相對定位-relative和固定定位-fixed的結合

語法：

position: sticky;


top: 0px;
特點：

問題：如果多個元素使用 定位時，位置重合了，那怎麼調整層次呢？

解決：多個元素如果定位重合，可以通過 z-index 調整層次

語法：

z-index: 數值;
特點：

拜拜~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

偽類與偽元素

偽類 用於向某些選擇器新增特殊的效果，當已用元素處於某種狀態時，為其新增對應的樣式 偽元素 用於將特殊的效果新增到某些選擇器，用於建立一些不存在文件樹中的元素，為其新增樣式 區別 使用偽元素清除浮動 class container clearfix class wrap aaadiv div cle...

偽類與偽元素？

偽類與偽元素？偽類指偽類名稱前為冒號 偽元素指偽元素名稱前為雙冒號 偽類本質上是為了彌補常規css選擇器的不足，以便獲取到更多資訊。通常表示獲取不存在與dom樹中的資訊，或獲取不能被常規css選擇器獲取的資訊。如 hover focus empty 本質上是建立了乙個有內容的虛擬容器。這個容器不包含...

偽類與偽元素

總結一下偽類與偽元素的特性及其區別 偽類本質上是為了彌補常規css選擇器的不足，以便獲取到更多資訊 偽元素本質上是建立了乙個有內容的虛擬容器 css3中偽類和偽元素的語法不同 偽類 link hover 偽元素 before after 可以同時使用多個偽類，而只能同時使用乙個偽元素 其中偽類和偽元...