CSS⾼级技巧——界⾯显⽰样式
界⾯显⽰样式
1. CSS⽤户界⾯样式
所谓的界⾯样式， 就是更改⼀些⽤户操作样式，以便提⾼更好的⽤户体验。
更改⽤户的⿏标样式 (滚动条因为兼容性⾮常差，我们不研究)
表单轮廓等。
防⽌表单域拖拽
1.1 ⿏标样式cursor
设置或检索在对象上移动的⿏标指针采⽤何种系统预定义的光标形状。
属性值描述
default⼩⽩ 默认
pointer⼩⼿
move移动
text⽂本
not-allowed禁⽌⿏标放我⾝上查看效果哦：
<ul>
<li >我是⼩⽩</li>
css鼠标点击样式<li >我是⼩⼿</li>
<li >我是移动</li>
<li >我是⽂本</li>
<li >我是⽂本</li>
</ul>
1.2 轮廓线 outline
是绘制于元素周围的⼀条线，位于边框边缘的外围，可起到突出元素的作⽤。
outline: outline-color ||outline-style || outline-width
但是我们都不关⼼可以设置多少，我们平时都是去掉的。 li
最直接的写法是 ： outline: 0; 或者 outline: none;
<input  type="text"  />
1.3 防⽌拖拽⽂本域resize
实际开发中，我们⽂本域右下⾓是不可以拖拽：
<textarea  ></textarea>
1.4 ⽤户界⾯样式总结
属性⽤途⽤途
⿏标样式更改⿏标样式cursor样式很多，重点记住 pointer
轮廓线表单默认outline outline 轮廓线，我们⼀般直接去掉，border是边框，我们会经常⽤防⽌拖拽主要针对⽂本域resize防⽌⽤户随意拖拽⽂本域，造成页⾯布局混乱，我们resize:none 2. 溢出的⽂字省略号显⽰
2.1 white-space
white-space设置或检索对象内⽂本显⽰⽅式。通常我们使⽤于强制⼀⾏显⽰内容
white-space:normal ；默认处理⽅式
white-space:nowrap ；　强制在同⼀⾏内显⽰所有⽂本，直到⽂本结束或者遭遇br标签对象才换⾏。
2.2 text-overflow ⽂字溢出
设置或检索是否使⽤⼀个省略标记（…）标⽰对象内⽂本的溢出
text-overflow : clip ；不显⽰省略标记（...），⽽是简单的裁切
text-overflow：ellipsis ；当对象内⽂本溢出时显⽰省略标记（...）
注意：
⼀定要⾸先强制⼀⾏内显⽰，再次和overflow属性 搭配使⽤
2.3 总结三步曲
/*1. 先强制⼀⾏内显⽰⽂本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. ⽂字⽤省略号替代超出的部分*/
text-overflow: ellipsis;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。