前端布局分类

前端布局分类大致分为以下：

1. 固定布局

以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸

2. 自适应布局与响应式布局

自适应布局也叫可切换的固定布局，同样以像素作为页面单位，使用@media 媒体查询给主流设备不同尺寸，设计几套不同宽度的布局，切换不同的样式。可以给适配范围内的设备最好的体验，但是在同一个设备下实际还是固定的布局。是在你知道你的用户将会使用哪些设备而进行的有针对性的设计。例子 http://sports.163.com（网易体育）      自适应960 1200二档视口

响应式布局。自适应暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。针对所谓普遍设备进行的页面设计，并不是针对指定的浏览设备（boostrap，amazeui）。包含自适应，多媒体查询，100%流动布局，rem。http://www.apple.com/cn/ Apple（apple中国）

使用 em 或 rem 单位进行相对布局。避免了根据 px 布局在高分辨率下几乎无法辨认的缺点，又相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。需要一段时间适应而且不易从其他布局转换过来，但几乎是目前最好的布局方式。

em：

如果一个div有18px字体大小，10em将等同于180px，即10 × 18 = 180。

CSS设置padding为10em，浏览器解析出来的值为180px(或接近它)

有一个比较普遍的误解，认为em单位是相对于父元素的字体大小。 事实上，它们是相对于使用em单位的元素的字体大小。父元素的字体大小可以影响em值，但这种情况的发生，纯粹是因为继承。（css是有继承性的。一个div中包含2个p标签，1个span标签，当给div设置字体颜色为红色时，他的子标签会继承父元素的属性，因而会显示红色。 在CSS中以text-、font-、line- 开头的属性都是可以继承的。）

rem：

http://www.cnblogs.com/well-nice/p/5509589.html

流动布局：

使用 % 百分比进行相对布局。可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

3. 弹性布局

flex：

flex（ flexible box：弹性布局盒模型）。使用 CSS3 Flex 系列属性进行相对布局。对于富媒体和复杂排版的支持非常强大，但是还未普及并且兼容性较差。

http://www.jianshu.com/p/0abc609ef4a3

http://www.runoob.com/w3cnote/flex-grammar.html

http://caibaojian.com/flexbox-guide.html

4. 浮动布局

Flexbox最新一版的规范，对于Android 2.3的支持，连最简单的多行商品按顺序排列，都实现不了。

块级元素如果没有给高度，那么高度是由子元素还有padding值撑起来的，当left和right浮动之后脱离了文档流，不再占据页面空间，所以它们的父级的高度只有padding值。

http://www.qdfuns.com/notes/22387/e68c648a82cd1dd32f251a62e33b7ea0.html