<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    .square{

        padding: 50%;

        position: relative;

    }

    .c {

        position: absolute;

        background: yellowgreen;

        /* transform: translate3d(-50%, -50%, 0); */

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

    }

    </style>

</head>

<body>

    <div class="square">

        <div class="c"></div>

    </div>

</body>

</html>

巧用padding生成正方形DIV的更多相关文章

  1. jQuery生成一个DIV容器，ID是"rating".

    我们需要一些服务器端代码,这个例子中用到了一个PHP文件,读取rating参数然后返回rating总数和平均数.看一下rate.php代码.虽然这些例子也可以不使用AJAX来实现,但显示我们不会那么做 ...

  2. 用css实现正方形div

    目标:实现一个正方形,这个正方形边长等于 方法一:使用单位vw, (ps我觉得这个是最简单的方法) html结构也很简单,只有一个div即可 <html> <body> < ...

  3. css实现正方形div的3种方式

    网上百度了几种可以按照百分比画方框的方法 1.CSS3 vw 单位 1vw = 1% viewport width <div class="vw">hello,view ...

  4. css利用padding生成图标

    先插入HTML结构: <div class="line-three"></div> <div class="circle"> ...

  5. 前端下拉框选择和动态生成调用div

    进入到一个项目期中,一边做项目,一边学习其中用到的知识.这些知识都是零碎的,有数据库,有html,有js,还有django.趁周末时间,整理前面遇到过的前端相关的知识点. 下拉框选择 <html ...

  6. 巧用padding让图片宽高比固定并自适应布局

    1.从上图知道原始图片大小是 800 * 250,即宽高比为 3.2: 2.html 及 css 代码如下, 可以知道就只是在一个div里面放了一张图片,那么如何让这张图片的宽高比固定呢,看了css之 ...

  7. 在iframe内页面完全加载完后，关闭父页面生成的div遮罩层

    遮罩层div为iframe父页面生成,需在iframe内页面完全加载完后,关闭遮罩层 alertMsgClose() :函数为关闭遮罩层函数 此段代码在iframe页面内: <script> ...

  8. 《CSS世界》笔记二：盒模型四大家族

    上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...

  9. 生成100个Div

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

随机推荐

  1. Mutex,Monitor,lock,MethodImplAttribute,SynchronizedAttribute的用法差异

    1)Mutex:进程之间的同步(互斥量). 2)lock/Monitor……:线程同步.其中lock是Monitor的简化版本(直接生成try{Monitor.Enter(……)}finally{Mo ...

  2. Django多进程日志文件问题

    Django多进程日志文件问题 最近使用Django做一个项目.在部署的时候发现日志文件不能滚动(我使用的是RotatingFileHandler),只有一个日志文件. 查看Log发现一个错误消息:P ...

  3. Windows x64 栈帧结构

    0x01 前言 Windows 64位下函数调用约定变为了快速调用约定,前4个参数采用rcx.rdx.r8.r9传递,多余的参数从右向左依次使用堆栈传递.本次文章是对于Windows 64位下函数调用 ...

  4. 我是怎么一步步用go找出压测性能瓶颈

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由mariolu 发表于云+社区专栏 序言: ​ 笔者要在线上服务器load日志并且重放来测一些机器性能指标.模拟机器资源比较少,相对的 ...

  5. TCP/IP协议簇分层详解---转

    http://blog.csdn.net/hankscpp/article/details/8611229 一. TCP/IP 和 ISO/OSI ISO/OSI模型,即开放式通信系统互联参考模型(O ...

  6. 利用kvo对集合进行操作

    利用kvo对集合进行操作 NSLog(@"其他学生的成绩%@", [array valueForKeyPath:@"point"]); NSLog(@" ...

  7. Codeforces 809D. Hitchhiking in the Baltic States

    Description 给出 \(n\) 个数 \(a_i\),每一个数有一个取值 \([l_i,r_i]\) ,你来确定每一个数,使得 \(LIS\) 最大 题面 Solution 按照平时做法,设 ...

  8. [转]VS清除打开项目时的TFS版本控制提示

    本文转自:http://www.cnblogs.com/weixing/p/5219294.html 对于曾经做过TFS版本控制的项目,在版本控制服务不可用的时候,依然会在每次打开项目的时候都提示:当 ...

  9. 05.部分类 partial

    namespace _06.部分类 { class Program { static void Main(string[] args) { } } /// <summary> /// 这个 ...

  10. windows下es安装教程

    es安装 1.es下载地址:https://www.elastic.co/downloads/past-releases 2.使用es需要先安装好jdk,注意es版本和jdk版本的兼容问题,es6.1 ...