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

方法一：使用单位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. arcEngine开发之根据点坐标创建Shp图层

    思路 根据点坐标创建Shapefile文件大致思路是这样的: (1)创建表的工作空间,通过 IField.IFieldsEdit.IField 等接口创建属性字段,添加到要素集中. (2)根据获取点的 ...

  2. jmeter接口测试报java.net.SocketException: Socket closed错误。

    如题,jmeter报出java.net.SocketException: Socket closed,我查询了下,服务器是正常的,可以返回数据,基本确定问题出在我这边jmeter.查询原因,看到有人说 ...

  3. 【网络】TCP/IP连接三次握手

    TCP握手协议 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接.第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确 ...

  4. 并行(Parallelism)与并发(Concurrency)

    并行(Parallelism):多任务在同一时刻运行.例如,多个任务在多核处理器上运行. 并发(Concurrency):两个或者两个以上的任务在一段时间内开始.运行.完成,这意味着它们不是在同一时刻 ...

  5. jQuery 素材 缩略图轮播集合

    http://www.17sucai.com/pins/demo-show?id=27124 http://www.17sucai.com/pins/demo-show?id=4712  楼盘详情缩略 ...

  6. ajax跨域问题(php)

    ajax出现请求跨域错误问题,主要原因就是因为浏览器的"同源策略". 解决方法(我只用过下面这3种): 1. 架设服务器代理:即浏览器请求同源服务器,再由后者请求外部服务(之前博主 ...

  7. 你不知道的JavaScript--Item7 函数和（命名）函数表达式

    1.函数声明与函数表达式 在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,两者期间的区别是有点晕,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier ...

  8. APNS导致消息丢失和发送效率原因

    http://blog.csdn.net/tlq1988/article/details/9612237 首先说明一下,本文只是介绍一些容易被开发者忽视,而导致性能低下问题.并不是介绍如何向苹果设备成 ...

  9. anguments

    anguments是一个对象,长得很像数组的对象,但不是数组,而是伪数组. arguments的内容是函数运行时的实参列表 (function(d, e, f) { console.log(argum ...

  10. token.go

    package sego // 字串类型,可以用来表达 //    1. 一个字元,比如"中"又如"国", 英文的一个字元是一个词 //    2. 一个分词, ...