如何用纯css写一宽为30%的正方形，用到了padding属性；

会不会恍然大悟呢？

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>Document</title>

   <style type="text/css">

     /*div{

       background: #c6c;

       margin: 0;

       padding-bottom: 30%;

     }*/

     /*div{

       background: #c6c;

       margin: 0;

       padding: 15% 0;

     }*/

    #dd::after{

     content: "";

     display: block;

     padding-top: 100%;

    }

   </style>

 </head>

 <body>

   <div style="width:30%; background:red;" id="dd"></div>

 </body>

 </html>

7-11为法一

12-16为法二

css写宽为30%的正方形的更多相关文章

  1. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  2. div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形

    摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...

  3. css写出0.5px边框（一）

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

  4. 还在为小三角形切图？使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

  5. CSS写的提示框（兼容火狐IE等各大浏览器）

    项目上使用jQuery的Tooltip组件,在谷歌上正常,在火狐和IE下没有效果,所以根据谷歌的提示框单独用CSS写了个提示框,比较好的兼容了火狐和IE,且效果一样 原Tooltip代码: $('#d ...

  6. html+css写出类似word目录样式的内容

    word目录的格式里这种很常见,要用html+css写出来刚开始还有点懵. 左右两边都是内容撑开宽度,中间内容的宽度也不是确定的,也是随着左右两边的内容动态变化的. 最终解决思路是,给右边内容加上白色 ...

  7. CSS Icon 项目地址 小图标-用css写成的

    http://cssicon.space/#/icon/focus 这是所有用css写成的  小图标  右侧有 html和css代码

  8. CSS Devices可以让你在线直接获取使用CSS写的Mobile外形。

    CSS Devices可以让你在线直接获取使用CSS写的Mobile外形. CSS Devices 彩蛋爆料直击现场

  9. css写出三角形（兼容IE）

    css写出三角形   利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...

随机推荐

  1. WINCE6.0组件选择说明

    WINCE6.0组件选择说明 图1 RAS/PPP组件前面的√标识表示我们手动选择,TAPI2.0前面的■标识表示选组件时根据依赖关系自动选择的,PPPoE前面的□标识组件没有选择.

  2. c++ float 带 e 的指数

    带e是指10的 e后面次方 #include <iostream> int main() { float f; f = 9.87654321f; std::cout << f ...

  3. Windows平台安装Redmine2.5.x

    安装准备 下载RubyInstaller和Development Kit,也可以使用RailsFTW,轻松搞定windows下的安装. 下载MySql 下载mysql-connector-c-noin ...

  4. Oracle同义词学习

    oracle的同义词总结   从字面上理解就是别名的意思,和视图的功能类似.就是一种映射关系.   同义词拥有如下好处:   节省大量的数据库空间,对不同用户的操作同一张表没有多少差别;   扩展的数 ...

  5. 线程入门之join方法

    package com.thread; /** * <join:将某线程加入进来,相当于方法调用,也叫合并某个线程> * <功能详细描述> * * @author 95Yang ...

  6. implement Cartographer ROS for TurtleBots

    github source: https://github.com/googlecartographer/cartographer_turtlebot 1. Building & Instal ...

  7. yii2-获取配置选项的值

    Yii::$app->属性值 e.g:echo Yii::$app->id #输出basic config: $config = [ 'id' => 'basic', 'basePa ...

  8. 2013 Multi-University Training Contest 9

    HDU-4687 Boke and Tsukkomi 题意:给定一个简单图,询问哪些边如果选择的话会使得最大的连边数减少. 解法:套用一般图的最大匹配算法(带花树)先算出最大匹配数,然后枚举一条边被选 ...

  9. 2016中国APP分类排行榜参选入围产品公示

    2016中国APP分类排行榜参选入围产品公示   由中国科学院<互联网周刊>.中国社会科学院信息化研究中心.eNet硅谷动力共同主办的2016中国APP分类排行榜发布暨颁奖晚宴即将举行.此 ...

  10. 16位的MD5加密和32位MD5加密的区别

    16位的MD5加密和32位MD5加密的区别 MD5加密后所得到的通常是32位的编码,而在不少地方会用到16位的编码它们有什么区别呢?16位加密就是从32位MD5散列中把中间16位提取出来!其实破解16 ...