前端 css3新出网格布局，多列布局。设置文字阴影，怪异盒模型，鼠标手势大全

鼠标手势，指的是鼠标在页面或者元素上的样式

cursor
值
crosshair 用于精确定位的 十 字形
pointer 鼠标显示小手
move 拖拽效果时候的鼠标移动样式
text 鼠标悬浮在文本上面的样式
wait 鼠标等待加载时候的样式
help 鼠标显示带问号的箭头
not-allowed 禁用效果
default 默认指针样式
auto 鼠标按照默认的状态根据页面的内容自行修改样式

/* 十字 */
cursor: crosshair;
/* 小手 */
cursor: pointer;
/* 移动效果 */
cursor: move;
/* 查看文本 */
cursor: text;
/* 鼠标等待效果 */
cursor: wait;
/* 带?的箭头 */
cursor: help;
/* 禁用效果 */
cursor: not-allowed;
/* 默认指针 */
cursor:default;
/* 根据内容自己改变样式 */
cursor:auto;
/* 禁止用户选中文字 */
user-select: none;

怪异盒模型

/* 设置怪异盒模型 */
box-sizing: border-box;

outline ，轮廓线 他的使用方式和 border一样
轮廓线不占据文档流空间

box-sizing :
值
border-box ：border 和padding 同意计入到 width之内，也就是宽度包含了 border和padding 的值

content-box : 默认值，只有内容被计入到 width 之内
padding-box : 火狐浏览器支持，padding 计入到 width之内
由于 padding-box 存在兼容性问题，因此常用的怪异模式是 border-box

标准盒模型
宽度 = border 的宽度 + padding 宽度 + 内容宽度
怪异盒模型
宽度 = 设置的 width(包含了border的宽度 + padding 宽度 + 内容宽度)

设置文字阴影

text-shadow：X轴偏移 Y轴偏移 模糊度 阴影颜色;
如果需要设置多个阴影，就是用英文逗号隔开
单个阴影
text-shadow:0 0 10px #f50;
多个阴影
text-shadow:0 0 10px #f50 , 0 0 10px #ff0 , 0 0 10px #f60;
例如：

text-shadow:0 0 8px #00f,0 -5px 5px#f00,0 -10px 10px #f00,0 -18px 20px
#f00,0 -25px 40px #f00,0 -25px 20px #ff0;

css3新的扩展 多列布局

css3 中最新给出的多列布局方案，他是css布局的一个新的扩展

设置列宽
column-width:具体值 / （或者是）auto;
具体值是直接设置元素的宽度
auto是根据页面宽度。自定义列宽

设置列数
column-count:num;
num是具体的正整数,范围是**[1-10]**
以上两个属性合写：
column:width count;

设置列间距
column-gap:normal / 具体的数值;
normal 是默认值，他的大小是 1em

设置两列之间的边框
column-rule 具体设置规则和 css中的 border一致

设置标题跨列
column-span
只具有两个值
1. none表示不跨列
2. all 表示跨所有列

/* 分列的宽度 */
column-width: 180px;
/* 分列的列数 */
column-count: 3;
/* 合写 */
columns: 180px 3;
/* 设置列间距 */
column-gap: 20px;
/* 设置列与列之间的边框 */
column-rule: 3px #f00 dashed;
/* 设置标题跨列 */
column-span: all;
text-align: center;
line-height: 50px;

网格布局，是css3 新出的一种布局方式，常见的适用案例为 九宫格布局

声明网格布局的环境
display:grid;(最常用)
display:inline-grid;

设置列
grid-template-columns
值是
1、fr, 1fr就代表一个比例划分
有几列就可以设置几个fr ,每一列所占据的 宽度比例就是1fr,如果需要设置其他比例的宽度则可以设置整倍fr
如下例：
grid-template-colimns:1fr 2fr 3fr;
设置了当前网格为3列，第一列的宽度为1fr，第二列的宽度是第一列的2倍,第三列的宽度是第一列的3倍，有几个fr值,就有几列
2、还可以设置具体宽度
grid-template-colimns:100px 200px 300px;

3、也可以设置 宽度 + auto 是除了具体宽度之外的 自适应宽度
4、也可以 宽度 + fr 组合

设置行
grid-template-rows

他的值是行高，有几个值，就设置几个行高
grid-template-rows:200px 200px 300px;
以上案例的含义是，设置了3行，第一行行高是100px,第二行行高是200px,第3行行高是300px，如果总行高小于父级grid 的高度，则父级剩余的高度会被剩余的子元素平分

行 列 合写
grid-template: 行/列;
grid-template:auto auto auto/1fr 1fr 1fr;

列间距
column-gap:具体的数值;

行间距
row-gap: 具体的数值;

行距 列距合写
gap: row column;

指定开始行
grid-row-start:1; 表示从第一行开始跨行

指定结束行
grid-row-end:3; 到第三行结束，合并3行

指定开始列
grid-column-start:1; 从第一列开始跨列
指定结束列
grid-column-end:3; 到第三列结束，合并3列

/* 创建网格布局 */
display:grid;
width: 600px;
height: 400px;
border: 1px #f00 solid;
/* 设置列 */
grid-template-columns: 100px 100px 1fr 2fr;
/* 设置行 */
grid-template-rows:100px 100px auto;
margin: 20px auto;
/* 行 列 合写 */
grid-template:auto auto auto/1fr 1fr 1fr;
/* 列和列之间的缝隙 */
column-gap: 20px;
/* 行与行之间的缝隙 */
row-gap: 20px;
/* 行距 列距合写 */
gap: 40px 20px;
/* 指定开始行 指定结束行 */
     .row-span{
        grid-row-start: 1; 
        grid-row-end:span 3;
     } 
     /* 指定开始列 指定结束列 */
     .col-span{
        grid-column-start: 1; 
        grid-column-end:span 3;
     }