我们常用的布局有一下几种：
静态布局（Static Layout）、流式布局、自适应布局、响应式布局、弹性布局（rem/em布局）
静态布局：特点：不管浏览器的尺寸是多少，设定元素的尺寸都是定值，常用于pc端
：优点：静态布局对设计师及css编写者来说很常简单，没有兼容性的问题
：缺点：不能根据用户的屏幕尺寸做出不同的表现
流式布局：特点：页面元素的宽度按照屏幕分辨率了吧进行适配调整，但整体布局不变，例如网格系统（页面元素大小会变，但是布局不变）
：优点：移动端开发常用布局
：缺点：若屏幕尺寸跨度太大，则屏幕上的元素不能正常显示
自适应布局：特点：屏幕分辨率变化是，页面里元素的位置会变化二大小不会发生变化
响应式布局：特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会发生改变
：优点：适应pc端和移动端，要是足够耐心的话，则效果会很完美
：缺点：媒体查询是有限的，只能适应主流的宽高；要匹配足够的的屏幕大小，工作量大，设计也需要多个版本
弹性布局：rem是根据根元素<html>来设置字体大小的
：em是以父节点font-size大小作为参考点
：若盒子box的属性中有display：flex；则声明该盒子里的子元素是弹性布局
左固定右自适应布局：
（1）都左浮动，给右边的盒子设定左边盒子宽度的左内边距
（2）一个左浮动且设定宽度，另一个设定宽度为width：clac（100% - ‘左侧盒子的宽度’）calc -- calculation -- 计算
（3）定义他们的父元素为弹性布局（display：flex）左侧设定宽度，右侧填充（flex-grow:1）
flex：grow（扩张因子，默认值是0，不扩张，设置成1就扩张）
flex：shrink（收缩因子，默认值是1，收缩，设置成0就不收缩）
双飞翼布局 === 圣杯布局（左右侧固定，中间自适应）
补充前天less：
less是一款比较流行的预处理css
less语法兼容所有的css，需要下载一些依赖
node -- js的运行环境
npm -- 第三方管理工具
less支持变量、混合、函数、嵌套、循环等特点；
在node中安装less： npm install -g less
npm install依赖名字 -g（全局安装） -s（save缩写） -D（dev缩写）
less文件变css文件： 在vscode中的终端里操作 lessc style.less style.css
less文件中//注释编译后自动删除 /**/注释编译后仍存在
定义一个变量@colors：gray；
less中直接color：@colors；
less中可以嵌套：.box{ .
color:red;
box1{
background-color:blue;
.box2{
font-size:66px;
}
}
}
定义一个类：
.Colors（@colors：green）{ color：@colors }
#head{ .Colors }
导入导出
@import
less1导入less2：
在less2中写上：@import URL（‘less1）