Less（初步了解）
1.less是一门css的预处理语言。
2.less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式。
3.在less中添加了许多的新特性，像对变量的支持、对mixin的支持。
4.less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行。
flex （弹性盒，伸缩盒）
1.是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局。
2.flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变。
3.弹性容器：
-要使用弹性容器，必须先将一个元素设置为弹性容器。
-display: flex;（设置块级弹性容器）
-display: inline-flex;（设置为行内的弹性容器）
4.弹性元素：
-弹性容器的子元素（直接子元素）是弹性元素。
-弹性元素可以是弹性容器。
-主轴：
弹性元素的排列方向称为主轴。
-侧轴：
-与主轴垂直方向的称为侧轴。
5.弹性容器的样式
-flex-direction（指定容器中弹性元素的排列方式）
-可选值：
-row 默认值，弹性元素在容器中水平排列（左向右）
-row-reverse 弹性元素在容器中反向水平排列（右向左）
-column 弹性元素纵向排列（自上而下）
-column-reserve 弹性元素反向纵向排列 （自下而上）
-flex-wrap（设置弹性元素是否在弹性容器中自动换行）
-可选值：
-nowrap 默认值，元素不会自动换行
-wrap 元素沿着辅轴方向自动换行
-wrap-reverse 元素沿着主轴反方向换行
-flex-flow（wrap 和 direction 的简写属性）
-可选值：
-flex-flow: row wrap;
-justify-content（如何分配主轴上的空白空间、主轴上的元素如何排列）
-可选值：
-flex-start 元素沿着主轴起边排列（默认值）
-flex-end 元素沿着主轴终边排列
-center 元素居中排列
-space-around 空白分布到元素两侧
-space-evenly 空白分布到元素的单侧（每一边的距离都一样）（兼容性不好，慎用）
-spance-between 空白均匀分布到元素间
-align-items（元素在辅轴上如何对齐）
-可选值：
-stretch 元素被拉伸以填满整个容器（默认值）
-flex-start 元素不会拉伸，沿着辅轴起边对齐
-flex-end 沿着辅轴的终边对齐
-center 居中对齐
-baseline 基线对齐
-align-content（辅轴空白空间的分布）
-可选值：
-center 上下空白元素中间
-flex-start 下面空白
-flex-end 上面空白
-space-around 环绕两边
-space-between 空白在中间
-space-evenly 空白在单侧
6.弹性元素的属性
-flex-grow（指定弹性元素的伸展的系数）
-当元素有剩余空间，会按照比例进行分配。
-flex-shrink（指定弹性元素的收缩系数）
-默认为1，当父元素中的空间不足以收纳所有的子元素时，如何对子元素进行收缩。
-align-self（用来覆盖当前弹性元素上的align-items）
-flex-basis：指定的是元素在主轴上的基础长度
-如果主轴是横向的，则该值指定的就是元素的宽度。
-如果主轴是纵向的，则该值指定的就是元素的高度。
-默认值是auto，表示参考元素自身的高度或宽度。
-如果传递一个具体的数值，则以该值为准。
-flex（可以设置弹性元素所有的三个样式 flex: 增长 缩减 基础长度;）
-可选值：
-initial "flex: 0 1 auto;"
-auto "flex: 1 1 auto;"
-none "flex: 0 0 auto;"（弹性元素没有弹性）
-order（决定元素的排列顺序）
-可选值：
-默认值：0；
-可以设置为正数或负数。
像素
1.在前端开发中像素要分成两种情况讨论：css像素和物理像素。
2.物理像素：屏幕的小点点就属于物理像素。
3.css像素：编写网页时，我们所用像素都是css像素。
4.浏览器在显示网页时，需要将css像素转化为物理像素然后再呈现。
5.一个css像素是最终由几个物理像素显示，由浏览器决定。（默认情况下在pc端，一个css像素=一个物理像素）
视口（viewport）
1.视口就是屏幕中用来显示网页的区域。
2.可以通过查看视口的大小，来观察css像素和物理像素的比值
-默认情况下：
-视口宽度 ：1920px（css像素） 1920px （物理像素）
-此时 css像素和物理像素的比值是 1：1
-放大两倍的情况：
-视口宽度 960px（css像素）1920px（物理像素）
-此时 ，css像素和物理像素的比是1：2
3.我们可以通过改变视口的大小，来改变css像素和物理像素。
手机像素
1.在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰。
2.智能手机屏幕的像素点远远小于计算机屏幕的像素点。
3.默认情况下，移动端的网页都会将视口设置为980像素（css像素），以确保pc端网页可以在移动端正常访问，但是如果网页中的宽度超过了980，移动端的浏览器会自动对网页缩放以完整显示网页。
完美视口
1.移动端的默认视口大小是980px（css像素），默认情况下，移动端的像素比就是 视口大小/移动端宽度。如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比不好， 导致网页的内容小。
2.编写移动端页面时，必须要确保有一个比较合理的像素比：1css 像素 对应 2 个物理像素 、2 css像素 对应 3 个物理像素……
3.可以通过meta标签来设置视口大小: <meta name="viewport" content="width=200px">
4.每一款移动设备设计时，都会有一个最佳的像素比，一般我们只需要将像素比设置为该值既可得到最佳像素比。
5.将像素比设置为最佳像素比的视口我们称其为完美视口: （写移动端一定要写这行代码）
-<meta name="viewport" content="width=device-width, initial-scale=1.0>
学识浅薄，如有错误，恳请斧正，在下不胜感激。