蝙蝠岛资源网

CSS实现一个自适应的正方形的方法示例
网页制作 2024/12/23 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

传统方法正方形用固定的形式写 直接长＝宽写固定的值如下

.box{
		width: 200px;
		height: 200px;
		background: pink;
		color: #666;
	}

CSS实现一个自适应的正方形的方法示例

但是很多情况下，在移动端的设计里，图片的宽度随着不同的移动设备进行改变的，这个时候就需要用到自适应的正方形的实现。

下面介绍两种比较简单的实现方法：

方法一：CSS3 vw 单位，vw是相对于视口的宽度。视口被均分为100单位的vw。1vw = 1% viewport width

.box{
		width: 20%;//width:20vw也可以
		height: 20vw;
		background: pink;
	}

方法二：设置盒子的padding-bottom样式，让盒子的padding-bottom和盒子的宽度一样，同时设置heigh = 0px；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" href="">
	</head>
	<style>
                *{
            	    margin: 0;
	            padding: 0;
                }
		.box{
			width: 20%;
			/* 设置height为0 ，避免盒子被内容撑开多余的高度 */
			height: 0px;
			/* 把盒子的高撑开，
			   和width设置同样的固定的宽度或者百分比 ，
			   百分比相对的是父元素盒子的宽度 */
			padding-bottom: 20%;
			background: pink;
			color: #666;
		}
	</style>
	<body>
		<div class="box">	
	            <p>&nbsp;这是一个自适应的正方形</p>
		</div>	
	</body>
</html>

CSS实现一个自适应的正方形的方法示例

要注意的是，如果这里没有写height：0px；当盒子里面有内容的时候，盒子会被内容撑大

CSS实现一个自适应的正方形的方法示例      CSS实现一个自适应的正方形的方法示例

如果把padding-bottom改成padding-top会出现什么现象？

CSS实现一个自适应的正方形的方法示例       CSS实现一个自适应的正方形的方法示例

可以看出来在正方形中有内容的时候，内容会现实在正方形外面，这是因为默认文字是从左到右，从上到下的排列，所以paddin-top以后文字会在正方形外面，所以这里的paddin-bottom和padding-top并不能混用

另外因为盒子设置了heigh:0px；导致该元素里面再有子元素的时候，就无法正常设置高度。所以我们需要用到position: absolute;使当前内容脱离文档流,那么内容的高度百分比参照的就是父级的宽度

*{
	margin: 0;
	padding: 0;
}
.box{
	width: 20%;
	/* 设置height为0 ，避免盒子被内容撑开多余的高度 */
	height: 0px;
	/* 把盒子的高撑开，
	   和width设置同样的固定的宽度或者百分比 ，
	   百分比相对的是父元素盒子的宽度 */
	padding-bottom: 20%;
	background: pink;
	color: #666;
	position: relative;
	overflow: hidden;
}
p{
	position: absolute;
	width: 100%;
	height: 100%;
	background: yellow;
}

CSS实现一个自适应的正方形的方法示例

这样子盒子里面的内容就把正方形占满啦

标签：
CSS,自适应,正方形
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“CSS实现一个自适应的正方形的方法示例”

暂无CSS实现一个自适应的正方形的方法示例的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com