网页设计三种定位 第1篇
媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
优点：适应pc和移动端，如果足够耐心，效果完美。
缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
响应式页面在头部会加上这一段代码：
网页设计三种定位 第2篇
position 属性值 relative，可以设置元素为相对定位，相对定位有什么特点呢？我们通过例子来看。
创建 文件和 文件。打开 html 文件，构建基础代码，引入外部样式。在body里输入 emmet 命令：;(div[class=box$]{盒子$})*3，回车。在一个大的容器里创建了三个小盒子。
打开 css 文件，定义通用选择器，声明样式 box-sizing: border-box。定义分组选择器 html, body，声明样式 height: 100%，让 html 和 body 撑满整个页面。定义选择器 body，声明样式 margin: 0，去除 body 的外边界。
给外部容器里的三个盒子（.container > div）定义样式： float: left，width: 150px，height: 150px，border: 1px solid black，line-height: 150px，text-align: center，固定的宽高，1 像素的边框，文本水平垂直居中，水平横向排列。
为了消除浮动对其他容器的影响，给 container 定义伪元素（.container::after ），声明样式为：content: __，clear: both，display: block。
再分别给 box1 添加背景颜色 orange，给 box2 添加背景颜色 skyblue，给 box3 添加背景颜色 hotpink。
到浏览器里看一下效果，三个用来实验的盒子就做好了。
回到 css，我们给 box2 添加样式 position: relative，让它相对定位。
此时，我们发现盒子2没有任何变化。
再回到 css，给 box2 添加样式 left: 50px，top: 50px。
CSS .box2 { position: relative; left: 50px; top: 50px; }
再来看效果，盒子2向右和向下各偏移了 50px，并盖在了盒子3的上面。
网页设计三种定位 第3篇
回到 css，给 container 添加样式 position: relative，也就是给盒子2 的父元素添加了一个相对定位。
再看一下效果，盒子2 相对于它的父容器定位了。
如果把 container 的定位样式值改为 absolute，效果如何呢？
我们看，盒子2 的位置没有发生变化。这说明，盒子2 定位的参照元素只要设置了定位属性，无论是哪一种定位方式都可以。但 static 静态定位例外，其实，static 表示元素为静态定位，也就是和不给元素添加 position 属性是等价的。
比如，注释掉 container 容器的定位属性。
此时，盒子2 又相对于 body 来定位了。
如果再添加样式 position: static。
效果是一样的。
你可能还会问，绝对定位只参照父元素和 body 来定位吗？我们再做一个实验。
回到 html，在 container 外部再添加一个父元素 div，定义属性。
回到 css，给 outer 添加样式：display: inline-block，width: 600px，height: 500px，background-color: aliceblue，margin-left: 100px，margin-top: 100px，定义最外部容器的宽高，背景颜色，并向右下方设置100px的位置偏移。
此时，盒子1 和 盒子3 随着整个盒子发生偏移，盒子2 还是相对 body 定位。
注释掉 container 的定位样式，重新设置它为绝对定位。再给 outer 声明一个 position: relative 样式。现在，box2 的父容器和祖先容器都设置了定位，它会参照谁来定位呢？
很显然，盒子2 相对于父容器来定位了
如果注释掉父容器 container 的定位样式。盒子2 相对于祖先元素 outer，还是相对于 body 来定位呢？
答案显而易见，相对于 outer 定位了。
再去掉 outer 的定位样式。
网页设计三种定位 第4篇
流式布局（Liquid）的特点（也叫_Fluid_) 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。
网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。
网页设计三种定位 第5篇
接下来学习固定定位。
注释掉 box2 的定位相关样式。添加样式：position: fixed，right: 0，top: 100px，定义 box2 为固定定位，位置紧贴参照容器右侧
我们发现，容器2 相对于 body 定位了。其实，它只相对于 body 定位。
即使祖先元素有定位，比如打开父容器 container 的定位样式注释。
我们看，容器2 的位置依然不变。你会说，这不是和绝对定位类似嘛，是的，固定定位其实就是绝对定位的特例。那它有什么特殊用途呢？
回到 css，给 body 添加 2000px 的高度。
滚动页面，我们发现：盒子2 仍旧固定不动。