页面布局和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