今日复习记录-CSS小技巧（重复最多的人就是天才）

CSS样式

• CSS鼠标样式

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

• CSS 三角
• 原理（自认为）：一个盒子里面三个边框都是透明，其中一个有颜色

.box{
	width:0;
	height:0;
	/*解决兼容性问题*/
	line-height:0;
	font-size:0;
	/*让盒子边框变成透明*/
	border:10px solid transparent;
	/*让其一条边框显示*/
	border-top:10px solid aqua;
	}
	

• 轮廓线 outline 给表单添加outline:0; 或者 outline：none；样式之后就可以去掉默认的蓝色边框啦
• 防止拖拽文本域 resize .textarea{ resize:none; }
• CSS 的 vertical-align 属性使用场景：经常用于图片或者表单（行内块元素）和文字垂直对齐。官方解释：用于设置一个元素的垂直对齐方式，但是他只针对于行内元素或者行内块元素有效。
• 语法：vertical-align：baseline / top / middle / bottom

值	描述
baseline	默认。元素放置在元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

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

• bug:图片低侧会有一个空白的缝隙，原因是行内块元素会和问文字的基线对齐。
• 主要解决方法有两种
• 1. 给图片添加 vertical-align:middle / top / bottom 等。（提倡使用的）
• 2. 把图片转换为块级元素 display:block;