css - calc()设置宽度等于自身的高度？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

css - calc()设置宽度等于自身的高度？

天蓬老师 2017-04-17 11:25:21

[CSS3讨论组]

994

代码如下：

p{
    height: 50vw;
    width: -moz-calc(height);
    width: -webkit-calc(height);
    width: calc(height);
    background:#c7c7c7;
}

控制台输出结果

calc() 没有这种用法吗如果没有该如何让自身宽度等于自身高度呢？

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(1)

阿神2017-04-17 11:27:21 1楼

calc里面不能直接用height，要是高度和宽度相等有以下三种方法：

p{
  width:20vw; /* viewport 的20% */
  height:20vw;
  background-color:green;
  margin-bottom:20px;
}

p{
  width:20%;
  padding-top:20%; /* padding相对于父容器的宽度作为对比 */
  background-color:yellow;
  margin-bottom:20px;
}

p{
  width: 20%;
  background-color:orange;
}
p:before{
  content:'';
  padding:50% 0;/* 此时padding相对于width:20%; */
  display:inline-block;
}

参考：
演示

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

PHP学习

技术支持

返回顶部