<!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. XmlReader在序列化中的使用

    和XmlDocument最大的不同——XmlReader逐行读取.单独很少使用,一般配合序列化(反序列化)使用,以下给出具体例子: namespace ConsoleApplication1 { pu ...

  2. Java生成二维码和解析二维码URL

    二维码依赖jar包,zxing <!-- 二维码依赖 start --><dependency> <groupId>com.google.zxing</gro ...

  3. 转发与重定向的区别(forward与redirect的区别)

    转发:服务器接收到客户端的请求后,在服务器内部传递的过程.最后回复结果给客户端. 重定向:服务器接收到客户端的请求后,回复一个新url给客户端,客户端跳转新url.

  4. Node.js学习笔记(四) --- fs模块的使用

    目录 . fs.stat 检测是文件还是目录 . fs.mkdir 创建目录 . fs.writeFile 创建写入文件 . fs.appendFile 追加文件 . fs.readFile 读取文件 ...

  5. 【6】.net msmq消息队列实例

    1.msmq消息队列windows环境安装 控制面板---->程序和功能---->启用或关闭Windows程序---->Microsoft Message Queue(MSMQ)服务 ...

  6. The Struts dispatcher cannot be found. This is usually caused by using Struts tags without the associated filter.

    The Struts dispatcher cannot be found. This is usually caused by using Struts tags without the assoc ...

  7. mysql表锁、行锁、索引之间暧昧的关系

    MySQL的innodb存储引擎支持行级锁,innodb的行锁是通过给索引项加锁实现的,这就意味着只有通过索引条件检索数据时,innodb才使用行锁,否则使用表锁.根据当前的数据更新语句(UPDATE ...

  8. python使用元类

    原文:https://blog.csdn.net/youzhouliu/article/details/51906158 type() 动态语言和静态语言最大的不同,就是函数和类的定义,不是编译时定义 ...

  9. 谈谈我从工作中理解的CDN

    一.CDN定义 CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过 ...

  10. csharp: Aspose.Words create table

    /// <summary> /// 20141118 /// Geovin Du /// Aspose.Words创建表 /// </summary> /// <para ...