前端3+1（Day1）

前端3+1(Day1)

圣杯与双飞翼布局区别

我发现：
两者都是一样的布局，只是，中间部分略有区别

1. 圣杯布局要求：

• header和footer各占一半，高度固定
• 中间的container是一个三栏布局
• 三栏布局两侧的宽度固定不变，中间部分自动填充整个区域
• 中间部分的高度其实是三栏高度最高的

圣杯布局的操作

    
    
    
    
    flex布局
    
    
    
    
    



    

        #header
    
    

        

            #center
        
        

            #left
        
        

            #right
        
    
    

        #footer
    

在flex布局里，flex：1，就是为了实现不同不同内容的平铺
补充1

flex

1. flex:flex-grow,flex-shrink,flex-basis;三个属性的缩写

2. flex-grow:自定义项目的放大比例

• 默认为0即使存在剩余空间，也不会放大
• 所有项目的flex-grow:1,等分剩余空间（自动放大）
• 如果一个项目的flex-grow:2,那么他就是其他的两倍大

3. flex-shrink:定义项目缩小比例

• 默认为1如果空间不足，那么该项目将缩小
• 项目所有的flex-shrink:1,当空间不足时，等比例缩小
• 如果一个项目的flex——shrink：0，其他全为1，那么当空间不足时，前者不变，后面的缩小
• flex-shrink对负值无效

4. flex-basis自定义在分配多余空间之前，项目占据的主轴空间(main size)

补充2

margin-right/margin-left为负

1. 对元素自身的影响：

• 当元素本身没有宽度时，会增加元素的宽度前提是，父元素的margin值要有子元素的margin那么大,否则，就会按照父元素的margin来偏移（如果父元素margin：0，那么就相当于没有）

  
  
  
     
     
     
     
     
  
  
     
  
         宽度800px
         
  
             宽度为800+margin的绝对值
         
     
  
  
  

  • 当元素本身有宽度时，那么就会产生位移前提是，父元素的margin值要有子元素的margin那么大,否则，就会按照父元素的margin来偏移（如果父元素margin：0，那么就相当于没有）

    
    
    
     
     
     
     
     
    
    
     
    
         宽度800px
         
    
             向左/右位移相应大小
         
     
    
    
    

margin-top为负

1. 不管有没有高度，都不会增加高度，只会向上位移前提是，父元素的margin值要有子元素的margin那么大,否则，就会按照父元素的margin来偏移（如果父元素margin：0，那么就相当于没有）

margin-bottom为负

1. 不会发生位移，只会减少自身供css读取的高度

 
 
     
     
     
     
     
 
 
     

         宽度800px
         

             具体没看懂
         
     
 
 

2. 双飞翼布局要求：

• header和footer各占领屏幕所有高度，高度固定

• container是一个三栏布局

• 三栏布局两侧宽度固定不变，中间部分自动填充整个区域

• 中间部分是三栏中高度最高的

  双飞翼布局的操作

    
#center

#left
#right


#footer