首先，把宽和高设为同样的固定值，则肯定是正方形，这个不用多说；
其次，如果是自适应的界面，需要用百分比来设置正方形的边长，则可以用css3的新增长度单位vw、vh来设置，1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视口高度（viewport height）的百分之一。比如下面这个正方形的边长是屏幕宽度的50%：
<div style="width:50vw height:50vw background-color:#888"></div>
但是，这个方法要求浏览器支持css3，一些老的浏览器可能就不支持了。
如图所示。每一个矩形框就是一个盒子，即div包裹的元素。
布局的一般写法，从上到下，从左到右进行排版布局。
所以，先写最上面的长盒子，再写第二行最左边的，
中间的大盒子你不知道怎么弄，可以把 二、三行看成一行，一最大的最准，纵向分成三列，即
红色来进行布局，两边红色的盒子再固定宽度后，写两个盒子规定高度分成两行就行。
最下的盒子和第一行一样，写最长即可。
