CSS高级——css三角图形，css用户界面样式，vertical-align的应用

一、CSS三角图形

代码：

.box1 {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left-color: black;
  /* 照顾兼容性 */
  line-height: 0;
  font-size: 0;
}

二、CSS用户界面样式

    1、鼠标样式 cursor

cursor: default | pointer | move | text | not-allowed;

    2、取消表单轮廓和文本域缩放

input {
  outline: none;
}
textarea {
  outline: none;
  resize: none;
}

三、vertical-align 的应用

vertical-align 指定行内/行内块元素的元素的垂直对齐方式。

     1、图片，表单和文字对齐 vertical-align

img {
  vertical-align: middle;
}
li {
  disaplay: inline-block;
  vertical-align: middle;
}

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

bug ：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

解决方法有两种：

1. 给图片添加 vertical—align: middle topl bottom; 等。（提倡使用的）
2. 把图片转换为块级元素 display: block；