26.鼠标手势、轮廓线、怪异盒模型

鼠标手势

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

cursor

值：

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

.wp{
    width: 200px;
    height: 200px;
    background: #04be02;
     /* 十字形 */
    cursor: crosshair;
    /* 小手 */
    cursor: pointer;
    /* 移动效果*/
     cursor: move;
     /* 查看文本效果 */
    cursor: text;
    /* 等待 */
    cursor: wait;
    /* 带？的箭头 */
    cursor: help;
    /* 禁用效果*/
    cursor: not-allowed;
    /* 默认指针 */
    cursor: default;
    /* 根据内容自己改变样式 */
    cursor: auto;
    /* 禁止用户选中文字 */
    user-select: none;
}

轮廓线outline

轮廓线，他的使用方式和 border 一样

轮廓线不占据文档流空间

input[type="text"]:focus{
    border: 1px #f00 solid;
    outline: none;
}
.wp{
    width: 200px;
    height: 200px;
    border: 1px #f00 solid;
    outline: 10px #f60 solid;
}

怪异盒模型

box-sizing:

值

1. border-box：border 和 padding 统一计入到 width 之内，也就是宽度包含了 border 和 padding 的值
2. content-box：默认值，只有内容被计入到width 之内
3. padding-box：火狐支持，padding计入到width之内
   由于padding-box 存在兼容性问题，因此常用的怪异模式是border-box。

标准盒模型

宽度 = border的宽度 + padding 宽度 + 内容宽度

怪异盒模型

宽度 = 设置的width(包括了 border 的宽度+padding 宽度 + 内容宽度)

.wp{
border: 10px #f00 solid;
 /* 设置怪异盒模型 */
box-sizing: border-box;

box-sizing: content-box;
}