转行学开发,代码100天——2018-04-05
CSS中的两个伪类:before和:after适合应用与在元素的开始或者结尾处添加修饰性文字或外观,实现内容添加的同时并没有破坏HTML代码
语义。如之下的一个应用
<div class="main"> <div class="slider">this is a slider bar</div> <div class="content">this is the main content </div> <div class="clear">clear</div> </div>
<style type="text/css"> .slider{ float: left; width: 150px; border: 1px solid red; } .content{ float: right; width: 450px; border: 1px solid red; } .clear{ clear: both; border: 1px solid red; } </style>
上例中为了清除浮动,添加了一个<div>盒子,并为此div添加了clear样式。这是一个常规的用法,但这种方式破坏了HTML代码的语义,并不是一个很好的方案,应该删除这个对于的<div>元素,并修改CSS样式如下:
<div class="main clearfix"> <div class="slider">this is a slider bar</div> <div class="content">this is the main content </div> <!-- <div class="clear">clear</div> --> </div>
<style type="text/css"> .slider{ float: left; width: 150px; border: 1px solid red; } .content{ float: right; width: 450px; border: 1px solid red; } .clearfix{ *zoom:1; } .clearfix:before, .clearfix:after{ content: ""; display: table; } .clearfix:after{ clear: both; } </style>
修改后的代码使用了:before和:after伪类,很好地解决了由于多余的元素而破坏HTML代码语义的问题。