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

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

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

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

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;

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