对于图标,使用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. Docker桥接宿主机网络与配置固定IP地址

    有些需求是把这个容器与宿主机在同一个网段,但是本人不建议这样子去操作,因为一个容器本身就是一个封装好的服务.建议去按默认的网络去实现. 临时设置 [root@linux-docker01 ~]# vi ...

  2. Vmware Vsan 部署中如何将非SSD 硬盘标识为SSD

    通过SSH 登录ESXi主机 # esxcli storage nmp device list #查询ESXI 发现的存储设备 #   esxcli storage nmp satp rule add ...

  3. css清除浮动方式总结

    1.通过父元素overflow:hidden,缺点:超出部分隐藏,不推荐使用 <!DOCTYPE html> <html lang="en"> <he ...

  4. django学习系列——python和php对比

    python 和 php 我都是使用过,这里不想做一个非常理性的分析,只是根据自己的经验谈一下感想. 在web开发方面,无疑 php 更甚一筹. 从某种角度来说,php 就是专门为 web 定制的语言 ...

  5. 关于shell命令的一些用法和技巧

    #!/bin/bash #第一种写法 #date=`date "+%Y-%m-%d %H:%M:%S"` #第二种写法 date=$(date "+%Y-%m-%d %H ...

  6. 剑指Offer （汇总）

    刷完剑指Offer很久了,前几天想起来去年开通的博客园,正好把刷题笔记整理一下 刷题平台:牛客网 刷题语言:Python **链表(8道)** [剑指Offer 3. 从尾到头打印链表 (链表)](h ...

  7. Tomcat配置SSL后使用HTTP后跳转到HTTPS

    Tomcat配置好SSL后将HTTP请求自动转到HTTPS需要在TOMCAT/conf/web.xml的未尾加入以下配置: <login-config> <!-- Authoriza ...

  8. CMake 笔记

    1. configure_file configure_file()让你可以在代码文件中使用CMake中定义的变量. configure_file(<input> <output&g ...

  9. bis.org

    巴塞尔官网包含了很多文档,看起来容易晕,简单说明一下. 首先,文档有几种类型(https://www.bis.org/bcbs/help/publ_types.htm): S: Standards 最 ...

  10. 数字特征值-python

    #Digital eigenvalue.py number = eval(input()) count = 0 Ob = 0 Ox = 0 while number > 0: Ob = numb ...