一、CSS全局应用
父标签div下包含两个子标签div,当子标签dvi全部向左float,此时父标签设置的背景色是不显示的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div_a{ background: red; } .div_a1,.div_a2{ float: left; } </style> </head> <body> <div class="div_a"> <div class="div_a1">div_a1</div> <div class="div_a2">div_a2</div> </div> </body> </html>
如果想显示父标签的背景色,可以在子标签中再加一个div,则代码为:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div_a{ background: red; } .div_a1,.div_a2{ float: left; } .div_a3{ clear: both; } </style> </head> <body> <div class="div_a"> <div class="div_a1">div_a1</div> <div class="div_a2">div_a2</div> <div class="div_a3">div_a3</div> </div> </body> </html>
设想下假如一个项目中有很多这样的父子div,需要显示父级的背景色,那么没个父子块都需要单独设置样式是非常繁琐的事,那么通过什么方式解决呢?
首先:div:afer{content:"abcd"}这样的方式可以在标签的后面加上内容,实质上通过after加上的内容也作为一个内联标签存在的。
所以通过after的方式可以实现上面的效果:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div_a:after{ content: "abcd"; display: block; clear: both; } .div_a{ background: red; } .div_a1,.div_a2{ float: left; } .div_a3{ clear: both; } </style> </head> <body> <div class="div_a"> <div class="div_a1">div_a1</div> <div class="div_a2">div_a2</div> </div> </body> </html>
现在需要把加上的内容去掉,并且可以应用的其他父子模块:
visibility: hidden 可以隐藏模块,并且不占用位置,而display:none是隐藏并占据原来的位置
扫描二维码关注公众号,回复:
937156 查看本文章
visibility用在after中还要加上height:0px 才能不占用位置,否则还占据abcd那一行的位置
定义通用模块只需要在style中自定义一个名字叫clearfix的class就可以,.clearfix{},然后如果有相同的模块想用这种格式,只需要在标签class的属性值中添加clearfix就可以
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .clearfix:after{ content: "abcd"; display: block; clear: both; visibility: hidden; height: 0; } .div_a{ background: red; } .div_a1,.div_a2{ float: left; } .div_a3{ clear: both; } </style> </head> <body> <div class="div_a clearfix"> <div class="div_a1">div_a1</div> <div class="div_a2">div_a2</div> </div> </body> </html>