伪元素与元素定位

it2026-08-28  5

伪元素与元素定位

伪元素

beforeafterselectionplaceholder

1. before

语法:

元素::before

作用: 1.创建一个伪元素,放到匹配的标签元素前面 2.通过 content 样式属性,来为伪元素添加修饰性的内容 特点:

伪元素默认为 行内元素content 可以设置图片content:url(路径);伪元素选择器的语法标记是 :: ,但 : 也行(过时语法)伪元素是浏览器自动创建在目标元素内部

2. after

语法:

元素::afrter

作用:

创建一个伪元素,放到匹配的标签元素后面通过 content 样式属性 来为伪元素添加修饰性的内容伪元素默认行内元素

特点:

同before一致

3. selection

语法:

元素::selection

作用:

设置选中的文本部分的样式

4. placeholder

语法:

元素::placeholder

作用:

设置 input 标签中 placeholder 属性值的样式

元素定位

静态定位相对定位绝对定位固定定位粘性定位定位层叠

什么是元素定位?

所谓定位

就是按照某种方式来摆放盒子定位 = 定位类型 + 偏移量

1. 静态定位(了解)

作用:没有定位效果

语法:

position:stactic;

特点:

静态定位按照标准流特性摆放位置,没有偏移量用的比较少,因为默认就是它

2. 相对定位(重点)

作用:

元素相对原来的位置进行偏移,通过top right bottom left 调整

语法:

position: relative; top: 0px; left: 0px;

特点:

是相对于原来位置,与父容器无关相对定位不脱离文档流,位移后原来的位置仍被当前元素占有如果把 4个偏移属性 同时使用,那么 left 和 top 生效4个偏移属性的值 可以为负值(left:-10px;)

3. 绝对定位(重点)

定义:

相对离自己最近已定位的祖先元素进行偏移

语法:

position: absolute; top:0px; left:0px;

特点:

相对于离自己最近定位祖元素的位置所有祖元素都未定位时,参考浏览器窗口进行偏移绝对定位会脱离文档流,原来位置不再占有默认位置不变

注意: 由于 相对定位 未脱离文档流,所以绝对定位通常配合 相对定位 使用

4. 固定定位(重点)

定义:相对于浏览器窗口进行偏移

语法:

position: fixed; top: 0x; left: 0px;

特点:

会脱离文档流,位置移动后原来位置不再占有默认位置为自身原来位置如果同时设置相对方向的偏移量,则以 top 和 left 为准

5. 粘性定位

定义:可以看成相对定位-relative和固定定位-fixed的结合

语法:

position: sticky; top: 0px;

特点:

需要设置 偏移量(top,bottom等) 才有效果偏移量可以是负值 top:-5px以最近的具有滚动条的祖元素作为位移参考不会脱离文档流,原位置不会被占据

6. 定位层叠

问题:如果多个元素使用 定位时,位置重合了,那怎么调整层次呢?

解决:多个元素如果定位重合,可以通过 z-index 调整层次

语法:

z-index: 数值;

特点:

z-index 数值越大,层级越高,可以是负值z-index 只针对定位元素生效默认情况,书写顺序靠后的层级高于靠前的

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

最新回复(0)