单列 两列布局总结

先做个题目:

  

    
    
    


    

        

            1
            2
        
        

            3
            4
        
    

HTML和CSS的学习也算是告了一个段落,后面就是JavaScript的学习了,在学习JS之前,把CSS布局总结一次

什么是布局呢?其实说白了,就是我们写的样式呈现给用户就是我们在文档中的布局,随着用户体验的提升,简单的样式不能满足用户的需求,所以需要我们对页面整体布局来提高用户体验

单列布局

• 一栏布局
  • 实现方式:定宽+水平居中

  


  

    
头部
    

      
aside
      
main
    
    
尾部
  


如果我们觉得多了一个div,嵌套比较麻烦,我们也可以用这个方法:


  


  
头部
  
内容
  
尾部

• 一栏布局(通栏)
  • 实现方式:在头部和尾部元素加一个父元素div,设置div的颜色和尺寸来达到目的

 
  


  

    
头部
  
  
内容
  

    
尾部
  

---

多列布局

等分布局

定宽+自适应

• float+margin
  • 优点:结构简单,容易懂
  • 缺点:有一点兼容性问题

    
    


    

        
left
    
    

        
right
        
right
    

• float + margin + (fix)
  • 优点:兼容性特别好
  • 缺点:样式比较麻烦

    
left
    

        

            
right
            
right
        
    

• float + overflow
  • 优点:样式简单
  • 缺点:IE6不支持

    

        
left
    
    

        
right
        
right
    

• table
  • 缺点:代码较多

    

        
left
    
    

        
right
        
right
    

• flex
  • 缺点:兼容性问题,性能可能有问题,做一些小范围布局

    

        
left
    
    

        
right
        
right
    

---

不定宽加自适应

• float + margin做不到
  • width变化,margin值也需要变化,所以不能跟着内容走
• float + margin +(fix)做不到
  • 同上,width变化,margin也需要重新设置变化
• float + overflow
  • 可以实现跟着内容走

    

        
left
    
    

        
right
        
right
    

• table可以

    

        
left
    
    

        
right
        
right
    

• flex当然可以,就是有点兼容性问题

---

等分布局

我们先看一下原理

c是父容器宽度,w每一列宽度,g是每列中的宽度

)

我们来转化一下公式:
C = W * N + G * N -G 
C = (W + G) * N - G
C + G =  (W + G) * N,如果父元素增加一个G的宽度,等于后边的

• float怎么弄?
  • 缺点:结构和样式有点耦合性, 兼容性有点问题

    
1
    
2
    
3
    
4

• table怎么弄?

    

        
1
        
2
        
3
        
4
    

• flex怎么做?

    
1
    
2
    
3
    
4

---

最后来个DEMO

  
  




  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
  

---

有些内容借鉴,不过每个内容我都在浏览器上跑了一遍,自己亲自用代码实现了一遍,如果有侵权的,请联系删除