css3 弹性盒 常用属性笔记

Css3-3
多列：
column-count：设置列的个数 可以把一行文字分割成设置的列的个数。 如果设置了列的宽度 当列的最小宽度和 不够总宽度的时候 列的数量就会缩小
Column-width:可以设置列的最小宽度
Column-span:设置列的横跨数量 （常用于设置标题）
column-rule：设置分隔线 设置方式 与边框的设置方式一样 是一个复合属性
column-gap:设置列的间距

单位：rem px em 百分比 pt
em: 也是一个类似百分比的单位 相对于父元素字号 的比例
rem：对于根元素 字号 的比例 根18号字 = 1rem
-> 1.可以让比较小的屏幕 展示更多内容 并且可以按照屏幕的宽度来设置字号（小屏幕设置小字号 大的设置大字号）
-> 2.如果所有的宽高字号 都用rem表示 所有的内容展示的宽高字号 都是响应式的

媒体查询
@media (mix-width:600px) and or 其他条件{满足这个条件下的样式}
视口：用于设置移动端 显示内容窗口的配置

处理媒体查询不支持的方式
1.加载处理不兼容的脚本文件

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 

2.更改IE浏览器渲染内容时 使用的内核

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  

弹性盒/弹性布局(微信小程序有使用)
新的布局方式 以前浮动、定位布局
display:flex 设置为弹性盒
Flex-direction:设置 弹性盒内 子元素的排列方向
row
row-reverse
column
column-resverse
flex-wrap: 设置弹性盒内

Justy-content:设置水平方向的排布方式
Flex-start:默认设置 起始点位置对齐
Flex-end:设置 结束点 对齐
Center:以中心点对齐
Space-between:设置 水平方向的间距 平均分配
Space-around:设置 水平方向 平均分配 并且起始点和结束点 都占间距的一半
align-items：设置垂直方向的 排列方式
flex-start baseline stretch 以起始点的位置 排列
Flex-end:以结束点对齐
Center:垂直方向居中
align-content：
Flex-start:默认设置 起始点位置对齐
Flex-end:设置 结束点 对齐
Center:以中心点对齐
Space-between:设置 垂直方向的间距 平均分配
Space-around:设置 垂直方向 平均分配 并且起始点和结束点 都占间距的一半

Order:给元素 重新排序 数值越小的 越在前面
Flex:设置元素的分配比例

Node:
使用node,使用两部分
1.npm:是node 的包管理工具 -> 可以下载基于node的插件
更改为国内镜像 http://npm.taobao.org/ -> cnpm
2.使用API的部分，可以用于写服务端

npm常用操作指令：
Install :安装 i
-g: 安装到全局目录（在任何工程中 都可以使用这个插件）
uninstall:卸载