语法:
元素::before作用: 1.创建一个伪元素,放到匹配的标签元素前面 2.通过 content 样式属性,来为伪元素添加修饰性的内容 特点:
伪元素默认为 行内元素content 可以设置图片content:url(路径);伪元素选择器的语法标记是 :: ,但 : 也行(过时语法)伪元素是浏览器自动创建在目标元素内部语法:
元素::afrter作用:
创建一个伪元素,放到匹配的标签元素后面通过 content 样式属性 来为伪元素添加修饰性的内容伪元素默认行内元素特点:
同before一致语法:
元素::selection作用:
设置选中的文本部分的样式语法:
元素::placeholder作用:
设置 input 标签中 placeholder 属性值的样式作用:没有定位效果
语法:
position:stactic;特点:
静态定位按照标准流特性摆放位置,没有偏移量用的比较少,因为默认就是它作用:
元素相对原来的位置进行偏移,通过top right bottom left 调整语法:
position: relative; top: 0px; left: 0px;特点:
是相对于原来位置,与父容器无关相对定位不脱离文档流,位移后原来的位置仍被当前元素占有如果把 4个偏移属性 同时使用,那么 left 和 top 生效4个偏移属性的值 可以为负值(left:-10px;)定义:
相对离自己最近已定位的祖先元素进行偏移语法:
position: absolute; top:0px; left:0px;特点:
相对于离自己最近定位祖元素的位置所有祖元素都未定位时,参考浏览器窗口进行偏移绝对定位会脱离文档流,原来位置不再占有默认位置不变注意: 由于 相对定位 未脱离文档流,所以绝对定位通常配合 相对定位 使用
定义:相对于浏览器窗口进行偏移
语法:
position: fixed; top: 0x; left: 0px;特点:
会脱离文档流,位置移动后原来位置不再占有默认位置为自身原来位置如果同时设置相对方向的偏移量,则以 top 和 left 为准定义:可以看成相对定位-relative和固定定位-fixed的结合
语法:
position: sticky; top: 0px;特点:
需要设置 偏移量(top,bottom等) 才有效果偏移量可以是负值 top:-5px以最近的具有滚动条的祖元素作为位移参考不会脱离文档流,原位置不会被占据问题:如果多个元素使用 定位时,位置重合了,那怎么调整层次呢?
解决:多个元素如果定位重合,可以通过 z-index 调整层次
语法:
z-index: 数值;特点:
z-index 数值越大,层级越高,可以是负值z-index 只针对定位元素生效默认情况,书写顺序靠后的层级高于靠前的拜拜~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
