css正方形照片墙_html/css_WEB-ITnose

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