CSS是一门需要单独学习的技术吗？

　　CSS (Cascading Style Sheets) ，做前端开发的人都很清楚，因为这是他们的一项必不可少的技能。我以前也是知道CSS，但从来没有单独学习过，认为就它只是用来渲染网页的表现层效果，定制页面和内元素的布局、颜色和字体等，需要的时候看一下相关知识就可以使用，并且我们大部分的应用都有很好的借助，比如以前的Ease UI、LayUI、Bootstrap，现在的ElementUI、Tailwind CSS等，这些CSS框架已经封装好了样式，还可以跨端，使我们能快速、简单地定制响应式的网页，所以根本不需要花单独的时间去学习。

　　其实，这样的认识是有问题的，CSS也需要单独学习、深入领会和掌握。

　　昨天同事让我做一个页面，类似B站首页的样式，最重要的是图片（DIV）的排列。我觉得通过DIV的浮动来解决应该挺快就解决，DIV解决了，剩下的DIV内部内容显示就简单了。

　　一、使用DIV的浮动
　　网页代码：

  
    
    
    
    
  
  
    

            

                    
主画面
        
                    

                            
div--A1
                            
div--A2
                            
div--A3
                            
div--B1
                            
div--B2
                            
div--B3
                    
            
            

                    
div--C1
                    
div--C2
                    
div--C3
                    
div--C4
                    
div--C5
                    
div--D1
                    
div--D2
                    
div--D3
                    
div--D4
                    
div--D5
            
            
    
  

　　效果如下：

　　上面就是将内容分两行显示，第二行设置为块的浮动就可以，主要是第一行，分左右两块来显示，右边的也是按块浮动。

　　使用浮动可能是以前的做法，现在流行flex，弹性布局。
　　二、使用flex
　　网页内容：

  
    
    
    
    
  
  
    

            

                    
主画面
        
                    

                            
div--A1
                            
div--A2
                            
div--A3
                            
div--B1
                            
div--B2
                            
div--B3
                    
            
            

                    
div--C1
                    
div--C2
                    
div--C3
                    
div--C4
                    
div--C5
                    
div--D1
                    
div--D2
                    
div--D3
                    
div--D4
                    
div--D5
            
            
    
  

　　效果如下：

　　但是感觉没有体现flex的优势，去掉外面的DIV包裹。

　　改动网页：

  
    
    
    
    
  
  
    

            
主画面
            

                
div--A1
                
div--A2
                
div--A3
                
div--B1
                
div--B2
                
div--B3
    
            
        
            
div--C1
            
div--C2
            
div--C3
            
div--C4
            
div--C5
            
div--D1
            
div--D2
            
div--D3
            
div--D4
            
div--D5
    
  

　　效果显示：

　　感觉还不利索，使用grid来实现就很简单明了。
　　三、使用grid

　　网页代码：
 

  
    
    
    
    
  
  
    

                    
主画面
        
                    
div--A1
                    
div--A2
                    
div--A3
                    
div--B1
                    
div--B2
                    
div--B3
                    
div--C1
                    
div--C2
                    
div--C3
                    
div--C4
                    
div--C5
                    
div--D1
                    
div--D2
                    
div--D3
                    
div--D4
                    
div--D5
    
  

　　显示效果：

　　这样的效果使用以前的表格布局很简单，网页的内容如下：
　　四、使用表格

  
    
    
    
    
  
  
        

            

                
主画面
                
div--A1
                
div--A2
                
div--A3
            
            

                
div--B1
                
div--B2
                
div--B3
            
            

                
div--C1
                
div--C2
                
div--C3
                
div--C4
                
div--C5
            
            

                
div--D1
                
div--D2
                
div--D3
                
div--D4
                
div--D5
            
        
  

　　效果如下：

　　因为CSS的不熟，上面的4个简单的页面也折腾了一下午，还有其他的方法没有试，并且还可以直接使用框架来做。
　　CSS技术是一门技术吗？
　　说它是，可以很少看到有人专门去学习，大多是针对项目去临时学习；说它不是，看看前端的一些CSS的封装包，做得那么好，肯定有相当得技术含量。
　　CSS技术是一门技术，这个可能做前端开发时受虐了才有深刻体会。
　　掌握了CSS，不但可以读懂一些前端框架包的CSS设定，还可以有目的修改，就像掌握了Javascript就可以更好地使用react、vue等开发框架一样。