无聊，从新复习了一遍，基础布局，记录一下，避免忘了。
首先说一下
Css文件前缀
- Firefox:-moz-box-shadow
- Safari:-webkit-box-shadow
- Opera:-o-box-shadow
- IE:-ms-box-shadow
就这个前缀记得特别不牢固，唉唉唉
盒型布局
现在最常用的就是这种盒型布局了，他由：margin（边距），border（边框），padding（填充），content（内容）组成。
盗用一个图
这篇文章，主要是按照上图为标准的布局结构。
display元素生成类型
作为布局中，最重要的属性。首先写这个。详细的文档参看：点我
每一个元素都有默认的display，大多数默认为两种：block和inline。
block
块级元素：会新开始一行并且尽可能撑满容器。比如说：div，p，header，footer，section
inline
行内元素：可以在段落中使用。不会打乱段落布局。比如说：a，span，font
none
隐藏元素：会隐藏元素，与visibility不同的是，不会保留位置。
举个栗子：
水平菜单的效果，可以把ul>li 元素修改成行内元素，那么他就水平了
水平居中
只有块级元素，需要水平居中。因为他们是新的一行。设置宽度，可以防止他们撑满容器。然后设置左右边距，就可以水平居中。
#main {
width: 600px;
margin: 0 auto;
}
这样，就成为了一个水平居中并且有宽度的样子。但是当浏览器小于指定宽度的时候，就会出现滚动条。
如果我们想让他，根据宽度缩小。那么
#main {
max-width: 600px;
margin: 0 auto;
}
给他设置最大宽度，那么他就可以根据浏览器缩小了。
box-sizing
上面说了盒型结构图，有margin，padding，border。
但是当你设置了总的width以后，在使用这些元素，往往会超出指定的宽度。如果你跟我一样，不想仔细的计算。就使用box-sizing吧。
当你给box-sizing:border-box的时候。内边距和边框，就不会增加它的宽度。
#main {
width: 600px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
有了这个，就可以任性的给边框，边距了。
position元素定位类型
为了制作更复杂的页面，我们需要用到这货。详细参看：点我
他一共四个属性，现在挨个过一遍
position:static
默认值，任意的元素都不会被特殊定位。
position:relative
相对定位，加上此属性后，可以设置top、right、bottom、left。让他偏离正常位置。其他元素不会弥补剩下的空隙。
position:fixed
固定定位，相对于浏览器视图来进行定位，也就是说浏览器怎么拉伸，缩小。他都不会变。可以设置top、right、bottom、left。让他偏离正常定位。
举个栗子：在页面中间，做一个返回顶部的菜单。
#main{
position:fixed;
right:;
top: 50%
}
position:absolute
相对定位，相对于最近的设置定位的祖先元素。static不算。如果没有最先元素，那么它是相对于body元素，并且会随着页面滚动而移动。可以设置top、right、bottom、left。让他偏离正常定位。
举个栗子：比如说div1套用div2，div1相对定位，div2绝对定位。那么div2只是针对div1，进行偏移。
float浮动
浮动，定于元素在哪个方向浮动。不管元素本身是什么，浮动都会将它生成一个块级框。
浮动一个分为四种：
left：元素向左浮动
right：元素向右浮动
none：默认值，元素不进行浮动
inherit：继承父级元素的float值
举个栗子：实现文字环绕图片代码
img {
float: right;
margin: 0 0 1em 1em;
}
clear取消浮动
取消浮动，如果元素设置浮动，则下面挨着的元素，会受影响。所以需要让下面的元素，取消浮动
overflow元素溢出
控制元素溢出的操作，如果浮动元素大于所属的框，那么需要对溢出元素进行操作。
溢出操作一共分为五种：
visible：默认值。内容不会被修剪。会呈现在元素框之外
hidden：内容会被修剪，并且其余内容是不可见的
scroll：内容会被修剪，但是会显示滚动条
auto：如果内容修剪，则浏览器会显示滚动条。可以撑开元素
inherit：继承父元素属性
媒体查询
响应式设计必要属性。当我们使用百分比做自适应布局的时候，当浏览器变窄到无法容纳侧边栏中的菜单时。可以把布局显示成一列
举个栗子：当浏览器大于600像素的时候，菜单左浮动。否则变成横向菜单。
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}
恩恩，就先写这么多。by~