:after和:before在页面布局中的应用

2017-02-28 2403 3 编辑:深圳网站建设 来源:互联网

随着浏览器的更新迭代,越来越多的新技术在现在常用的浏览器中得到的支持,这也促进了这些属性的推广和使用。:after和:before就是其中之一,这两个伪元素针对目前的常用浏览器有良好的支持。

:after和:before兼容IE8及以上ie浏览器,以及其他浏览器。唯一要注意的就是,在ie8中只能用:after,而不支持::after。因此我们在平常使用的时候直接用单冒号的:after即可。由此可见在以后写页面时,我们可以放心大胆的用这两个伪元素了。那么这两个伪元素都有哪些特性及应用呢?

:after和:before的特性

:after或:before会在元素内容的后面或前面,元素结束符前或后面插入一个子元素。这个元素就叫做:after或:before。伪元素有一下特性:

1.要配合content使用,否则没有效果,content可以为空;

2.默认为行内元素,所以默认是不能设置宽高的,如果需要设置,需要像行内元素的处理方式一样;

3.和其他元素一样,也会继承父级的一些可以继承的属性;

4.在源码中找不到伪元素,所以不能通过DOM对他进行操作。

基本形式

selection:after{

content: "";/*可以向里面加内容,也可以为空*/

}

:after和:before用于清除浮动

我们经常会在一些cssreset里面看到一个clearfix,这既是一个通过伪元素实现的清除浮动的方法,代码如下:

.clearfix:after,

.clearfix:before{

  content:"";

  display:table;

  clear:both;

  height:0;

}

.clearfix{

  zoom:1;/*兼容ie7及以下的ie浏览器清除浮动*/

}

使用:after和:before在页面元素前后插入装饰性的元素

在页面设计中常常会在一些内容前面有icon、特殊符号、或者序号等。这些内容如果直接用元素标签实现的话,用的多了,html中会多出很多看似没有用的标签,并显得代码内容不够简洁清晰。在这些情况下,我们完全可以考虑用伪元素实现同样的效果。

添加特殊符号或者icon:

/* 添加特殊符号 */

.div1{

    text-align:center;

    margin-top:20px;

    font-size:20px;

}

.div1:before{

    content:"“";

    color:red;

}

.div1:after{

    content:"”";

    color:red;

}

添加序号:

/* 添加序号 */

.list{

  width:300px;

  margin:20px auto; 

  counter-reset: subsection;

}

.list h4:before{

  counter-increment: subsection;

  content:counter(subsection) ":"

}

使用:after和:before实现宽高等比的自适应布局

通过将元素中的子元素定位布局,然后再在元素上面添加伪元素,通过伪元素的padding-top值设置百分比,可以实现元素宽高的等比设置,而不需要通过js计算。核心css代码如下:

/*需要宽高等比设置的元素*/

.mama{

position: relative;

width: 200px;

background-color: #666;

}

.mama:before{

content: "";

display: block;/*必须设置这个才能实现*/

padding-top:50%;/*相当于设置的是高度是宽度的1/2*/

}

/*子元素*/

.son{

position: absolute;/*子元素使用绝对定位的目的是使子元素的高度不会撑起父级的高度*/

height: 100%;

width: 100%;

}

使用:after和:before使图片垂直居中

img元素作为行内块元素,他的水平居中可以跟文字一样处理,直接使用text-align:center;但是垂直怎么居中呢?其实我们还有一个垂直对齐方式的属性:vertical-align,可以实现垂直方向的元素对齐方式。当然,直接单独使用vertical-align:middle并不能使img垂直居中,它的垂直居中,其实是需要一个参照物的,而且这个参照物的高度还必须和父级一样高。很明显,我们可以使用伪元素实现这个参照物的功能。实际代码如下:

.box{

  height:300px;

  width:300px;

  background-color:#999;

  margin:0 auto;

  text-align:center;/*水平居中必须的代码*/

  font-size:0;/*清除display:inline-block产生的间隙*/

  letter-spacing:-1em;/*清除display:inline-block产生的间隙*/

}

.box img{

  vertical-align:middle;/*垂直居中必须的代码*/

}

.box:before{

  content:"";

  display:inline-block;

  width:0;/*减少伪元素宽度对布局的影响*/

  height:100%;/*垂直居中必须的代码*/

  vertical-align:middle;

  font-size:0;

}

总结:

伪元素:after和:before拥有良好浏览器兼容性以及广泛应用。正确合理的使用伪元素,不仅可以简化html代码,减少代码的嵌套层次,还可以在页面排版布局中起到重要作用

专业的网站建设公司,深正互联,如您有网站营销需求,请您关注我们,或者致电13828884598

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联