页面布局和css盒模型

1.页面布局练习

高度已知，写出三栏布局，其中左栏、右栏宽度各为300px 中间自适应

• 浮动 缺点：需要处理清除浮动
• 绝对定位 缺点：布局脱离文档流
• flex 缺点：兼容性
• 表格布局 缺点：一栏超出高度，其他跟着超出

• 网格布局：兼容性

  高度未知的情况下，只有flex和表格布局试用

2.css盒模型

• 基本概念
  
  • 标准模型+IE模型
• 区别： 宽高计算不同， padding border是否计算
• css如何设置这两种模型 （box-sizing)
• js 如何获取盒模型的宽高
  
  • dom.style.width/height(内联节点)
  • dom.currentStyle.width/height(IE支持)
  • window.getComputedStyle(dom).height/width
  • dom.getBoundingClientRect().width/height 计算绝对位置，相对视窗

• 根据盒模型解释边距重叠

  • 父子重合：根据父级盒模型确定（overflow:hidden 创建BFC)
  • 兄弟重合： 取最大值
  • 空元素：margin-top margin-bottom 取一个最大值

• BFC

  • 块级格式化上下文

  • 原理：

    1. 元素垂直方向上边距会发生重叠
    2. Bfc 元素区域不会与浮动元素区域发生重合
    3. BFC 元素在页面上是独立的容器，里外不会互相影响
    4. 计算BFC高度，浮动元素也会参与计算

  • 如何创建BFC:

    1. 浮动
    2. overflow:hidden auto
    3. position不为static relative
    4. display: inline-block, table-cell table