css布局

一、display属性

1、block块元素与inline行内元素

2、none

3、inline-block

二、margin：auto

1、

div{    width:500px    margin:0 auto;}

设定宽度，并将块元素水平居中

2、

div{    max-width:500px    margin:0 auto;}

1中的width是固定的宽度，改为max-width，自适应哦；

三、盒模型：box-sizing

1、设置box-sizing：border-box后，容器的高宽就是实际容器的高宽，而不是单纯指的是内容区的大小

2、因为还是新属性，应该根据不同的浏览器来不同的设置，这货支持IE8

* {  -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;          box-sizing: border-box;}

四、position 位置、方位、把...安放在..、定位

1、static；默认值，表示不会被特殊的定位；

2、relative：相对的定位；

.relative1 {  position: relative;}.relative2 {  position: relative;  top: -20px;  left: 20px;  background-color: white;  width: 500px;}

relative1 和static一样，但relative2加了额外的属性，表示偏离了其正常位置；

3、fixed：固定定位

.fixed {  position: fixed;  bottom: 0;  right: 0;  width: 200px;  background-color: white;}

固定定位元素相对于视窗来定位，移动浏览器支持很差；

4、absolute：和fixed类似，但是它不是相对于视窗，而是相对于最近的‘positioned祖先元素的，没有祖先的话就是文档的body元素，它会随着页面滚动而移动；’

positioned元素是指position值不是static的元素；

.relative {  position: relative;  width: 600px;  height: 400px;}.absolute {  position: absolute;  top: 120px;  right: 0;  width: 300px;  height: 200px;}

五、clear属性：控制浮动

1、clear：left

.box {  float: left;  width: 200px;  height: 100px;  margin: 1em;}.after-box {  clear: left;}

如上，clear了left，清除了元素的向左浮动；
2、clearfix hack清除浮动

如果浮动的图片比元素还高，会溢出，用清除浮动解决；

.clearfix {  overflow: auto;}

这样，图片就回到元素里了。

六、百分比宽度

1、使图片始终是容器的一半宽；

article img {  float: right;  width: 50%;}

七、媒体查询

1、响应式设计就是通过媒体查询这个工具弄出来的；

下面这个在宽度到最窄时，自动排成一排：

@media screen and (min-width:600px) {  nav {    float: left;    width: 25%;  }  section {    margin-left: 25%;  }}@media screen and (max-width:599px) {  nav li {    display: inline;  }}

八、column

1、实现文字多级多列布局

.three-column {  padding: 1em;  -moz-column-count: 3;  -moz-column-gap: 1em;  -webkit-column-count: 3;  -webkit-column-gap: 1em;  column-count: 3;  column-gap: 1em;}

九、flexbox（目前只有chrome支持）

新标准，期待吧；

.container {  display: -webkit-flex;  display: flex;}nav {  width: 200px;}.flex-column {  -webkit-flex: 1;          flex: 1;}

.container {  display: -webkit-flex;  display: flex;}.initial {  -webkit-flex: initial;          flex: initial;  width: 200px;  min-width: 100px;}.none {  -webkit-flex: none;          flex: none;  width: 200px;}.flex1 {  -webkit-flex: 1;          flex: 1;}.flex2 {  -webkit-flex: 2;          flex: 2;}

Flexbox的居中布局：

.vertical-container {  height: 300px;  display: -webkit-flex;  display:         flex;  -webkit-align-items: center;          align-items: center;  -webkit-justify-content: center;          justify-content: center;}