一些前端布局笔记

学习学习布局的笔记

1.让padding属性和border属性不增加盒子的大小

box-sizing:border-box;
//因为是新属性，所以，可能需要加前缀，已打开实验功能
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;

2.position属性有：static(默认)，relative，fixed，absolute

static
默认属性，不指定任何位置属性

relative
跟static表现一致，除非添加了其他属性,在一个相对定位（position属性的值为relative）的元素上设置 top、right 、 bottom和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

fixed
一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative一样， top 、right 、 bottom和 left 属性都可用。

资料：修复移动设备fixed属性bug

absolute
是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的positioned祖先元素。如果绝对定位（position属性的值为absolute）的元素没有positioned祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个positioned元素是指 position 值不是 static的元素

3.媒体查询

“响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！
媒体查询是做此事所需的最强大的工具
使用 meta viewport 之后可以让布局在移动浏览器上显示的更好

资料：MDN关于媒体查询的文档
资料：一些使用媒体查询网站的例子

4.更简单的实现网格布局，使用display:inline-block

使用时需要注意

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

资料：让IE6/IE7支持inline-block

5.使用column-count属性实现多列文本布局

这个属性比较新，需要使用浏览器前缀来实现兼容性，并且不支持IE9及以下和Opera mini浏览器
例如：

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

资料：更多关于column属性

6.一些CSS布局框架

因为 CSS 布局很难使用，所以催生了不少 CSS 框架来帮助开发者。如果你想看看那么这里有一些。只有在框架的功能满足你的需求时，使用框架才是个好主意。掌握CSS的工作方式是无可替代的。

[blueprint](http://www.blueprintcss.org/)

[unsemantic](http://www.unsemantic.com/)

[bluetrip](http://bluetrip.org/)

[elasticss](http://elasticss.com/)

[bootstrap](http://twitter.github.com/bootstrap/)

[gumby](http://gumbyframework.com/)

[susy](http://susy.oddbird.net/)

[foundation](http://foundation.zurb.com/)

[kube](http://imperavi.com/kube/)

[groundwork](http://groundworkcss.github.com/)

[semantic ui](http://semantic-ui.com/)

[Purecss](http://purecss.io/)