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;
        }

    实测不管用(chrome,版本 49.0.2623.110)

    
    

    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%;
        }

    这个方法不错,而且还能在里面写字

    我还想到了其他几种方法:

    1.利用js计算出方块(笨方法)

    2.画一个正方形表格

  • 相关阅读:
    表的相关内容
    数据类型
    mysql入门练习
    mysql入门
    协程
    多进程
    装饰器
    网络编程
    心路历程
    gensim的使用
  • 原文地址:https://www.cnblogs.com/ones/p/5761360.html
Copyright © 2011-2022 走看看