学习CSS布局

display属性

---

每个元素都有默认的display属性，一般是block或者inline
block表示块级元素，而inline表示行内元素
block元素（如div、table、p、form等）会新开始一行并尽可能撑满容器。而inline元素（如span、a等）即行内元素不会打破包裹它的容器的布局
另一个常用的display值为none，display:none通常是被JavaScript用来在不删除元素的情况下隐藏该元素。
其他的display值还有list-item和table等,你可以随时随地人工改变一个元素的display值。
常见的是:设置li元素为display:inline制作水平菜单。

marigin:auto

---

如何使一个元素居中，并且不用担心小屏幕会显示出滚动条：(max-width 支持IE7+)

#main{
	max-width:600px;
	margin:0 auto;
}

盒模型

---

盒模型的宽度高度我们知道要通过计算（真正的宽度=width+2padding+2border）我们使用box-sizing来改进它，当设置一个元素为box-sizing:border-box时，此元素的内边距和边框不会增加该元素的宽度。支持IE8+，如果要在所有浏览器中使用该属性，则可以利用下面的代码：

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

position

---

position的值可以为static、absolute、relative、fixed

• static是默认值，表示没有被定位
• relative相对定位，相对于它在正常文档流中，通过top、right、bottom、left作用值产生偏移。而其他元素不会调整位置来弥补它偏离后剩下的间隙
• fixed固定定位，相对于浏览器窗口，意味着即使页面滚动，它还是会停留在相同的位置
• absolute绝对定位，相对于最近的被定位的祖先元素产生的偏移，如果没有，它是相对文档的body元素进行偏移

float

---

最开始产生float的作用就是使文字环绕图片，其本质就是包裹和破坏，它脱离了正常的文档流，可能会导致溢出，所以要clearfix hack（清除浮动）

媒体查询

---

针对响应式设计，，让网站针对不同浏览器和设备相应

@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;
	}
}

inline-block

---

使用行内联，IE6和IE7支持看这里
使用inline-box要注意以下：

• vertical-align属性会影响到inline-block元素，你可能会把它的值设置为top
• 需要设置每一列的宽度
• 如果html源代码中元素之间有空格，那么列与列之间会产生空隙

column

---

.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;
}

CSS3 columns是很新的标准，所以你需要使用前缀，并且它不被IE9及以下和Opera Mini支持

flexbox

---

flexbox布局模式被用来重新定义CSS中的布局方式

其他框架

---

例如bootstrap的栅格布局等等