CSS高级技巧——鼠标样式，轮廓，文本域防拖拽，vertical-align 垂直对齐，文字溢出问题

2022-06-26 193

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS高级技巧——鼠标样式，轮廓，文本域防拖拽，vertical-align 垂直对齐，文字溢出问题

CSS高级技巧

CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。防止表单域拖拽

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor :  default  小白(就是普通是鼠标指针) | pointer  小手  | move  移动  |  text  文本

鼠标放我身上查看效果哦：

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
</ul>

尽量不要用hand 因为火狐不支持 pointer ie6以上都支持的尽量用

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  li {
     cursor: pointer; 让我们的鼠标样式变成小手
    /*cursor: text;  让我们的鼠标样式变成选择*/
    /*cursor: default; /* 让我们的鼠标样式小白*/
  }
  p {
    width: 100px;
    height: 100px;
    background-color: pink;
    cursor: move;  /*鼠标变成十字架样子*/
  }
  </style>
</head>
<body>
  <ul>
    <li>文字效果</li>
    <li>文字效果</li>
    <li>文字效果</li>
    <li>文字效果</li>
    <li>文字效果</li>
    <li>文字效果</li>
  </ul>
  <p></p>
  <ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
</ul>
</body>
</html>

轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

 outline : outline-color ||outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  input {
    outline: none;  /*取消轮廓线的做法*/
    border: 1px solid #ccc;
    width: 200px;
    height: 25px;
    background: url(images/s.png) no-repeat 180px center;
  }
  textarea {
    resize: none;  /*防止拖拽*/
    outline: none;  /*取消蓝色边框*/
  }
  </style>
</head>
<body>
  <input type="text">
  <textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

防止拖拽文本域resize

resize：none 这个单词可以防止火狐谷歌等浏览器随意的拖动文本域。

右下角可以拖拽：

<textarea></textarea>

右下角不可以拖拽：

<textarea  style="resize: none;"></textarea>

vertical-align 垂直对齐

以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto;

以前我们还讲过让文字居中对齐，是 text-align: center;

但是我们从来没有讲过有垂直居中的属性，我们的妈妈一直很担心我们的垂直居中怎么做。

vertical-align 垂直对齐，这个看上去很美好的一个属性，实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。

vertical-align : baseline |top |middle |bottom

设置或检索对象内容的垂直对其方式。

vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片/表单与文字的对齐。

图片、表单和文字对齐

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。默认的图片会和文字基线对齐。

去除图片底侧空白缝隙

有个很重要特性你要记住：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决的方法就是：

给img vertical-align:middle | top等等。让图片不要和基线对齐。

给img 添加 display：block; 转换为块级元素就不会存在问题了。

对齐案例

不使用方法1 2，底部就会有小空白

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  img {
    /*方法一*/
    vertical-align: middle;
    /*方法二*/
    display: block;
  }
  div {
    border: 2px solid red;
  }
  </style>
</head>
<body>
  <div>
    <img src="images/tudou.jpg" height="252" width="448" alt=""> 
    <!-- my name is 强哥 -->
  </div>
</body>
</html>

溢出的文字隐藏

word-break:自动换行

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行。

keep-all 只能在半角空格或连字符处换行。

主要处理英文单词

white-space

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

normal : 默认处理方式

nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

可以处理中文

text-overflow 文字溢出

text-overflow : clip | ellipsis

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

clip : 不显示省略标记（…），而是简单的裁切

ellipsis : 当对象内文本溢出时显示省略标记（…）

注意一定要首先强制一行内显示，再次和overflow属性搭配使用

溢出案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      /*overflow: hidden;  溢出隐藏*/
      overflow: scroll;  /*scroll 滚动条 */
      overflow: auto;  /*auto 自动  */
    }
  </style>
</head>
<body>
  <div>
    溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
    溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
    溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
    溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
    溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
    溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
    溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
    溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
    溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
    溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
    溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
    溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
    溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
  </div>
</body>
</html>

案例：溢出文字变省略号

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    padding: 30px;
  }
  li {
    list-style: none;
    width: 200px;
    height: 30px;
    border: 1px solid pink;
    white-space: nowrap;
    /*1.强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行*/
    overflow: hidden;  /* 2. 超出的部分 隐藏*/
    text-overflow: ellipsis;  /* 3. 溢出的部分用省略号替代*/
    line-height: 30px;
  }
  </style>
</head>
<body>
  <ul>
    <li>文字内容文字内容文字内容文字内容文字内容</li>
  <li>文字内容文字内容文字内容文字内容文字内容</li>
  <li>文字内容文字内容文字内容文字内容文字内容</li>
  <li>文字内容文字内容文字内容文字内容文字内容</li>
  <li>文字内容文字内容文字内容文字内容文字内容</li>
  </ul>
</body>
</html>