即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。
1、布局特点 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。
2、设计方法 PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。 缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。
1、 要使用伸缩部局先要给 父元素设置为伸缩盒子 display:flex;
2、 伸缩盒子具有了主轴（默认水平从左向右） 伸缩盒子还有测轴（侧轴始终垂直于主轴） 伸缩盒子中所有的子元素都按照主轴的方向显示
3、 设置主轴方向 (默认值row) flex-direction:row; 从左向右 flex-direction:row-reverse; 从右向左 flex-direction:column; 从上向下 flex-direction:column-reverse; 从下向上
4、 设置 子元素 在主轴方向的对齐方式 justify-content:flex-start; 在主轴的开始位置对齐 justify-content:flex-end; 在主轴的末尾对齐 justify-content:center; 在主轴的中间位置对齐 justify-content:space-around; 环绕显示 justify-content:space-between; 占满正行（左右两边对齐中间在中间显示）
5、 设置元素在侧轴方向的对齐方式（默认拉伸）如果有高度就看不到拉伸； align-items:flex-start; align-items:flex-end; align-items:center; align-items:stretch; 拉伸
6、 设置伸缩盒子是否允许子元素换行（默认不会换行显示） flex-wrap:nowrap;不换行 flex-wrap:wrap; 换行
7、 设置换行后的对齐方式(默认值stretch) 注意：给属性必须配合flex-wrap:wrap;使用 align-content:flex-start; 开始位置换行没有空格 align-content:flex-end; 结束位置对齐 align-content:center; 中间对齐 align-content:space-between; 一行在开始位置一行在结束位置 align-content:space-around; 环绕对齐 align-content:stretch; 拉伸
8、 伸缩盒子中子元素的相关属性 子元素属性 order order值越大谁就越靠后
flex;子元素属性：设置子元素的缩放比； 自适应盒子设置为flex：1； 把父元素整体减去固定盒子的宽度后剩下的部 分整体为一份；
由于外层是position:relative，所以里层是absolute的话，则会以外层的左上角为位移参考对齐。当然外层只写position:relative，写上left,top这两个值，则表示以：以这个元素的本来应该在的位置为布局参照原点进行left,top对齐。
还有一种情况是，只是一个position:absolute;外层没有position:relative，这时会找寻那个点为参考呢？这时候的原则是：如果某父级元素中有relative者，则以某父级元素为参考原点，如果没有position:relative，则以body为参考原点。如果position:absolute外层没有relative时，这两个布局上是没有区别的。
当然最后一种情况是：外层是：position:absolute;里边是position:relative，那会是什么情况？按着原来的原则，absolute会参考body为布局原点，relative会参考他本来应该在的位置为布局原点，这时候其实就是参考外层左上角为布局原点。
定位布局快捷，但是有效性比较差，因为脱离了文档流
table布局：
table来做整体页面的布局，布局技巧归纳如下：
（1）按照设计图的尺寸设置表格的宽高以及单元格的宽高
（2）将表格的border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用。
表格的Cellpadding：设置表格中的单元格内容（如：文字等）离单元格边线的距离
表格的cellspacing：设置表格中单元格之间的间距
（3）针对局部复杂的布局，可以在单元格里面再嵌套表格，嵌套表格划分局部的空间。
（4）单元格中的元素或者嵌套的表格用align和valign设置对齐方式
（5）通过属性或者CSS样式设置单元格中元素的样式
1.如果只做pc端，那么静态布局（定宽度）是最好的选择；
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。 布局参考
