如何仅靠CSS画个正方形

众所周知的，css好像没有啥方法能帮助我们限制一个元素的宽高比，前一阵子却有这么个需求，要求我画个正方形。

于是怎么做呢，简答阐述下思路：

第一步，做一个尺寸适当的空白png，要正方的。

塞进div里，对img使用下面的属性：

img{
    width:100%;
    pointer-events:none;
}

这样它就是一个正方形啦 d(`･∀･)b ，为啥呢？因为在页面中如果你只给img施加一个宽度属性高度是会自动按比例调节的，我们在这里就这样利用了下这个特性。（特性：你利用我இдஇ）

之后说下pointer-events，pointer-events是拿来取消所有鼠标响应的，用过这个属性之后，图片的一切鼠标事件都会被取消，比如你要右键存图之类的、拖动这张透明图之类的都不行了。本来我们就不想让用户察觉到这张图的存在，所以才加了这么个属性 d(`･∀･)b 。

第二步，把这个div当作warp，把它的position设置成relative，在这个div里面嵌套一个div，用来放真正的内容，把里面嵌套的这个div的position设置成absolute。

之后用absolute固定他。

具体代码差不多是这个意思：

HTML:

<div class='square_warp'>
    <img src="balabalabala" />
    <div class='content'>
        BALABALABALA
    </div>
</div>

CSS:

.square_warp{
    position:relative;
}

.square>.content{
    left:0;
    top:0;
    position:absolute;
}

完了。

这个方法有个缺点，就是画出来的正方形只是感官上长宽比是1:1，但是实际上还是有点偏差的，你要是非要用纯html/css去实现的话也会让你的html逻辑结构混乱无比。

所以虽然说标题是仅靠CSS去实现这个方法，但是我还是推荐你加点JS进去的（(;´༎ຶД༎ຶ`)没错我骗了你）。还是只说思路：

首先：给所有的正方形定义一个class，比如square。

接下来：JS定义一个透明1：1图片：

https://github.com/Losses/Google-Design-Simple/blob/master/js/index.js#L35

代码太长，乱排版，不粘了

说下我为啥要在js里定义空白图片而不是直接插图进去：我洁癖，在文件夹里扔个莫名其妙的文件不开心( ˘･з･)。

第三步，上JQ

$(".square").append('<img src="' + ImgRes + '" />');

之后想怎么办都随你了~