五、其它常用属性¶

TIP

鼠标样式，外轮廓，超出部分隐藏，vertical-align 属性

1、cursor 鼠标样式¶

TIP

设置光标的类型，在鼠标指针悬停在元素上时显示相应样式

更多属性值看官方文档 👆(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 为主

ico 在线图标生成器，点击查看 👆(opens new window)

html {
  /* 图片地址，在实际开发中一般为绝对路径 
        除了前面的图片，后面还需要指定一个鼠标样式，否则不生效
    */
  cursor: url("http://127.0.0.1:5500/images/fish.ico"), pointer;
}
/* 当没有找到自定义图标，就会用pointer效果 */

2、outline 外轮廓¶

TIP

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

语法

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

outline 的小属性

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

border 与 outline 的区别

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

<style>
  .box {
    width: 100px;
    height: 100px;
    /* 上 右 下 左 */
    margin: 50px 0px 0px 30px;
    background-color: tomato;
    /* 外轮廓 */
    outline: 30px dotted skyblue;
    /* border: 30px dotted skyblue; */
  }
</style>
<body>
  <div class="box"></div>
  我是页面中的其它元素喽
</body>

添加 outline 效果	添加 border 效果
![[Pasted image 20260226160828.png]]	![[Pasted image 20260226160836.png]]

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

表单元素为了增中其可访问性（聚焦提示），都有默认的 outline 值。
将表单元素的 outline 值设为 0 或 none，可以去掉表单元素的轮廓效果

input {
  outline: none; /* 去掉元素外轮廓 */
}

去掉前	去掉后
![[Pasted image 20260226161007.png]]	![[Pasted image 20260226161018.png]]

3、overflow 超出部分处理¶

TIP

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

3.1、overflow 属性值¶

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

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    line-height: 35px;
    /* 左浮动 */
    float: left;
    margin-left: 20px;
  }
  .box1 {
    overflow: hidden;
  }
  .box2 {
    overflow: scroll;
  }
  .box3 {
    overflow: auto;
  }
</style>
<body>
  <div class="box">啥处理都不做我是文本内容2，我是文本内容3</div>
  <div class="box box1">hidden 我是文本内容1，我是文本内容2，我是文本内容3</div>
  <div class="box box2">scroll 我是文本内容1，我是文本内容2，我是文本内容3</div>
  <div class="box box3">auto 我是文本内容1，我是文本内容2，我是文本内容3</div>
</body>

![[Pasted image 20260226160927.png]]

3.2、overflow-x 和 overflow-y¶

TIP

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

overflow-x: hidden;

4、vertical-align 属性¶

TIP

指定行内元素、行内块级元素、表格单元格元素的垂直对齐方式
对块级元素是无效的

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

注：

小写字母 x 的下边缘（线）就是我们的基线 ![[Pasted image 20260226161128.png]]

<style>
  .box {
    height: 50px;
    float: left;
    margin: 10px 10px 10px 0px;
    background-color: skyblue;
    /* 行高 50px */
    line-height: 50px;
  }
  .box span {
    /* 行内块 */
    display: inline-block;
    line-height: 1;
    background-color: yellow;
  }
  .baseline {
    vertical-align: baseline;
  }
  .sub {
    vertical-align: sub;
  }
  .super {
    vertical-align: super;
  }
  .text-top {
    vertical-align: text-top;
  }
  .text-bottom {
    vertical-align: text-bottom;
  }
  .middle {
    vertical-align: middle;
  }
  .top10px {
    vertical-align: 10px;
  }
  .top10 {
    vertical-align: 10%;
  }
  .top {
    vertical-align: top;
  }
  .bottom {
    vertical-align: bottom;
  }
</style>
<body>
  <div class="box">文字Xx<span class="baseline">x-baseline</span>文字</div>
  <div class="box">文字Xx<sub>2</sub><span class="sub">x-sub</span>文字</div>
  <div class="box">
    文字Xx<sup>2</sup><span class="super">x-super</span>文字
  </div>
  <div class="box">文字Xx<span class="text-top">x-text-top</span>文字</div>
  <div class="box">
    文字Xx<span class="text-bottom">x-text-bottom</span>文字
  </div>
  <div class="box">文字Xx<span class="middle">x-middle</span>文字</div>
  <div class="box">文字Xx<span class="top10px">x-10px</span>文字</div>
  <div class="box">文字Xx<span class="top10">x-10%</span>文字</div>
  <div class="box">文字Xx<span class="top">x-top</span>文字</div>
  <div class="box">文字Xx<span class="bottom">x-bottom</span>文字</div>
</body>

![[Pasted image 20260226161224.png]] vertical-align 的应用场景

用于控制文字与行内块元素或图片在垂直方向上的对齐方式（但实际上任没有完全居中对齐，因为图片中心是与 x 的中心

<style>
  h3 {
    height: 50px;
    background-color: #ddd;
    line-height: 50px;
  }
  .img {
    /* 元素的中线与x的中心对齐 */
    vertical-align: middle;
  }
</style>
<body>
  <h3><img src="images/fish.png" class="img" /> x我是一直可爱的小白兔</h3>
</body>

![[Pasted image 20260226161253.png]]

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

<style>
  table {
    height: 100px;
  }
  table tr td {
    border: 1px solid #000;
  }
  .baseline {
    vertical-align: baseline;
  }
  .top {
    vertical-align: top;
  }
  .middle {
    vertical-align: middle;
  }
  .bottom {
    vertical-align: bottom;
  }
</style>
<body>
  <table>
    <tr>
      <td class="baseline">baseline</td>
      <td class="top">top</td>
      <td class="middle">middle</td>
      <td class="bottom">bottom</td>
    </tr>
  </table>
</body>

![[Pasted image 20260226161322.png]]