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:卸载