css的重点总结

//参考：http://zh.learnlayout.com/
概念：CSS 用于控制网页的样式和布局。

1、盒模型
概念：就是所有的html元素都是一个个的盒子，每个盒子都有margin，padding，border，content
盒模型分IE和标准，区别：IE的width/height=border+content，标准的width/height=content
所以开发经常需要：
/* 标准盒模型，content=盒子width，height，支持IE8+, */
*{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
用统一的模型，来解决不同浏览器的兼容问题

2、css的几种布局方式
1）position：
static：默认值，不会被特殊的定位
relative：元素相对于自己本身的定位,设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
fixed:固定定位,元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置（脱离文档流,移动浏览器对 fixed 的支持很差）
absolute:相对于最近的“positioned”祖先元素,如没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。

2）float
（可用于实现文字环绕图片）：
属性有left,right,

3)clear:
控制浮动,值：left，right，both
清楚浮动：
.clearfix {
  overflow: auto;
  zoom: 1;
}
这个可以在现代浏览器上工作。如果你想要支持IE6，你就需要再加入如下样式：
.clearfix {
  overflow: auto;
  zoom: 1;
}

4）百分比的宽度：
5）媒体查询
响应式设计是一种让网站针对不同的浏览器和设备
@media screen and (min-width:600px) {
  div {
  }
}

6)display:inline-block
与float结合，每个盒子给个margin，就可实现从左到右排列
vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。

7）column
并且它不被IE9及以下和Opera Mini支持
新的CSS属性，可以实现文字的多列布局
div {
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

8）flexbox
支持 flexbox 的 Chrome 浏览器,其他的不太友好
div {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
//我会占满剩余宽度的1/3。
.flex1 {
  -webkit-flex: 1;
          flex: 1;

}
//我会占满剩余宽度的2/3。
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

//使用 Flexbox 的居中布局
.div {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}