zoukankan      html  css  js  c++  java
  • css实现正方形div的3种方式

    1.CSS3 vw 单位
    1vw = 1% viewport width

    <div class="vw">hello,viewport</div>
    .vw {
            width: 50%;
            height: 50vw;
            background: #ccc;
        }

    2.padding-bottom

    <div class="placeholder"></div>
     .placeholder {
            width: 100%;
            padding-bottom: 100%;/* padding百分比相对父元素宽度计算 */
            height: 0;//避免被内容撑开多余的高度
        }

    3,padding-bottom+:after+absolute

    <div class="square">
        <div class="content">
            Hello!
        </div>
    </div>
    .square {
        width: 50%;
        background: #ccc;
    }
    
    .square:after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }
    
    .content {
        position: absolute;
        width: 100%;
        height: 100%;
    }
  • 相关阅读:
    map & reduce
    Generator
    切片
    函数参数
    Dict & Set
    list,tuple
    selenium鼠标和键盘操作
    selenium元素定位以及点击事件
    css定位
    xpath
  • 原文地址:https://www.cnblogs.com/wwlhome/p/5897320.html
Copyright © 2011-2022 走看看