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

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

1、cursor 鼠标样式

设置光标的类型，在鼠标指针悬停在元素上时显示相应样式
 
更多属性值看官方文档 👆(opens new window)
 

值	描述
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	此光标指示可用的帮助（通常是一个问号或一个气球）。

关于 url 这个值需要注意：

• ① 图片地址，在实际开发中一般为绝对路径
• ② 图片大小最好是 32*32 的大小（各浏览器支持大小不一，但 32 都 ok）
• ③ 图片格式，不同浏览器格式不一，可以是 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 超出部分隐藏

<style>
  .box1 {
    /* overflow 属性规定当内容溢出元素框时该做什么 */
    overflow: hidden; /* 内容溢出不可见 */
  }
  .box2 {
    overflow: scroll; /* 不管内容是否溢出都显示滚动条 */
  }
  .box3 {
    overflow: auto; /* 内容溢出则显示滚动条，否则不显示 */
  }
  .box4 {
    overflow-x: hidden; /* 水平方向内容溢出不可见 */
  }
  .box5 {
    overflow-y: auto; /* 垂直方向内容溢出则显示滚动条，否则不显示 */
  }
</style>

4、vertical-align 属性

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

vertical-align 的应用场景：

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

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

点击查看，详细参考地址 👆(opens new window)

---

上一篇文章	下一篇文章
CSS常用属性之背景属性（七）	CSS之盒模型（九）