zoukankan      html  css  js  c++  java
  • 用css实现自适应正方形

    用CSS实现自适应正方形

    不多说,直接上代码,本文章一共例举了3种方案

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS实现自适应正方形</title>
        <style>
          /*使用padding-bottom实现正方形*/
         .square1 {
            width: 10%;
            padding-bottom: 10%;/* padding百分比相对父元素宽度计算,用padding去填充height*/
            height: 0;/*避免被内容撑开多余的高度 */
            background: #4acfff;
         }
         .square2 {
            width: 10%;
            height: 10vw;
            background: pink;
         }
         .square3{
             width: 10%;
             overflow: hidden;
             background: yellow;
         }
         .square3:after {
             content:'';
             display: block;
             margin-top: 100%;
          }
        </style>
    
    </head>
    <body>
        <!-- 使用padding-bottom实现正方形 -->
        <!-- padding百分比相对父元素宽度计算,用padding去填充height -->
         <div class="square1">使用padding-bottom实现正方形</div>
        <!-- 使用css3单位vw -->
        <!-- 原理同padding,也是利用了vw是相对宽度,不过要注意是相对视窗宽度哦-->
        <div class="square2">使用css3单位vw实现正方形</div>
        <!-- 使用伪类margin -->
        <div class="square3">使用伪类margin</div>
    </body>
    </html>

  • 相关阅读:
    oracle 口令过期 解决
    powerdesginer script 脚本,生成数据模型
    ntp时间同步
    CentOS下安装JDK的三种方法
    linux安装jdk
    YUM仓库配置
    Shell编程
    RPM
    常用基本命令十二(crond系统定时任务)
    常用基本命令十一(后台服务管理)
  • 原文地址:https://www.cnblogs.com/tanweiwei/p/10431639.html
Copyright © 2011-2022 走看看