CSS中伪元素after的作用

html-css020

CSS中伪元素after的作用,第1张

CSS 伪元素用于向某些选择器设置特殊效果。

":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 <h1>元素后面插入一幅图片:

h1:after{

  content:url(logo.gif)

}

你可知道你css中的box-shadow是做什么用的吗?

就是生成你很费解的那个用的。。

去掉就可以了。。

恩,还有-webkit-box-shadow

【浮动产生负作用 】

1、背景不能显示

由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。

2、边框不能撑开

如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

【css解决浮动,清除浮动方法】

方法一:

<div class="content">

    <div class="fl"></div>

    <div class="fr"></div>

    <div class="clear"></div>

</div>

.clear {clear:bothheight:0font-size:0line-height:0overflow:hidden}

可以不用对父级设置高度 也无需技术父级高度,方便适用,但会多加CSS和HTML标签。

方法二:对父级设置适合CSS高度

方法三:父级div定义 overflow:hidden

对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

方法四:

.cle:after, .clearfix:after, .clear_f:after, .cle_float:after{visibility:hiddendisplay:blockfont-size:0content:'\20'clear:bothheight:0}

.cle, .clearfix, .clear_f, .cle_float{*zoom:1}

在父级加上一个class