1.伪元素选择器
追加进来的内容属于行内元素
可以理解成:假的元素选择器===给他创造一个元素/标签
1) 匹配第一行的伪元素选择器
:first-line 这里的冒号可以使用:: : 双冒号和单冒号 为了解决兼容问题
div::first-line{}
2)匹配第一个字符的伪元素选择器
:first-letter 这里的冒号可以使用:: : 双冒号和单冒号 为了解决兼容问题
3)向元素内部的正前方插入内容
:before 双冒号可以直接简写成: 为了解决兼容问题
伪元素选择器实现效果:向前追加内容
div::before{
content:柠檬养乐多
}
通过伪元素添加的内容 是不占页面元素的
语法:
元素:before{
content:"文本"
样式规则
}
4)向元素内部的正后方添加内容
:after 双冒号可以直接简写成: 为了解决兼容问题
语法:
元素:after{
content:"文本"
样式规则
}
2.高度塌陷(面试题)
高度塌陷:父元素里面有子元素,父元素不设置高度,并且,
父元素的高度是被子元素撑开的
当给其中的一个或者是多个子元素添加浮动的时候,会让父元素的高度降低,这一情况被称值为=====高度塌陷
高度塌陷解决:
1)给父元素添加一个最小高度(为啥:如果你后面继续补内容或者元素的话,日语超出,显示溢出效果) 添加最小高度是为了解决自适应的问题
2)本质原因:
由于前面的元素浮动,导致后面的元素上去补位置,由于他上去补位置,导致父元素高度降低,并且,后面的所有的布局都上去了
解决:可以给后面的补位元素清除浮动带来的影响
clear:both 针对左浮动就是 clear:left 可以一对一 或者一对多清除浮动
3)如果没有补位元素的话,父元素里面只有一个子元素,子元素浮动,产生了高度塌陷如果解决
a.可以自己给浮动父元素添加一个overflow属性:hidden
除了有溢出隐藏的作用:触发BFC,并且让浮动的元素继续参与高的计算
用来解决父元素的高度塌陷
b.你可以自己悄悄的在浮动的元素后面补一个元素,补位的元素必须是一个块级元素
如果你非得补一个行内元素,你需要转换元素类型(不可取 会占页面元素) 但是这种方法是不可取的,原因:因为你自己悄悄补上的元素,占页面的位置
4)最优化的方法
万能清除法
.wannengqingchu:after{
必须的属性和内容====配套出现的
content:"";
因为你补位的元素是行内元素,需要转换成块级元素,才能清除浮动
display:block;
转换成块级元素之后,清除浮动带来的补位影响
clear:both
为了解决在ETC(杠精)的问题=====非得在content里面添加内容
需要把你content里面的内容隐藏掉