二十四、CSS三角和用户界面
1.CSS三角
网页中常见一些三角形，使用 CSS直接画出来就可以，不必做成图片或者字体图标一张图，你就知道CSS 三角是怎么来的了,做法如下:
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: pink;
}
2.什么是界面样式
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验.
a.更改用户的鼠标样式
鼠标样式 cursor
li {cursor: pointer; }
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
属性值 描述
default 小白 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止
b.表单轮廓
轮廓线 outline
给表单添加outline:0;或者 outline:none; 样式之后，就可以去掉默认的蓝色边框 input {outline: none; }
c.防止表单域拖拽
防止拖拽文本域 resize
实际开发中，我们文本域右下角是不可以拖拽的. textarea{ resize: none;}
3.vertical-align 属性应用
CSS的 vertical-align 属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐官方解释:用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法:vertical-align : baseline I top I middle l bottom
值 描述
baseline 默认。元素放置在父元素的基线上
top 把元素的顶端与行中最高元素的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
图片、表单和文字对齐：
图片、表单都属于行内块元素，默认的vertical-align是基线对齐
此时可以给图片、表单这些行内块元素的vertical-aligm 属性设置为 middle 就可以让文字和图片垂直居中对齐了。
4.解决图片底部默认空白缝隙问题
**bug:图片底侧会有一个空白隙，原因是行内块元素会和文字的基线对齐
**
主要解决方法有两种：
1.给图片添加vertical-align:middle l top l bottom等。 (提倡使用的)
2.把图片转换为块级元素 display: block;
5.溢出的文字省略号显示
**a.单行文本溢出显示省略号--必须满足三个条件
**
1.先强制一行内显示文本(默认 normal 自动换行) white-space: nowrap;
2.超出的部分隐藏 overflow: hidden;
3.文字用省略号替代超出的部分 text-overflow: ellipsis;
b.多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webkit内核)
overflow: hidden;
text-overflow: ellipsis;
弹性伸缩盒子模型显示: display: -webkit-box;
限制在一个块元素显示的文本的行数: -webkit-line-clamp: 2;
设置或检索伸缩盒对象的子元素的排列方式: -webkit-box-orient: vertical;
注意：更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
6.常见布局技巧
巧妙利用一个技术更快更好的布局:
a.margin负值的运用
b.文字围绕浮动元素
c.行内块的巧妙运用
d.css三角强化
