css 实现正方形的方式

  • Simon 发布于 2018-01-26
  • 栏目: html
  • 873人围观
  • 0评论
1. 使用CSS3的 vw单位

div {

    width: 30%;

    height: 30vw;

    background: red;

}

vw --- 1vw 等于viewport宽度的 1%

vh --- 1vh 等于viewport高度的 1%

vmin --- vw 和 vh 中的较小值

vmax --- vw 和 vh 中的较大值

假设div标签的父元素宽度是浏览器可视区域(viewport)的宽度, 那width: 30% == 30vw, 就可以达到正方形的效果。


2. 利用padding-bottom

div{

     width: 100%;

     height: 0;

     padding-bottom: 100%;

}


3. 效果图


blob.png


标签: html5

评论