用户界面样式(cursor,resize,vertical-align,outline,文字超出显示省略号)

1. 鼠标样式 cursor

 default: 小白(箭头)默认

 pointer:小手

 move:移动

 text:文本

 not-allowed:禁止

2. 轮廓线(表单外发光)outline

 给表单添加 outline:0;  或者 outline:none;  可以去掉默认蓝色边框

3. 防止拖拽文本域(resize)

 实际开发中 textarea 是不允许拖拽文本域的,使用 resize:none; 解决

 需要注意的是让  <textarea></textarea> 标签在一行显示,不然在文本域的输入框中 有文字空行。

4.垂直居中(vertical-align)

 常用于 设置图片 或者 表单(行内块元素)和文字垂直对齐

 官方解释:用于设置一个元素的垂直对齐方式,只针对  行内元素  或者 行内块元素 有效

 语法:vertical-align:baseline | top | middle | bottom;

 baseline:默认,元素放置在父元素的 基线 上

 top:把元素的顶端 与 行中最高元素 的顶端对齐

 middle:把此元素放置在父元素的 中部

 bottom:把元素的顶端 与 行中最低的元素 的顶端对齐

5. 解决图片底部默认空白缝隙问题

 bug:图片底部会有一个空白缝隙,原因是行内块元素 会和 文字的基线对齐

 主要解决方式两种:

  1. 给图片添加 vertical-align:middle | top | bottom 等。(提倡使用)

  2. 把图片转换为 块级元素 display:block;

6. 溢出的文字省略号显示

 1. 单行文本溢出显示省略号(必须满足三个条件)

   ① 先强制一行内显示文本:white-space:nowrap;

   ② 超出的部分隐藏:  overflow:hidden;

   ③ 文字用省略号代替超出的部分 :text-overflow:ellipsis;(ellipsis省略号)

 2.多行文本溢出显示省略号(兼容性差,适合 webkit 浏览器 或者 移动端(移动端大部分是 webkit 内核))

  更推荐让后台人原来做此效果,后台人员可以设置显示多少个字,操作更简单

   ① 超出部分隐藏 :overflow:hidden;

   ② 文字超出部分用省略号代替:text-overflow:ellipsis;

   ③ 弹性伸缩盒子模型显示:display:-webkit-box;

   ④ 限制在一个块元素显示的文本:-webkit-line-clamp:2

   ⑤ 设置或检索伸缩盒对象的子元素的排列方式:-webkit-box-orient:vertical;

上一篇:channel_v3.json


下一篇:STL 中 使用迭代器删除元素的问题