前端布局
一、静态布局
静态布局就是传统的网站形式，网页上的所有元素的尺寸一律使用px作为单位。
1.布局特点
不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。
代码如下：
浮动方面经常出现的问题:
上下两个div，如果上面的div设置浮动的话一定要立即给下面的div设置清除浮动（clear:both;加在下面那个div样式上, clear:both; 的意思是不允许上面有浮动)
下图为纠正后的正确表现（把清除浮动加在红色div上）：
上下都有div的情况，设置上下间距时一定要从上往下挤，不能从下往上（用margin-bottom:20px;）
谈到浮动，我们还要讲下 块级元素和内联元素的区分和使用：
块级元素有：<div>、<p>、<ul>、<li>、<ol> ....
块级元素：是可以控制宽和高、margin等，并且会换行。
内联元素：是不可以控制宽和高、margin等；并且在同一行显示，不换行。
二、自适应布局
简单来说就是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
1.布局特点
屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
三、流式布局
页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变（栅格布局）。
1.布局特点
当屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
四、响应式布局
为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
- 布局特点
每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。（把元素的长度设置成百分比、利用相对定位、绝对定位的方式布局）
①.相对定位：相对于原来自己所在的位置偏移，相对定位原来的位置依旧还占据。
②.绝对定位：可以用负值，原来的位置消失了。
③.固定定位：position: fixed;
④.重叠元素堆叠：z-index
五、弹性布局（rem/em布局）
rem是相对于html元素的font-size大小而言的，而em是相对于其父元素。使用rem单位的弹性布局在移动端很受欢迎。
1.优点
2.属性设置
网页可以看成由一个个"盒子"组成
如下图所示
1、常见布局
-
单列布局
代码如下
效果如下
- 双列布局
代码如下
效果如下
-
三列布局
代码如下
效果如下
- 混合布局(综合布局)
代码如下
效果如下
转载于:https://blog.51cto.com/14322378/2391368