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