CSS布局

基本上，有四种可选的布局类型：
1.固定宽度布局
2.自适应布局
3.弹性布局
4.混合布局

1.固定布局
以像素为单位，外层宽度固定、内层使用百分比或固定宽度的静态布局。
使用固定布局，我们可以确保在不同分辨率下设计效果保持一致。
2.自适应（流式）布局
具有灵活变动宽度的布局，布局会根据网页浏览器的窗口打绩效相应地调整自己的宽度。
布局中，元素之间的关系至关重要，子元素的宽度是以父元素的百分比设置的。
流式布局赋予用户更大的自由来调整布局的宽度。
流式布局的缺点：
经常会将布局的比例15.4333%变成15%进位或者去位的方式来使用，导致的布局的不精确。
在低分辨率屏幕的表现良好，但在高分辨率下会出现奇怪的想象，诸如布局中内容区域太宽、充斥大量空白难以阅读等。
为解决这个问题，内容区可以设置最小宽度“min-width”和最大宽度“max-width”来定义布局的宽度。
2.1.动态网格布局
网格设计体现了秩序和精确。网格允许使用对齐、对称、适当的空白，从战略和系统上来组织排版和设计元素。最终实现令人愉悦和易读的设计。
2.2.自适应的流式布局
为解决不同屏幕分辨率情况下内容自适应问题，写几套css样式通过js获取浏览器宽度getBrowserWidth()来替换不同css。讲真，这种方法还是无法接受的。随之被@media媒体查询取代。
3.弹性（可缩放）布局
弹性设计有一个关键地方Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小，我们可以这样来设置1em，0.5em，1.5em等，而且“em”还可以指定到小数点后三位，比如“1.365em”。
1、浏览器的默认字体大小是16px
2、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算:
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
4.混合布局
字体和容器大小使用em，然后巧妙地混合使用百分比和像素设置余下的布局元素。
最后可查阅的总结性文章：固定布局、流动布局、弹性布局哪一种适合你