目标：实现一个正方形，这个正方形边长等于

方法一：使用单位vw， （ps我觉得这个是最简单的方法）

html结构也很简单，只有一个div即可

<html>

<body>

    <div class="square">

   </div>

</body>

</html>
.square{

  width: 50vw;

  height: 50vw;

  background: blue;

}

方法二： 使用padding-bottom

要点：

  1. height: 0， 内容会溢出到padding里，不用担心~~
  2. padding-bottom 值设置为百分比时候，相对于包含块的宽度。
  3. 需要设置包含块

html结构：

<html>

<body>

    <div class="container">

       <div class="square">

       </div>

   </div>

</body>

</html>

css:

    *{

        margin:;

    }

    /* 设置撑满页面可见区域 */

    .container{

        height: 100vh;

        width: 100vw;

        background: palegoldenrod;

    }

    .square{

        width: 50%; /* 相对与container的width */

        padding-bottom: 50%;  /* 相对与container的width */

        background: palegreen;

    }

行了吧，两种就可以了，你也可以使用margin，不过会有塌陷的危险，所以，就这两个够用啦~~

用css实现正方形div的更多相关文章

  1. css实现正方形div的3种方式

    网上百度了几种可以按照百分比画方框的方法 1.CSS3 vw 单位 1vw = 1% viewport width <div class="vw">hello,view ...

  2. 用css控制一个DIV画图标。

    在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样 ...

  3. 纯CSS写正方形自适应宽高，且左侧高与正方形高保持一致

    先上图 虽然写法有点暴力,但是效果还是可以的,哈哈哈哈哈html:<div class="box">            <div class="le ...

  4. CSS 奇思妙想 | Single Div 绘图技巧

    经常能看到有关 CSS 绘图的文章,譬如使用纯 HTML + CSS 绘制一幅哆啦 A 梦图画.实现的方式就是通过堆叠 div,一步一步实现图画中的一块一块.这种技巧本身没有什么问题,但是就是少了一些 ...

  5. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  6. DIV+CSS常见问题：DIV如何设置一个像素高度？

    CSS如何控制DIV实现1像素高度呢?问题看起来很简单,但万恶的IE6会让你很麻烦,不过解决办法很多,本文将介绍最简单的一种:DIV{height:1px;line-height:1px;font-s ...

  7. CSS布局：div高度随窗口变化而变化(BUG会有滚动条)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 使用纯css代码实现div的“回”字型“叠放”效果

    正如大家所知道的那样,div是一个块级元素,也是网页编写过程中使用频率最高的一个元素,通过不同的样式控制可以实现一些最常见的页面效果,当然也可以实现一些比较复杂的页面效果,这里就展示一个本人面试过程中 ...

  9. CSS如何让DIV的宽度随内容的变化

    [css]CSS如何让DIV的宽度随内容的变化 让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inlin ...

随机推荐

  1. token 防止csrf

    转自:ttps://www.ibm.com/developerworks/cn/web/1102_niugang_csrf/#icomments 当前防御 CSRF 的几种策略 验证 HTTP Ref ...

  2. 解决window.showModalDialog在Firefox无法支持

    在网页程序中,有时我们会希望使用者按下按钮后开启一个保持在原窗口前方的子窗口,而在IE中,我们可以使用showModalDialog来达成,语法如下 : vReturnValue = window.s ...

  3. 初识Java NIO

    原文链接:http://tutorials.jenkov.com/java-nio/index.html Java NIO是java 1.4之后新出的一套IO接口,这里的新是相对于原有标准的Java ...

  4. Tiny4412之蜂鸣器驱动与led灯驱动

    一:LED驱动编写 要编写LED驱动,首先的知道开发板的构造:开发板分为核心板与底板:编写驱动的第一步就是要看开发板,找到LED灯在开发板上的位置及所对应的名字:第一步就要查看核心板电路图,以及底板电 ...

  5. 优雅地实现CSS Animation delay心得

    话不多说直接开讲: 1.需求: 等待元素A的动画加载完,再加载B元素的动画(下图中A为大熊猫,B为下方卡片) 先来看下最后的效果啦: 2.初始思路: 在B元素的动画属性上加上delay(延迟,使得这个 ...

  6. Android监测手指上下左右滑动屏幕

    在开发android程序时,有时会需要监测手指滑动屏幕,当手指朝上下左右不同方向滑动时做出不同的响应,那怎么去实现呢? 利用Android提供的手势监测器就可以很方便的实现,直接上代码(已测试通过) ...

  7. [SCOI2005]栅栏 二分+dfs

    这个题真的是太nb了,各种骚 二分答案,肯定要减最小的mid个,从大往小搜每一个木板,从大往小枚举所用的木材 当当前木材比最短的木板还短,就扔到垃圾堆里,并记录waste,当 waste+sum> ...

  8. BZOJ_3993_[SDOI2015]星际战争_二分+网络流

    BZOJ_3993_[SDOI2015]星际战争_二分+网络流 Description 3333年,在银河系的某星球上,X军团和Y军团正在激烈地作战.在战斗的某一阶段,Y军团一共派遣了N个巨型机器人进 ...

  9. BZOJ_3343_教主的魔法_分块+二分查找

    BZOJ_3343_教主的魔法_分块+二分查找 题意:教主最近学会了一种神奇的魔法,能够使人长高.于是他准备演示给XMYZ信息组每个英雄看.于是N个英雄们又一次聚集在了一起,这次他们排成了一列被编号为 ...

  10. 使用limit查询的同时取得总的记录数：SQL_CALC_FOUND_ROWS和FOUND_ROWS()

    通常我们都用如下的sql来进行列表 SELECT COUNT(*) FROM users WHERE name LIKE 'a%';SELECT name, email FROM users WHER ...