对于图标,使用fontsize设置大小，而非宽高！

高度不够的时候使用min-height

保持宽高比

四个方向的padding都是相对于 本盒子的宽度来的 常用于视频和图片的展示，比如轮播图。

所以这里把高度去掉，让paddingTop取宽度的50%作为高度，因此实现宽高比为2：1.

CSS奇淫技巧的更多相关文章

  1. 记录一些css奇淫技巧

    文本两端对齐 文字在固定宽度内两端对齐 text-align: justify; text-align-last: justify; 滤镜filter 元素(经常用作图片)置灰效果,类似disable ...

  2. Zepto源码分析（二）奇淫技巧总结

    Zepto源码分析(一)核心代码分析 Zepto源码分析(二)奇淫技巧总结 目录 * 前言 * 短路操作符 * 参数重载(参数个数重载) * 参数重载(参数类型重载) * CSS操作 * 获取属性值的 ...

  3. 优化DP的奇淫技巧

    DP是搞OI不可不学的算法.一些丧心病狂的出题人不满足于裸的DP,一定要加上优化才能A掉. 故下面记录一些优化DP的奇淫技巧. OJ 1326 裸的状态方程很好推. f[i]=max(f[j]+sum ...

  4. 12个实用的 Javascript 奇淫技巧

    这里分享12个实用的 Javascript 奇淫技巧.JavaScript自1995年诞生以来已过去了16个年头,如今全世界无数的网页在依靠她完成各种关键任务,JavaScript曾在Tiobe发布的 ...

  5. NGINX的奇淫技巧 —— 5. NGINX实现金盾防火墙的功能(防CC)

    NGINX的奇淫技巧 —— 5. NGINX实现金盾防火墙的功能(防CC) ARGUS 1月13日 发布 推荐 0 推荐 收藏 2 收藏,1.1k 浏览 文章整理中...... 实现思路 当服务器接收 ...

  6. NGINX的奇淫技巧 —— 3. 不同域名输出不同伺服器标识

    NGINX的奇淫技巧 —— 3. 不同域名输出不同伺服器标识 ARGUS 1月13日 发布 推荐 0 推荐 收藏 6 收藏,707 浏览 大家或许会有这种奇葩的需求...要是同一台主机上, 需要针对不 ...

  7. NGINX的奇淫技巧 —— 6. IF实现数学比较功能 (1)

    NGINX的奇淫技巧 —— 6. IF实现数学比较功能 (1) ARGUS 1月13日 发布 推荐 0 推荐 收藏 3 收藏,839 浏览 nginx的if支持=.!= 逻辑比较, 但不支持if中 & ...

  8. javascript之奇淫技巧

    最近准备面试,复习一下javascript,整理了一些javascript的奇淫技巧~ //为兼容ie的模拟Object.keys() Object.showkeys = function(obj) ...

  9. Gradle更小、更快构建APP的奇淫技巧

    本文已获得原作者授权同意,翻译以及转载原文链接:Build your Android app Faster and Smaller than ever作者:Jirawatee译文链接:Gradle更小 ...

随机推荐

  1. ES6标准入门读书笔记

    第一章  基础 1.let和const命令 (1).let用于声明变量,所声明的变量只在当前代码块有效 特点:不存在变量提升     所以在变量声明之前就使用会报错 暂时性死区           只 ...

  2. linux 清理缓存buff/cache

    清理缓存 echo 1 > /proc/sys/vm/drop_cachesecho 2 > /proc/sys/vm/drop_cachesecho 3 > /proc/sys/v ...

  3. IntelliJ IDEA 使用教程(2019图文版) -- 从入门到上瘾

    IntelliJ IDEA 使用教程(2019图文版) -- 从入门到上瘾   前言:IntelliJ IDEA 如果说IntelliJ IDEA是一款现代化智能开发工具的话,Eclipse则称得上是 ...

  4. centos下搭建openstack的环境

    一.准备环境 linux (centos 7.2(C300的虚机) ) java1.8 官网下载tar包 安装前设置环境变量 JAVA_HOME=/usr/lib/jvm/java-1.8.0-ope ...

  5. 关于SpringCloud配置网关转发时出现一下啊错误：“com.netflix.zuul.exception.ZuulException: Forwarding error at org.springframework.cloud.netflix.zuul.filters.route.RibbonRoutingFilter.handleException”

    com.netflix.zuul.exception.ZuulException: Forwarding error at org.springframework.cloud.netflix.zuul ...

  6. Oracle中计算两个日期时间的差

    --方法1 select floor((sysdate - to_date('2006-09-01 08:00:00', 'yyyy-mm-dd hh24:mi:ss'))) as sDays fro ...

  7. python基础—字典的使用{}

    info = {'stu1':"lili", 'stu2':'yoyo', 'stu3':'dudu'}print(info)print(info['stu1'])info['st ...

  8. UITextField属性及方法说明

    /初始化textfield并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(, , , )] //设置 ...

  9. Springboot 定时任务，service层无法注入问题详细解决

    开发一个微信小程序后台,建立websocket 长连接,需要后台开启定时任务, 定时任务定时查库,相应前台 但是具体执行过程中一直在报空指针错误,最后定位到service 为空,无法调用其相关的方法导 ...

  10. 数据下载报getColNameByTableName这个指向异常

    java.lang.NullPointerException at cn.com.burgeon.tasks.webpos.DateGeneration2.getColNameByTableName( ...