目录
一、CSS三角的使用
1.CSS三角意义：
网页中常见的一些三角形使用CSS直接画出来就可以，不必做成图片或者字体图标。
2.CSS三角的具体使用场景：
对话框指向箭头、下拉提示框、消息提示框......
3.CSS三角的原理：
当一个盒子的宽和高都为0，但它却拥有边框，就会出现下面这种情况 ↓（附代码）
因此我们可以推知：想要获得三角形只需要把剩下三个边框都设置为透明颜色即可
（ ps：可以把边框设为不同粗细，会出现不同形状的三角形 ↓ ）
4.CSS三角的具体实现（附代码）：
注意不要忘记 “ 子绝父相 ” 的定位 ！！
5.用CSS三角实现右对话框：
（1）基本原理：把三角形装进大盒子里，用定位关系组合在一起。
（2）具体实现：
（3）效果展示：
二、 用户界面 —— 鼠标样式 cursor
1.鼠标样式的标签：
2.鼠标样式的实现：
3.各种鼠标样式的效果：
default ：默认小白 
pointer ：小手 
move ：移动 
text ：文本 
not-allowed ：禁止 
三、用户界面 —— 取消表单轮廓
1. 原理：
给表单添加 outline:0；或者 outline:none；样式之后，就可以去掉默认的蓝色边框。
2.具体实现：
3.效果展示：
未去掉边框 ↓ （好吧我的默认边框是黑色的）
去掉边框后 ↓
四、用户界面 —— 防止拖拽文本域 resize
1. 应用场景：
文本域直接设置之后是可以随意拖动的，但是实际开发中，我们文本域右下角是不可以拖拽的。
2.具体实现：
3.注意事项：
（1）文本域也有默认的边框，实际运用中也要取消表单轮廓
（2）注意要把文本域 textarea 写在一行上，因为如果代码分行写，即使其中没有内容，实际文本域里也会出现大块空白区域（如图 ↓ ）
（3）如果想在光标前面留出少许空格，可以用 padding
五、vertical-align 实现行内块和文字垂直对齐
1.应用场景：
经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
2.官方解释：
vertical-align 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
3.语法：
vertical-align ：baseline | top | middle | bottom
4.不同属性标签：
5.不同位置的线的定义：
6.图片与文字垂直居中对齐的具体实现：
六、解决图片底侧空白缝隙的方案
1.出现原因：
图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
2.主要解决方法：
（1）给图片添加 vertical-align : middle | top | bottom 等（提倡使用）
（2）把图片转换为块级元素 display : block
（不推荐使用，因为块级元素独占一行，容易影响页面布局 ↓ ）
七、单行文字溢出用省略号显示
1.默认模式：
默认是文字显示不开就自动换行（代码表示是 white-space: normal;）
2.具体实现三步骤：
（1）首先强制文字在一行内显示
（2）把溢出的文字部分隐藏
（3）把文字溢出的部分用省略号代替
八、多行文字溢出用省略号显示
1.前提：
此方法有较大兼容性问题，适合于 webKit 浏览器或移动端（移动端大部分是 webKit 内核），所以在有一些浏览器无法使用。
2.具体实现：
3.注意事项：
以上面的代码为例，想让整个框内的文字只显示2行之后是省略号，只需要改变盒子的高度即可。
4.建议：
更推荐让后台人员来做这个效果哈哈哈哈哈哈哈哈哈哈，因为后台人员可以设置显示多少个字，操作更简单。
698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
