<!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. git 学习之基本操作

    之前的帖子已经讲述了什么是 Git 的仓库,并且添加了文件到 Git 的仓库,这里我们来学习下一些简单的操作. status 和 diff  之前我们已经提交了了一个 testFile.txt 的文件 ...

  2. 九度oj题目1342：寻找最长合法括号序列II

    题目1342:寻找最长合法括号序列II(25分) 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:886 解决:361 题目描述: 假如给你一个由’(‘和’)’组成的一个随机的括号序列,当然 ...

  3. Ubuntu apache

    Linux系统为Ubuntu 1. 启动apache服务 # /etc/init.d/apache2 start 2. 重启apache服务 # /etc/init.d/apache2 restart ...

  4. disruptor--Introduction

    The best way to understand what the Disruptor is, is to compare it to something well understood and ...

  5. [转]OData/WebApi

    本文转自:https://github.com/OData/WebApi/tree/vNext OData Web API Introduction OData Web API (i.e., ASP. ...

  6. C# ASP.NET Core使用HttpClient的同步和异步请求

    引用 Newtonsoft.Json // Post请求 public string PostResponse(string url,string postData,out string status ...

  7. Hadoop实战之一~Hadoop概述

    对技术,我还是抱有敬畏之心的. Hadoop概述 Hadoop是一个开源分布式云计算平台,基于Map/Reduce模型的,处理海量数据的离线分析工具.基于Java开发,建立在HDFS上,最早由Goog ...

  8. 虽然我们可能不想对元素应用3D变换，可我们一样可以开启3D引擎

    例如我们可以用transform: translateZ(0); 来开启硬件加速 ..cube {-webkit-transform: translateZ(0);-moz-transform: tr ...

  9. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

  10. CentOS 7运维管理笔记(3)----Linux路由器配置

    当正在配置的Linux主机需要作为路由器使用时,通过以下步骤配置后,子网上的计算机就可以访问外网了: 1. 编辑 /etc/sysctl.conf 文件,添加 net.ipv4_ip_forward ...