<!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. Unity游戏接入Steam成就

    在接入Steam成就,其实有些地方是有坑点的,而且steam官网给的是c++代码的接入教程.如果是老鸟的话,接入还并不是很难. 但是对于新手其实还是比较痛苦的,网上这方面的资料很少.这里我给总结下,u ...

  2. unity2018的坑点

    发布后有的电脑无法运行exe程序(反正我的电脑不行) 删除发布出来的一个叫UnityCrashHandler64.exe即可运行

  3. 解决Eclipse中Android SDK Manager图标不见了的问题

    在Eclipse中安装完ADT后,发现 Android SDK Manager图标不见了,Android Virtual Device Manager图标也不见了. 解决这个问题,可用如下方法: 打开 ...

  4. UIBezierPath的使用方法

    UIBezierPath的使用方式: 一,直接添加轨迹,然后stroke或者fill UIColor *blue =[UIColor blueColor]; [blue set]; UIBezierP ...

  5. 搭建简单FTP

    搭建简单FTP 环境 CentOS 7 安装 yum install vsftpd 修改配置文件, 在/etc/vsftpd/vsftpd.conf中添加allow_writeable_chroot= ...

  6. [转]前端构建工具gulpjs的使用介绍及技巧

    本文转自:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非 ...

  7. Centos 从零开始 (一)

    因为本人也是刚接触 centos 24k纯小白, 所以是从零开始的攻略的 ,可能技术层次理解的不是很深.但这些东西都是无限的测试,之后一步步可行的. 同时我遇到的问题也会不断的刷新在我的微博上. 一. ...

  8. Reactjs事件处理的三种写法

    目录 前言 1. 在回调函数中使用箭头函数 2. 在构造器中绑定this 3. 使用类字段语法 事件参数的传递. 总结 前言 Reactjs中事件处理,与DOM元素处理类似,但也有一些不同的语法. R ...

  9. 3、springboot之热部署

    我用的是idea 一.开启idea自动make功能 1.CTRL + SHIFT + A --> 查找make project automatically --> 选中 2.CTRL + ...

  10. 四 Scatter/Gather

    scatter/gather用于描述从Channel中读取或者写入到Channel的操作. 分散(scatter):从Channel中读取在读操作中将读取的数据写入多个Buffer中.因此,Chann ...