div消除波动css款式编码共享(4种方式)

日期:2020-09-23 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

1、末尾处加空div标识 clear:both


拷贝编码
编码以下:

.div1{background:#000080;border:1px solid red;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clear{clear:both}

这类方式,觉得以前大伙儿用的较为多。可是莫名其妙多出1个空的div,并且波动越多就要持续加div,让我觉得很哀伤,因此我不太喜爱用。

2、父级div 也1起波动


拷贝编码
编码以下:

.div1{background:#000080;border:1px solid red;width:98%;margin-bottom:10px;float:left;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}

这个方式我记得我是在院校的情况下,看老外的CSS书时看到的,那时候感觉很功能强大,可是如今感觉最好是還是别用了,有时真的会很不便。
由于父级的元素1波动,又会造成别的元素的波动难题,不信你能够试试。

3、父级div界定 height

这个方式实际上我還是蛮常见的,关键用在那些能够明确高宽比的元素上,觉得应用上很便捷。可是那些必须自融入高宽比的就不合适了。

拷贝编码
编码以下:

.div1{background:#000080;border:1px solid red;height:200px;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}

4、父级div界定伪类:after 和 zoom

这个方式也是我平常较为喜爱用的,觉得还挺功能强大的。

能够界定1个通用性类挑选器,随后不断应用:

拷贝编码
编码以下:

.clear{zoom:1}
.clear:after{display:block;clear:both;content:"";}

刚用这个的情况下,还不知道道content特性是干吗的,后来查了下是这么解释的:
content相互配合before和:after伪类1起应用,用于插进內容。
小小的举个事例,简易写1下:

拷贝编码
编码以下:

a:after{content:"aaa";}
<p><a href="#" target="_blank">AAA</a></p>

最终的显示信息結果是AAAaaa


拷贝编码
编码以下:

.div1{background:#000080;border:1px solid red;}</p> <p>.left{float:left;width:20%;height:200px;background:#DDD}</p> <p>.right{float:right;width:30%;height:80px;background:#DDD}</p> <p>.clear{zoom:1}</p> <p>.clear:after{display:block;clear:both;content:"";}