CSS布局
一. display
1. block 块元素
block元素可以设置宽高特性
div,header,footer,section,from
2. inline 行内元素
inline元素默认不换行的特性
a元素,span,行内元素不会改变段落的布局,可以将ul li改成inline做成水平菜单
3. none
通常用来不删除元素的情况下隐藏元素
4. inline-block
http://zh.learnlayout.com/inline-block.html
二.margin:0 auto
margin: 20px;（上、下、左、右各20px。）
margin: 20px 40px;（上、下20px；左、右40px。）
margin: 20px 40px 60px;（上20px；左、右40px；下60px。）
margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）
在css中使用margin可以将margin-top，margin-right，margin-bottom，margin-left，缩写为一个标记，顺序为上右下左（顺时针）。
margin标记可以带一个、二个、三个、四个参数，各有不同的含义。
设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案...
在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！
三. box-size
width会被内边距撑开，如果要固定大小，可以再加box-sizing属性
既然没有比这更好的方法，一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上：
- {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
四.position
1. static
默认值
2. relative
相对于同级元素定位
3. fixed
相对于视窗固定
4. absolute
相对于父级元素固定
五. float
1. left
水平排列
2. right
实现文字环绕
六. clear
clear用于控制浮动
1. clear:left
2. clear:right
七.overflow
规定当内容溢出边框时的发生的事情
八.浮动布局
九. media媒体查询
媒体查询
“响应式设计（Responsive Design）”是一种让网站针对不同的浏览器和设备“响应”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！
媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：
@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;
}
}
十. flex布局
十一. 框架
因为CSS 布局很难使用，产生了一些框架。只有在框架的功能契合你的需求时，使用框架才是个好主意。掌握CSS的工作方式是无可替代的。
