css实现自适应正方形的多种方法实现

时间: 2018-01-03阅读: 2056标签: 绘制

方案一:css3 vw 单位

css3 中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width,vh是相对于视口高度百分比的单位,1vh = 1% viewport height;vmin是相对当前视口宽高中较小的一个的百分比单位,同理 vmax是相对当前视口宽高中较大的一个的百分比单位。

#square{  
    width:30%;  
    height:30vw;  
    background:red;  
}

类比:纯CSS实现自适应浏览器高度的正方形只需要设置width的单位为vh即可。

优点:简洁方便。

缺点:浏览器兼容不好。


方案二:设置垂直方向的padding撑开容器

由于margin, padding 的百分比数值是相对父元素的宽度计算的,只需将元素垂直方向的一个padding值设定为与width相同的百分比就可以制作出自适应正方形了。

但要注意,仅仅设置padding-bottom是不够的,若向容器添加内容,内容会占据一定高度,为了解决这个问题,需要设置height: 0。

#square{  
    width:30%;  
    height:0;  
    padding-bottom: 30%;  
    background:red;  
}

优点:简洁明了,且兼容性好。

缺点:会导致在元素上设置的max-width属性失效(max-height不收缩)。


方案三:利用伪元素的 margin(padding)-top 撑开容器

max-width属性失效的原因是:max-width属性只限制于width,也就是只会对元素的 content width起作用。

解决方法是:用一个子元素撑开content部分的高度,从而使max-height属性生效。

首先需要设置伪元素,其内容为空,margin-top设置为100%。

但要注意,若使用垂直方向上的margin撑开父元素,仅仅设置伪元素是不够的,这涉及到margin collapse外边距合并的概念,由于容器与伪元素在垂直方向发生了外边距合并,所以撑开父元素高度并没有出现,解决方法是在父元素上触发BFC:设置overflow:hidden。

#square{    
    width:30%;    
    background:red;  
    overflow:hidden;    
    max-width:200px;  
}    
#square:after{    
    content: '';    
    display: block;    
    margin-top:100%;    
}

若使用垂直方向上的padding撑开父元素,则不需要触发BFC。 

#square{  
    width:30%;  
    background:red;  
    max-width:200px;  
}  
#square:after{  
    content: '';  
    display: block;  
    padding-top:100%;  
}


 来源:http://blog.csdn.net/zhouziyu2011/article/details/70159209


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/308

关闭

如何使用css3绘制任意角度扇形+动画

使用两个半圆做角度拼接。比如想绘制一个缺口朝右,缺口弧度30度角的扇形,那么将由一个旋转65度角的半圆A+一个旋转-65度角的半圆B组合而成。

使用css3绘制画圆,扇形,三角形的实现

css已经越来越强大了 ,可以使用它来绘制各种简单的形状,用于代替图片显示,这次的分享主要用到画圆,扇形,三角形等知识点,由于IE9以上才支持圆角,暂时不考虑兼容问题

纯 CSS 实现大量小块儿绘制

现在做的项目是公司内部全部组要用的 viewer 库. Viewer 需要的功能非常的多,其中的一个就是需要提供一些常用的绘图API功能, 比如用户鼠标移动画箭头,画圈圈,高光选中文本等等。

css怎么绘制箭头?

在网页制作中,很多时候都会有箭头的情况,我们可以使用css来绘制箭头,css是如何绘制箭头的呢?下面我们来看一下使用css绘制箭头的方法。

我是如何用 CSS 绘制各种形状的

实现方式是通过border-radius这个属性;border-radius它可以单独指定水平和垂直半径。用 / 分隔这两个值。并且该属性的值不仅可以接受长度值,还能接收百分比的值。百分比的值会基于元素的尺寸进行解析,宽是水平半径的解析,高是垂直半径的解析。

CSS3+JS实现静态圆形进度条

首先,我们来一个圆(黑色)。接着,再来两个半圆,将黑色的圆遮住。(为了演示,左右两侧颜色不一样),这时候,我们顺时针旋转右侧蓝色的半圆,下面的黑色圆就会暴露出来,比如我们旋转45度(12.5%),效果出来了。

纯css如何绘制三角形_利用border实现画三角形的原理方法

使用css画三角形,首先想到的思路是:利用border边框样式来实现,这是由于border的边框是由四个三角形组成的。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!