2016_3_19_查露补缺.md

CSS Base Knowledge

CSS3分栏布局

column-width 栏目宽度

定义了宽度，元素会随着页面宽度，增加列数

column-count 栏目列数

如果定义列数,元素会随着页面宽度，增加列宽度

column-gap 栏目距离

column-rule 栏目间隔线 和定义border一样

Example: 请在chrome下运行 http://jsfiddle.net/hjzheng/mgqt2/1

CSS3盒模型解析模式

box-sizing 盒模型解析模式

content-box 标准盒模型 width/height=content

border-box 怪异盒模型 width/height=border+padding+content

应用，可以通过修改box-sizing，而不改变盒子大小。

例如 在border-box下增加padding，不会改变盒子宽高

Example: http://jsfiddle.net/hjzheng/kYgb8/1/