CSS - 界面样式

---

前言

所谓的界面样式, 就是更改一些用户操作样式.

一、更改用户的鼠标样式

语法

li {cursor: pointer;}

属性

• default : 默认
• pointer : 小手
• move : 移动
• text : 文本
• not-allowed : 禁止
• url(./鼠标样式图) : 修改鼠标样式

二、表单轮廓线

给表单添加 outline: 0; 或者 outline: none; 样式, 就可以去掉默认的蓝色边框.

三、防止拖拽文本域

textarea{ resize: nonel; }

四、vertical-align属性应用

经常用于设置图片或者表单和文字垂直对齐. 只针对行内元素或者行内块元素有效.

语法

vertical-align: baseline | top | middle | bottom

属性

• baseline : 默认
• top : 把元素的顶端与行中最高元素的顶端对齐
• middle : 把此元素放置在父元素的中部.
• bottom : 把元素的顶端与行中最低的元素的顶端对齐.

五、图片底侧空白缝隙解决

原因 : 图片默认是和文字的基线对齐

解决方案

1. 给图片添加 vertical-align: middle | top | bottom 等.
2. 把图片转换为块级元素

六、溢出的文字省略号显示

单行溢出的文字省略号显示

/* 1. 先强制一行内显示文本 */
white-space: nowrap;
/* 2. 超出的部分隐藏 */
overflow: hidden;
/* 3. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

多行溢出的文字省略号显示

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;