精华内容
下载资源
问答
  • 在移动端如何让宽度自适应来实现一个正方形,也就是宽度设置为百分比。 方法一: 使用javascript/jquery <style> .wrap { width: 100%; background: thistle; } .child { background: teal; width: ...

    前言

    在移动端如何让宽度自适应来实现一个正方形,也就是宽度设置为百分比。

    方法一:

    使用javascript/jquery

    <style>
         .wrap { 
         width: 100%;
         background: thistle;
       } .child {
         background: teal;
         width: 20%;
       } </style>
    <body>
         <div class="wrap">
               <div class="child">111</div>
         </div>
    </body>
    <script src="wjs/lib/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(window).on('resize', function () {
                $('child').css('height',$('li').css('width'));
            }).trigger('resize');
        })
    </script>

    效果图:

    方法二:

    将元素垂直方向的一个padding,也就是padding-bottom或者padding-top设置为和宽度相同的百分比,将盒子撑起来,

    padding-bottom用法:

    但是padding是不包含盒子内容的,所以我们把盒子高度设置为0,否则文字会溢出,导致高度大于宽度。

    可以看出来在正方形中有内容的时候,内容会在正方形外面,这是因为默认文字是从左到右,从上到下的排列所以paddin-bottom以后文字会在正方形上面

    <style>
         .wrap { 
         width:
    100%;
         background: thistle;
       } .child {
         background: teal;
         width:
    20%;
         padding-bottom: 20%;
         height:
    0;
       }
    </style> <div class="wrap"> <div class="child"> 1111 </div> </div>

    效果图:

    padding-top用法:

    同样需要设置height:0,可以看出来在正方形中有内容的时候,内容会在正方形外面,这是因为默认文字是从左到右,从上到下的排列所以paddin-top以后文字会在正方形下方(外面)

    <style>
         .wrap { 
         width: 100%; 
         background: thistle;
       }
         .child {  
         background: teal; 
         width: 40%; 
         padding-top: 40%;
         height: 0;
       }
    </style>
    <div class="wrap">
         <div class="child">
              1111
         </div>
    </div>

    效果图:

    方法三:

    利用双层嵌套来写,将外层的div的position设置relative,内层的position设置为absoult,利用绝对定位消除空间占用 
    分别看设置成padding-top/padding-bottom的效果

    padding-bottom: 

    <style>
    .wrap{
        padding-bottom:50%;
        height: 0;
        background:thistle;
        width: 50%;
        position: relative;
    }
    .child{
        position: absolute;
    width: 100%; height: 100%; } </style> <div class="wrap"> <div class="child"> 111 </div> </div>

    效果图:

     

    padding-top: 

    <style>
    .wrap{
        padding-top:50%;
        height: 0;
        background:thistle;
        width: 50%;
        position: relative;
    }
    .child{
        position: absolute;
        width: 100%;
        height: 100%; 
    } 
    </style>
    <div class="wrap">
        <div class="child">
            111
        </div>
    </div> 

    效果图:

    运行之后我们发现写padding-top还是不可以,我们来检查代码发现,在写内层的div时候没有给top,left的值,让我们把top,left加上再看看

    .child{
        position: absolute;
        width: 100%;
        height: 100%; 
        left: 0;
        top: 0;
    } 

    效果图:

    注:所以如果用padding-top的时候一定要记得添加top,left

    方法四:

    使用 vw/vh 单位,但是需要注意的是vw/vh单位是将当前视口的宽度/高度平均分成100份的长度,并非父级盒子,1vw = 1% viewport width。

    <style>
            html,body {
                width: 100%; 
                height: 100%;
            }
            .wrap { 
                background: thistle;
            }
            .child {
                background: teal; 
                width: 50%; 
                height: 50vw;
            }
    </style>
    <body>
        <div class="wrap">
            <div class="child">
                1111
            </div>
        </div>
    </body>

    效果图:

    注意:此时,类名为wrap的div不设宽或将宽度设置100%;因为类名为child的div宽度我们设置为百分比是相对父元素的。height我们设置为了50vw,也就是50% viewport width。

     

    参考:纯CSS实现正方形、自适应正方形方法

     

    转载于:https://www.cnblogs.com/kunmomo/p/10838458.html

    展开全文
  • ​在知识星球遇到的问题中,有不少朋友问如何修改数值度量值的格式,比如,新建的度量值如何显示为百分比或者千分位等等,这篇文章就帮你掌握修改格式的几种方式。假设已经建好了度量值:收入 = SUM('订单'[销售额...

    ​在知识星球遇到的问题中,有不少朋友问如何修改数值型度量值的格式,比如,新建的度量值如何显示为百分比或者千分位等等,这篇文章就帮你掌握修改格式的几种方式。

    假设已经建好了度量值:

    收入 = SUM('订单'[销售额])

    以此为例来看看都有哪些方式可以更改这个度量值的格式。

    1,使用"格式设置"功能

    在【建模】选项卡下,有个"格式设置"区,如下图,

    选中需要修改格式的度量值,然后在这里调整格式即可,非常方便:

    2,使用FORMAT函数

    如果想让这个度量值显示为千分位并且保留两位小数,还可以这样写:

    格式化收入 = FORMAT([收入],"#,##0.00")

    显示结果如下:

    这种方式十分灵活,但度量值会变成文本格式,不能进一步进行数值运算,只适合展示最终结果时使用。

    关于FORMAT函数的格式参数详见:利用FORMAT函数自定义数据格式

    3,使用自定义格式功能

    在刚刚过去的9月更新中,其中有个小功能很实用,就是自定义格式,这个功能在建模视图中,

    比如选中[收入]和[QOQ]这两个度量值,格式选择为"自定义",参数设置为:

    ¥#,##0.00;(¥#,##0.00)

    如下图所示:

    这个参数的含义是,带人民币符号且以千分位两位小数显示,并且负数用括号表示,显示如下:

    这种方式是可以批量设置的哦,关于建模视图的更多功能,参考:体验 Power BI 新的建模视图

    总结

    这三种修改格式的方式,以第一种最为方便,点几下鼠标能满足大部分场景下的需求;第三种更为灵活,可以批量同时设置,且这两种都不改变度量值的数值属性;

    而第二种FORMAT函数的方式,虽然会使结果变为文本型,但它可以在度量值中直接定义,在特定场景下十分有用。

    展开全文
  • 通常设置它以最小的配置更改来监视现有的长期运行的AutoScaling组(通常只是对其进行标记,但即使使用现有的标记也可以避免),从而通常节省70%-90%的Spot成本,但是与替代工具和解决方案相比,集成度更高,更具...
  • 子程序 控制_取已载入百分比, 整数, 公开, 返回Flash播放器已经装载动画的百分比,0-100。 .子程序 控制_是否可跳转, 逻辑, 公开, 检测可否跳转到某帧。 .参数 要跳到的帧, 整数, , 帧数从0算起,0表示动画的...
  • 3.3 文本幻灯片的布局设置 3.4 文本幻灯片的分类 3.4.1 项目幻灯片的制作 3.4.2 表格幻灯片 第4章 图片幻灯片--图文并茂,生动形象 4.1 PowerPoint中常用的图片类型 4.2 图片处理的必备知识 4.2.1 素材...
  • windowsnt 技术内幕

    2014-04-09 20:47:17
    打印机设置访问优先级 调度大型打印作业 同一打印设备创建多个打印机 设置分割符页(Separator Page) 打印处理过程简介 删除文档 设置通知、优先级和打印时间 打印机的暂停、清除和重试 停止和重启动缓冲器服务 ...
  • 如果设置为 ALWAYS, 只有在表被更新后才获取行锁。如果设置为 INTENT, 只有行锁将用于SELECT FOR UPDATE, 但在更新时将获取表锁。 值范围: ALWAYS | DEFAULT | INTENT 默认值: ALWAYS shared_servers 说明 : 指定...
  • 你必须知道的495个C语言问题

    千次下载 热门讨论 2015-05-08 11:09:25
    6.22 如何在一个文件中判断声明extern的数组的大小(例如,数组定义和大小在另一个文件中)?sizeof操作符似乎不行。 6.23 sizeof返回的大小是以字节计算的,怎样才能判断数组中有多少个元素呢? 第7章 内存...
  • 实例272 将菜单项的字体设置为粗体 实例273 创建级联菜单 实例274 级联菜单的动态合并 实例275 带历史信息的菜单 实例276 像开始菜单一样漂亮的菜单 实例277 制作任务栏托盘菜单 实例278 可以拉伸的菜单 实例...
  • 实例272 将菜单项的字体设置为粗体 实例273 创建级联菜单 实例274 级联菜单的动态合并 实例275 带历史信息的菜单 实例276 像开始菜单一样漂亮的菜单 实例277 制作任务栏托盘菜单 实例278 可以拉伸的菜单 实例...
  • 实例272 将菜单项的字体设置为粗体 实例273 创建级联菜单 实例274 级联菜单的动态合并 实例275 带历史信息的菜单 实例276 像开始菜单一样漂亮的菜单 实例277 制作任务栏托盘菜单 实例278 可以拉伸的菜单 实例...
  • *4.15 我怎样把一个int变量转换char *?我试了类型转换,但是不行。 52 第5章 空指针 53 空指针和空指针常量 53 5.1 臭名昭著的空指针到底是什么? 53 5.2 怎样在程序里获得一个空指针? 54 5.3 用...
  • 《你必须知道的495个C语言问题》

    热门讨论 2010-03-20 16:41:18
    *4.15 我怎样把一个int变量转换char *?我试了类型转换,但是不行。 52 第5章 空指针 53 空指针和空指针常量 53 5.1 臭名昭著的空指针到底是什么? 53 5.2 怎样在程序里获得一个空指针? 54 5.3 用...
  •  实例005 程序设置版本和帮助信息 7  实例006 设置Windows应用程序启动窗体 8  实例007 统一窗体中控件的字体设置 9  实例008 通过“格式”菜单布局窗体 10 1.3 快速开发项目必备 10  实例009 项目...
  • 实例005 程序设置版本和帮助信息 8 实例006 设置Windows应用程序启动窗体 9 实例007 统一窗体中控件的字体设置 10 实例008 通过“格式”菜单布局窗体 10 1.3 快速开发项目必备 11 实例009 项目添加DLL文件引用 ...
  • Sqlite 一款轻型的数据库,是遵守ACID的关系数据库管理系统,它包含在一个相对小的C库中 W3C 万维网联盟,创建于1994年,是Web技术领域最具权威和影响力的国际中立性技术标准机构。主要的工作是发展 Web 规范,...
  • 商城默认中的用户积分和预存款兑换比率一直是一比二,很多用户不知如何修改,本次更新中增加了用户积分和预存款兑换比率设置,在后台可以方便的设置兑换比率,方便用户进行修改设置。 二六、增加缩略图弹出显示...
  • 程序开发范例宝典>>

    2012-10-24 10:41:28
    实例244 将计算机设置为休眠状态 338 实例245 切换输入法 339 实例246 创建应用程序快捷方式 340 7.5 系统设置 340 实例247 设置桌面背景 341 实例248 设置系统时间 342 实例249 设置屏幕分辨率...
  • 实例244 将计算机设置为休眠状态 338 实例245 切换输入法 339 实例246 创建应用程序快捷方式 340 7.5 系统设置 340 实例247 设置桌面背景 341 实例248 设置系统时间 342 实例249 设置屏幕分辨率 343 7.6 系统监控 ...
  • C#程序开发范例宝典(第2版).part02

    热门讨论 2012-11-12 07:55:11
    实例244 将计算机设置为休眠状态 338 实例245 切换输入法 339 实例246 创建应用程序快捷方式 340 7.5 系统设置 340 实例247 设置桌面背景 341 实例248 设置系统时间 342 实例249 设置屏幕分辨率 343 7.6 系统...
  • C#程序开发范例宝典(第2版).part13

    热门讨论 2012-11-12 20:17:14
    实例244 将计算机设置为休眠状态 338 实例245 切换输入法 339 实例246 创建应用程序快捷方式 340 7.5 系统设置 340 实例247 设置桌面背景 341 实例248 设置系统时间 342 实例249 设置屏幕分辨率 343 7.6 系统...
  • 实例244 将计算机设置为休眠状态 338 实例245 切换输入法 339 实例246 创建应用程序快捷方式 340 7.5 系统设置 340 实例247 设置桌面背景 341 实例248 设置系统时间 342 实例249 设置屏幕分辨率 343 7.6 系统...

空空如也

空空如也

1 2 3
收藏数 58
精华内容 23
关键字:

如何设置为百分比型