1.页面布局

• 题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px,中间自适应

答案：

• 浮动布局

    
    
     
        
      
        
      
        
      
    
     
    
复制代码

• 绝对定位

• flexbox

    
    
     
        
      
        
      
        
      
    
     
    
复制代码

• table布局

    
    
     
        
      
        
      
        
      
    
     
    
复制代码

• 网格布局(grid)

    
    
     
        
      
        
      
        
      
    
     
    
复制代码

优缺点

1.flaot：缺点：脱离文档流处理起浮动周边的DOM元素比较复杂；优点：兼容性比较好；

2.绝对定位：缺点：布局脱离文档流导致其子元素也要脱离文档流，可使用性比较差优点：快捷；

3.flex:优点：解决float和绝对定位的问题，比较流行

4.table布局：缺点：高度宽度问题；优点：兼容性好（flex不兼容IE8）

5.grid布局：缺点：；优点：代码量少

扩展：

去掉高度已知：flex、table不受影响；

页面布局的变通：

三栏布局

• 左右宽度固定，中间自适应
• 上下高度固定中间自适应

两栏布局

• 左宽度固定，右自适应
• 右宽度固定，左自适应
• 上高度固定，下自适应
• 下高度固定，上自适应

2.css盒模型

• 基本概念：标准模型 + IE模型
• 标准模型和IE模型和区别(计算宽度和高度)IE模型计算

1. content+padding和border

• css如何设置这两种模型：

1. box-sizing:content-box;box-sizing:border-box;

• js如何获取盒模型的宽和高：

1. dom.style.width/height(内连样式宽和高)；
2. dom.currentStyle.width/height(只有IE支持)；
3. window.getComputedStyle(dom).width/height(最常用)；
4. dom.getBoundindClieentRect().width/height;(top,left,width,height)

• 实例题（根据盒模型解释边距重叠）

1. 父子边距重叠 (父元素不设置高度，子元素设置高度和外边距，父元素高度等于子元素高度)
2. 兄弟元素边距重叠（下外边距和上边距重叠取最大值）
3. 边距重叠解决方案：创建BFC

• BFC（边距重叠解决方案）

1. 概念：块级格式化上下文
2. 原理：元素垂直方向的边距重叠；BFC的区域不会与浮动元素的box重叠；BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，反过来，里面的元素也不会影响外面的元素；计算BFC高度的时候浮动元素也会参与计算；
3. 创建BFC方式：overfloat不为visible;float值不为none；position值不为static和relative；display：table,table-cell,table-caption