CSS常用属性之其它属性（八）

主要讲解了鼠标样式，外轮廓，超出部分隐藏，vertical-align 这四部分以及其特点与注意事项。

1、cursor 鼠标样式

cursor用于设置光标的类型，在鼠标指针悬停在元素上时显示相应样式。
 
属性值：
 

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

更多属性值看官方文档 👆(opens new window)
 
关于 url 这个值需要注意：

1. 图片地址，在实际开发中一般为绝对路径
2. 图片大小最好是 32*32 的大小（各浏览器支持大小不一，但 32 都 ok）
3. 图片格式，不同浏览器格式不一，可以是 png、svg、ico、cur，一般以 ico 和 cur 为主
    

html {
  /* 图片地址，在实际开发中一般为绝对路径 */
  cursor: url("http://127.0.0.1:5500/images/fish.ico"), pointer;
}
/* 当没有找到自定义图标，就会用pointer效果 */

2、outline 外轮廓

这个属性用于设置元素周围的轮廓 ，其用法和 border 属性一样。
 
语法：
 

/* 边框宽 边框风格 边框颜色 */
outline: 10px solid red;

outline 的小属性：

• outline-width 边框宽
• outline-style 边框风格
• outline-color 边框颜色
   

border 与 outline 的区别：

• outline ：不占据空间，绘制于元素内容周围的轮廓 ，不参于盒子模型的占位计算，不会因为添加这个属性，而造成盒子占位空间变化。
• outline 没有办法单独控制某一边
• border：参于盒子模型计算，会因为边框值的变化，造成盒子占位空间变化。
   

去掉表单元素默认的 outline 属性：

• outline 的值为 设置为 0 或 none 会移除元素的默认轮廓
• 表单元素为了增强其可访问性（聚焦提示），都有默认的 outline 值。
• 去掉表单元素默认的 outline 效果（input{outline:none}）

3、overflow 超出部分隐藏

overflow 属性规定当内容溢出元素框时该做什么。
 
① overflow 属性值：
 

值	描述
visible	默认值。内容溢出，会呈现在元素框之外。
hidden	内容溢出，则溢出内容是不可见的。
scroll	不管内容是否溢出，都会显示滚动条。
auto	内容溢出，则显示滚动条以便查看其余的内容。如果不溢出，则不显示滚动条
inherit	规定应该从父元素继承 overflow 属性的值。

② overflow-x 和 overfow-y：

• overflow-x 水平方溢出设置
• overflow-y 垂直方向溢出设置
   

overflow-x: hidden;
overflow-y: auto;

4、vertical-align 属性

指定行内元素 、行内块级元素 、表格单元格元素 的垂直对齐方式，对块级元素是无效的。
 
属性值：
 

属性值	描述
baseline	使元素的基线与父元素的 基线对齐
sub	使元素的基线与父元素的 下标基线对齐
super	使元素的基线与父元素的 上标基线对齐
text-top	使元素的顶部与父元素的字体顶部对齐。
text-bottom	使元素的底部与父元素的字体底部对齐。
middle	使元素的中部与父元素的基线加上父元素 x-height(x 高度) 的一半对齐。
数值(10px)	使元素的基线对齐到父元素的基线 之上的给定长度 可以是负数
百分比 %	使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是line-height属性的百分比 可以是负数
top	使元素及其后代元素的顶部与整行的顶部对齐
bottom	使元素及其后代元素的底部与整行的底部对齐

注：小写字母 x 的下边缘（线）就是我们的基线，如下所示：
 

点击查看，详细参考地址 👆(opens new window)
 
vertical-align 的应用场景：

• 用于控制文字与行内块元素或图片在垂直方向上的对齐方式

• 用于设置表格单元中内容的垂直对齐方式