画一个宽度高度等于屏幕宽1/4的正方形
关键点：内边距(padding)的%值为是相对于其父元素的宽度来计算的。
正方形的照片墙
往正方形里添加图片
由于通过上面方法形成的正方形高度(height)是为0的，往里面添加任何子元素都会将其撑开，正方形会遭到破坏，除非添加的子元素不在普通文档流中。这里我们采用绝对定位的方法来定位子元素，使其脱离文档流。
正方形的照片墙 
通过伪元素::before, ::after,为图片添加hover提示
关键点：伪元素::before, ::after的content属性可以通过attr()方法取得标签上自定义的值。
正方形的照片墙