伪元素选择器
伪元素:假的元素,自己创造出来的,让页面显示对应的内容。
伪类选择器:鼠标的效果,需要配合鼠标的事件才能触发。
如何查看伪元素的元素类型:通过伪元素选择器加进来的元素是一个行内元素。
修饰文本的第一行,只修饰第一行
使用方法::first-line
修饰第一个字符
使用方法: :first-letter
向元素内部正前方添加内容
使用方法:
元素:before{/*这个冒号不允许带空格*/
content:"";
}
必须配合出现:content必须携带
向元素内部正后方添加内容
使用方法:
元素:after{/*这个冒号不允许带空格*/
content:"";
}
必须配合出现:content必须携带
高度塌陷
高度塌陷:浮动,父子关系中不设置高度,只给子元素设置宽度,当子元素添加浮动后,会脱离文档流,父元素高度会降低===效果称之为高度塌陷=父元素高度降低了。
解决办法:
1)给父元素添加一个高度,建议使用最小高度。
2)高度塌陷本质原因就是盒子上去补位了。不让补位元素上去补位:清楚浮动就行。clear:both
3)特殊情况:父元素里面有一个子元素的时候。给子元素添加浮动=照样会产生高度塌陷
使用overflow:hidden=触发BFC,触发BFC后会让浮动的元素继续参与高度的计算
4)方便快捷的方法:
万能清楚法:
使用方法:
元素:after{/*这个冒号不允许带空格*/
content:"";
display:block;
clear:both;
}