CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

圣杯布局双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局
虽然两者的实现方法略有差异,不过都遵循了以下要点:

1.两侧宽度固定,中间宽度自适应
2.中间部分在DOM结构上优先,以便先行渲染
3.允许三列中的任意一列成为最高列
4.只需要使用一个额外的
标签

圣杯布局



    
        
        圣杯布局
        
    
    
    
header
middle
left
right

双飞翼布局



    
        
        双飞翼布局
        
    
    
        
header
中间自适应区域
左边固定区域
右边固定区域

你可能感兴趣的:(CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局)