纯CSS实现块级框等比显示

关于元素的宽高等比显示的问题,在之前一直没有发现什么好的解决方法,也曾经一度以JS来实现元素的宽高等比的问题,最近偶的灵感,想到了一个更好的解决方法,使用纯CSS实现。

一:概述

这些方法,在之前就应该有人想到过,我呢,估计比较懒,不会去花很多的时间泡在网上,看别人的东西,因为记忆力不好,所以更喜欢花费时间自己去思考一些问题,一直摸索着前进~~所以~~~其实也是没有在其他地方见到过这样的写法而已,一般般情况下,为了能做到宽度自适应,那么高度就不会是固定的了。

当内容一定的情况下,假设就是体积一定,那么当宽度变小的时候,高度肯定是要变大的么,所以~~其实很少能碰到这样的应用场景~~

而之前如果用到这样的地方,就会使用JS去做的处理,效率那就不用多说了吧,关键是,你还得绑定到resize上,这效率就更~~~好了不说了,继续正题了。

效果图

至于效果的话,那么直接去demo页吧,我觉得~~~ 宽高等比显示demo

demo中,元素的宽高是:height=75%*width;

原理

关于原理,要怎么说呢,先看看paddingmargin支持的属性值?如果不记得,那么就去看看吧,W3C padding,其中,当padding取值为百分比时,那么就会有一个情况,这个百分比的计算是其父元素的宽度做基数的,所以,我们就可以利用这一点去实现,一个宽度高度的对比。

其实margin也是可以的,但是如果使用margin的话,那么内部元素,就的控制就会变得有些复杂了,所以~~,当然,还有一点要注意,那就是父元素最好不要maginpadding的值,因为在不同的浏览器下,width的计算方式是不同的,所以,为了能在各个浏览器有更统一的比例,那么父元素是不使用paddingmargin的。

那么代码就很简单了,如下:

这里假设父元素就是body,宽度自适应,html代码如下:

	
<div class = "p">
<div class = "c"></div>
</div>
	

CSS代码如下:

	
.p{
	position:relative;
	left:0px;
	top:0px;
	padding-bottom:75%;
	background-color:#aaa;
}
.c{
	background-color:#ccc;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
} 
	

再利用position元素,height可以使用百分比控制,即可实现自适应的模块了。

可以兼容很多浏览器,本机测试,只有IE的混杂模式,是有问题的,因为不支持height:100%的写法。

其他浏览器,表现都还好。

如果不需要自适应宽度的,那么也好办,只有在上层再套一层div即可,div按比例控制宽度即可~~

OK,这算个小技巧吧,也许很多人都知道了,这里就当时记录下吧,过年前的一次小记录~~

总结

最近不太知道能写些什么了,没有新的认识,新学的的东西,也没有理解到~~本篇主要的意思还是,基础很重要,理解基础,然后更好的使用,能完成一些意想不到的效果的哦。

本文地址:http://www.zhangyunling.com/?p=364

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>