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

方法一：使用单位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. Hbuilder之开发Python

    .开发之前,安装Python 3.6 在Mac上安装Python 如果你正在使用Mac,系统是OS X 10.8~10.10,那么系统自带的Python版本是2.7.要安装最新的Python 3.6, ...

  2. Android 样式的开发（转）

    Android(2)    目录(?)[-] rectangle oval line ring layer-list篇 普通图片 bitmap标签 点九图片 nine-patch标签 color标签 ...

  3. linux线程及互斥锁

    进程是资源管理的最小单元,线程是程序执行的最小单元.在操作系统的设计上,从进程演化出线程,最主要的目的就是更好的支持SMP以及减小(进程/线程)上下文切换开销. 就像进程有一个PID一样,每个线程也有 ...

  4. SSM-SpringMVC-28：SpringMVC类型转换之自定义日期类型转换器

     ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 例子很简易,要明白的是思路,话不多说,开讲 上篇博客不是说springmvc默认的日期转换格式是yyyy/M ...

  5. SSM-MyBatis-08：Mybatis中SqlSession的commit方法为什么会造成事物的提交

      ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 如题目所示,本小章节讨论为什么SqlSession的commit会造成事物的提交 首先先看SqlSessi ...

  6. sql server 高可用日志传送

    一. 日志传送概述 SQL Server使用日志传送,可以自动将主服务器的事务日志备份发送到一个或多个辅助数据库上.可选的监视服务器,记录备份和还原操作的历史记录及状态. 优点 提供灾难恢复解决方案 ...

  7. Kali Linux图形界面与命令行界面的切换

    前言: 有时候为了节约系统资源,使用命令行界面能够让Linux系统的运行更加流畅,处理任务的速度也更加快.现在的Kali安装完成后默认是开机就启动图形化界面.本文将介绍通过编辑Kali启动引导文件的方 ...

  8. Android 不规则图像填充 小玩着色游戏

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45788433: 本文出自:[张鸿洋的博客] 一.概述 近期群里偶然看到一哥们在 ...

  9. python使用itchat库实现微信机器人

    itchat是一个开源的微信个人号接口,可以使用该库进行微信网页版中的所有操作,比如:所有好友.添加好友.拉好友群聊.微信机器人等等.详细用户请看文档介绍,在这里. 本文主要使用该库完成一个能够处理微 ...

  10. Win7 系统记事本乱码及cmd闪退解决办法

    打开控制面板,点击时钟.语言和区域               中文(简体)改为英语(英国),然后重启电脑,重启电脑之后,继续此操作,在把英语(英国)改为中文(简体),再次重启电脑,就OK了.