IFE2018-DAY05

1.盒模型的概念

标准盒模型：宽度 = 内容的宽度（content） + border + padding + margin
低版本IE盒子模型： 宽度 = 肉容宽度(content + border + padding) + margin【等同于设置box-sizing: border-box;】

2.inline、block和inline-block的概念

inline:内联元素，跟随文档的文本流堆放（从左至右，从上至下），元素的宽度，高度，顶部及底部边距不可设置。常见的内联元素有：<a><span>
block:块元素，每个元素独占一行，元素的高度、宽度、行高以及边距都可设置。常见的块元素有：<div><p><hn>
inline-block:行内块元素，介于inline与block之间，跟随文档的文本流堆放，可设置元素的宽度和高度。常见的行内块元素有：<img><input>

3.内外边距，宽度，高度，box-sizing等属性

内边距 (padding)： 指定一个元素的内容与其边界之间的空间，不能为负值。
设置方式为：padding:上 右 下 左；简写形式： padding : 上 左右 下【padding:10px 20px 10px】；或 padding: 上下 左右;【padding: 10px 20px】 或 padding:上下左右【padding:10px】;
外边距(margin)： 给元素设置外边距属性（元素与元素的边界的距离）， 有负外边距，有外边距塌陷的情况。
设置方式同padding
width： 当box-sizing为默认值时，设置内容框的宽度
height： 当box-sizing为默认值时，设置内容框的高度
box-sizing： 设置元素的盒模型的方式，默认为标准盒模型，设置box-sizing:border-box时，为IE盒模型。

4.关于BFC

BFC（Block Formatting Context）块级格式化上下文。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
* 内部的Box会在垂直方向，一个接一个地放置。
* Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
* 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
* BFC的区域不会与float box重叠。
* BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
* 计算BFC的高度时，浮动元素也参与计算
触发 BFC
* body 根元素
* 浮动元素：float 除 none 以外的值
* 绝对定位元素：position (absolute、fixed)
* display 为 inline-block、table-cells、flex
* overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC在布局中的应用
* 防止margin重叠
* 父元素包含浮动元素（清除浮动）
* 阻止被浮动元素覆盖（多栏布局）