<!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. blender

    Blender 是一款开源的跨平台全能三维动画制作软件,提供从建模.动画.材质.渲染.到音频处理.视频剪辑等一系列动画短片制作解决方案. 教程 https://www.bilibili.com/vid ...

  2. 存储器的保护（二）——《x86汇编语言：从实模式到保护模式》读书笔记19

    接着上一篇博文说. 5.代码段执行时的保护 每个代码段都有自己的段界限.同栈段一个道理,有效界限和G位相关. G=0:有效界限 = 描述符中的段界限 G=1:有效界限 = 描述符中的段界限值 * 0x ...

  3. 微信小程序整理

    目录 开发环境 目录结构 WXML组件 WXSS 数据绑定 条件渲染 列表渲染 模版 事件 引用 路由传参 API 实例TodoList 1.开发环境 开发工具下载(https://mp.weixin ...

  4. Asp.net core如何使用Session

    转自:https://tahirnaushad.com/2017/08/18/asp-net-core-session-state/ Asp.net core使用session: 在nuget 安装M ...

  5. springboot+mybatis+thymeleaf+docker构建的个人站点开源项目（集成了个人主页、个人作品、个人博客）

    前言 My Site 主要功能有:个人首页.个人作品.个人博客为一体的站点,网站的文章和作品均由markdown进行编写,可以满足你的基本需求.如果觉得这个项目不错,请为它点赞支持. 项目架构 JDK ...

  6. Spring_Spring与IoC_第一个程序

    一.IoC IoC是一种概念,是一种思想,指将传统上由程序代码直接操控的对象调用权交给容器,通过容器来实现对象的装配和管理.控制反转是对对象控制权的转移,从程序代码本身反转到外部容器. 当前IoC比较 ...

  7. SZU4

    #include <iostream> #include <string> #include <cstring> #include <cstdlib> ...

  8. axios拦截器请求头携带token

    转—— https://github.com/superman66/vue-axios-github/blob/master/src/http.js

  9. git 批量删除 tag

    1. master分支存在大量冗余tag aa0e24dfd920a85c39da400a404309cb6fc69dc0 refs/tags/rc_69 f36f3f21f1ce61db3974e9 ...

  10. TortoiseSvn 取消忽略的文件

    右键,TortoiseSvn->Properties,选择列表的一条(Property svn:Ignore),remove.