对于图标,使用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. ecplise导入项目报错而文件不报错

    第一步 确认项目的jdk和tomcat版本,在Java Build Path的Libraries中查看包是否有报错,按照本机环境进行配置 第二步 检查 Java Compiler中的jdk版本,和ec ...

  2. 对yolo与fasterrcnn anchors的理解

    yolo: 通过聚类产生5个不同比例的anchors.最后一个特征层的输出(x,y,w,h)与这些不同比列的相乘,将网络层的输出转化为bbox(小尺寸),再通过(H,W)还原成原图大小.一共有5个bb ...

  3. OpenGL 3D旋转的木箱

    学习自: https://learnopengl-cn.github.io/01%20Getting%20started/08%20Coordinate%20Systems/#3d 0,首先添加glm ...

  4. 精进之路之volatile

    volatile 首先了解下Java 内存模型中的可见性.原子性和有序性. 可见性: 可见性是一种复杂的属性,因为可见性中的错误总是会违背我们的直觉.通常,我们无法确保执行读操作的线程能适时地看到其他 ...

  5. 怎么样通过php使用html5实现多文件上传？（php多图上传）

    <!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8&q ...

  6. python—文件创建

    # 1.文件操作# day1.txt# 1.文件路径:E:\day1.txt# 2.编码方式:utf-8.gbk# 3.操作方式:只读,只写,追加,读写,写读# 以什么编码方式储存的方式储存就以什么编 ...

  7. ISAPI筛选器及对ASP源文件的保护

    ISAPI筛选器及对ASP源文件的保护 2009-04-21 01:45:57 标签:ISAPI 筛选器 ASP 源文件 保护 摘要:本文介绍了利用ISAPI筛选器保护ASP源文件的方法,并给出一个实 ...

  8. 2018-2019-2 网络对抗技术 20165228 Exp2 后门原理与实践

    2018-2019-2 网络对抗技术 20165228 Exp2 后门原理与实践 (1)例举你能想到的一个后门进入到你系统中的可能方式? 在使用盗版软件,盗版系统,甚至游戏外挂时,往往会让我们关闭杀毒 ...

  9. spark学习笔记_1

    简单的讲,Apache Spark是一个快速且通用的集群计算系统. Apache Spark 历史: 2009年由加州伯克利大学的AMP实验室开发,并在2010年开源,13年时成长为Apache旗下大 ...

  10. JavaSE-基本数据类型

    一些基础: 字节与字符.字节与位:1个字节=8位(bit)(最高位是符号位,0正数1负)bit是电脑记忆体中最小的单位,在二进位电脑系统中,每一bit 可以代表0 或 1 的数位讯号.bps 是 bi ...