CSS基础教程8——伪元素和浮动

71 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第29天,点击查看活动详情

CSS基础教程8——伪元素和浮动

伪元素(默认行内元素)

选择器::before{css...},在父元素前添加
选择器::after{css...},在父元素之后添加
选择器::first-line{css...},用于向文本的首行设置特殊样式
选择器::first-letter{css...},用于向文本的首字母设置特殊样式

伪元素可以多个一起使用,例如:

p:first-letter{
    color:rgb(255,0,0);
}
p:first-line{
    color:rgb(0,0,0);
}

段落的第一个字将显示为红色,第一行除了第一个字其余的字显示为黑色。

更多详细的伪元素内容大家可以自行上网

标准流

标准流也叫文档流,指标签盒⼦在页⾯中默认的排布规则(从左⾄右,⾃上⽽下),大多数元素都在正常流中,要让一个元素不在正常流中,唯一的方法就是使之成为浮动元素定位元素

浮动的作用

float:值;,特点(会脱离标准流,在标准来中不占位置),浮动后得标签具有行内块的特点,如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。

捕获.PNG

浮动可以和margin配合使用让标题或、段落、图片等向右侧浮动进行布局。

捕获.PNG

清除浮动(给别的标签带来的影响)

1.给父级块加height(有的时候不能加)

2.在父元素的内容最后加一个块元素设置clera:both;(类型一般为clearfix)(有可能结构会乱 )

3.单伪元素清除.clearfix::after{content: ''; display: block; clear; both; height: 0;visibilitu: hidden;}(工作常用)

4.双伪元素清除.clearfix::before,.clearfix::after{content: ''; display: table;} .clear::after{clear; both;}

5.给父级添加overflow: hidden;

清除浮动可以不下需要记住,只需要知道有这种办法,用的时候复制黏贴进去即可~~~

(点击进入专栏查看详细教程)