鼠标手势
鼠标手势,指的是鼠标在页面或者元素上的样式
cursor
值:
- crosshair 用于精确定位的 十 字形
- pointer 鼠标显示小手
- move 拖拽效果时候的鼠标移动样式
- text 鼠标悬浮在文本上面的样式
- wait 鼠标等待加载时候的样式
- help 鼠标显示带问号的箭头
- not-alowed 禁用效果
- default 默认指针样式
- 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:
值
- border-box:border 和 padding 统一计入到 width 之内,也就是宽度包含了 border 和 padding 的值
- content-box:默认值,只有内容被计入到width 之内
- 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;
}