JS丨基础考察01丨页面布局

三栏布局的解决方案

01. 三栏布局:
    01. 各个方案的优缺点
        01. float:
            优点:兼容性好
            缺点:脱离文档流:需要处理浮动问题
        
        02. 绝对定位:
            优点:快速
            缺点:可使用性差,自身及子元素都脱离了文档流
        
        03. flexbox:
            优点:CSS3种为解决float与absolute布局的不足而创建的布局方式;
            缺点:兼容性,不兼容IE8以下
        
        04. table
            优点:兼容性好,
            缺点:三栏的高度会保持一致;
        
        05. grid
            优点:代码简化很多,新技术
            缺点:
        
    02. 高度不设限
        01. flexbox || table可以使用
        
    03.    兼容性问题
    
    
02. 页面布局的变通:
    01. 三栏布局
        01. 左右宽度固定, 中间自适应
        02. 上下高度固定, 中间自适应
    02. 两栏布局
        01. 左宽度固定, 右自适应
        01. 右宽度固定, 左自适应
        02. 上高度固定, 下自适应
        02. 下高度固定, 上自适应

01. 绝对定位


02丨绝对定位解决方案

1. 这是三栏布局的内容 2. 这是三栏布局的内容 3. 这是三栏布局的内容 4. 这是三栏布局的内容 5. 这是三栏布局的内容 6. 这是三栏布局的内容

02. 浮动布局 


01丨浮动解决方案

1. 这是三栏布局的内容 2. 这是三栏布局的内容 3. 这是三栏布局的内容 4. 这是三栏布局的内容 5. 这是三栏布局的内容 6. 这是三栏布局的内容

03. flex布局


03丨flexbox解决方案

1. 这是三栏布局的内容 2. 这是三栏布局的内容 3. 这是三栏布局的内容 4. 这是三栏布局的内容 5. 这是三栏布局的内容 6. 这是三栏布局的内容

04. table布局


04丨table解决方案

1. 这是三栏布局的内容 2. 这是三栏布局的内容 3. 这是三栏布局的内容 4. 这是三栏布局的内容 5. 这是三栏布局的内容 6. 这是三栏布局的内容

05. grid布局 


05丨grid解决方案

1. 这是三栏布局的内容 2. 这是三栏布局的内容 3. 这是三栏布局的内容 4. 这是三栏布局的内容 5. 这是三栏布局的内容 6. 这是三栏布局的内容

布局视图

JS丨基础考察01丨页面布局_第1张图片

 

你可能感兴趣的:(css基础,JS基础)