前端笔记（移动端）

flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

• 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
  采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”
  
  常见父项属性：
• flex-direction：设置主轴的方向；
• justify-content：设置主轴上的子元素排列方式；
• flex-wrap：设置子元素是否换行；
• align-content：设置侧轴上的子元素的排列方式（多行）；
• align-items：设置侧轴上的子元素排列方式（单行）；
• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap；
  
  
  
  
  
  
  align-content 和 align-items 区别：
• align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸；
• align-content适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值；
• 总结就是单行找align-items 多行找align-content；
  
  
  flex布局子项常见属性
• flex子项目占的份数；
• align-self控制子项自己在侧轴的排列方式；
• order属性定义子项的排列顺序（前后顺序）；
  flex属性
  flex属性定义子项目分配剩余空间，用flex来表示占多少份数

.item {
     flex: <number> ; /*defaut 0 */
} 

align-self控制子项自己在侧轴上的排列方式
align-items： flex-end （让三个子盒子沿着侧轴底侧对齐） 加在父级上；
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

span：nth-child（2）{
/*设置自己在侧轴上的排列方式*/
align-self:flex-end;
}

order属性定义项目的排列顺序
数值越小，排列越靠前，默认为0；
注意：和z-index不一样
背景线性渐变

bgckground:linear-gradient(起始方向，颜色1，颜色2，...);
/*从左开始*/
bgckground:-webkit-linear-gradient(left，red，blue，...);
/*从左上角开始*/
bgckground:-webkit-linear-gradient(left top，red，blue，...);

背景渐变必须添加浏览器私有前缀；
起始方向可以是：方位名词 或者 度数，如果省略默认就是top

rem基础
rem（root em）：是一个相对单位
em是相对于父元素的字体大小来说的（前提：div是p的父级）；

div {
font-size：12px;
}
p {
width:10em;
height:10em;
background-color:pink;
}
/*会得到一个120x120的粉色盒子*/

rem的基准是相对于html元素的字体大小。
比如，根元素（html）设置font-size=12px；非根元素设置width ：2rem；则换成px表示就是24px。
rem的优点：
可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制
媒体查询（Media Query）：是CSS3新语法。

• 使用@media查询，可以针对不同的媒体类型定义不同的样式；
  - @media可以针对不同的屏幕尺寸设置不同的样式；
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；
• 目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询
  语法：

@media mediatype and|not|only (media feature) {
      CSS-Code;
} 

• 用@media开头 注意@符号；
• mediatype 媒体类型；
• 关键字 and not only；
• media feature 媒体特性 必须有小括号包含
  mediatype查询类型
  all ：用于所有设备；
  print ：用于打印机和打印预览；
  screen：用于电脑屏幕、平板电脑、智能手机等
  关键字
  关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件：
• and：可以将多个媒体特性连接到一起，相当于 “且” 的意思；
• not ：排除某个媒体类型，相当于 “非” 意思，可以省略；
• only：指定某个特性的媒体类型，可以省略。
  
  
  
  
  引入资源（理解）：
  当样式比较繁多时候，我们可以针对不同的媒体使用不同stylesheets （样式表）；
  原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件
  
  
  Less是一门CSS预处理语言，它扩展了CSS的动态特性
  
  
  
  
  1、我们运算符左右两侧必须敲一个空格隔开；
  2、两个数参与运算 如果只有一个数有单位，则最后的结果就以这个单位为准；
  3、两个数参与运算，如果2个数都有单位，而且不一样的单位，最后的结果以第一个为准；
  rem适配方案
  
  
  元素大小取值方法：
  1、最后的公式：页面元素的rem值=页面元素值（px）/(屏幕宽度/划分的份数)；
  2、屏幕宽度/划分的份数就是html font size的大小；
  3、或者：页面元素的rem值=页面元素值（px）/html font-size字体大小；