[line-height] [a标签] [表格]

line-height

• 行高指一行文字的高度，也就是两行文字基线的距离。
  line-height属性可以控制行与行之间的垂直距离，影响行框的布局。
  应用在块级元素上，它定义了该元素中基线之间的最小距离。

• 语法line-height： normal 丨 实数 丨 长度 丨百分比 丨 inherit

| 值 | 说明|
| :------------- :|-------------|
|normal |默认，设置合理的行间距 |
| number | 设置数字，此数字会与当前字体尺寸相乘来设置行间距。相当于倍数|
| length|设置固定行间距 |
| % | 基于当前字体尺寸的百分比行间距 |
|inherit | 规定从父元素继承此属性值|

inline-block兼容性

查询工具can I use

使用can I use查询`inline-block`兼容性.jpg

a 标签href, title, target

• href指定超链接目标的 URL

• target链接打开的方式（当前窗口打开/新窗口打开）

• title指针放在链接上显示的内容

• alt元素无法加载时显示的内容

• 新窗口打开链接 target="_blank"

• 去除 a 链接的默认样式/使用a链接做按钮
  a{
  taxt-decoration: none; 使用文本装饰属性去除下划线
  color: green;
  transition： color 0.5s; 使用过渡属性产生hover渐变效果
  background： #335577； 改变背景色
  border-radius： 3px； 改变圆角直径
  }
  a：hover{
  color: pink; 使用悬停属性改变指针划过时的颜色
  }

• a 链接无继承性,需要单独设置
  直接在 a 链接父容器添加颜色，无法继承到当前 a 链接上

display: none , visibility: hidden, opacity:0 作用&区别

• display: none
  是在页面上清除元素，完全不存在，页面布局改变
• visibility: hidden
  是在页面上隐藏元素，存在不显示，页面布局不变，点击此元素无效
• opacity:0
  是在页面上隐藏元素，存在不显示，页面布局不变，点击此元素仍然有效

* 表格

• 写法
  <table>
  <tr>
  <th>第一行第一列的表头</th>
  <th>第一行第二列的表头</th>
  </tr>
  <tr>
  <td>第二行第一列的内容</td>
  <td>第二行第二列的内容</td>
  </tr>
  </table>
• 折叠边框
  table{
  border-collapse: collapse;
  }
• 框线粗细/颜色
  th, td{
  border: 10px solid: red;
  }
• 文本对齐
  th, td{
  text-align: left; center; right; 水平方向/默认居左
  vertical-align: top; center; bottom; 垂直方向/默认居中
  }
• 边内距
  th{
  padding: 10px; 四边均为10px
  }
  td{
  padding: 10px 20px; 上下为10px左右为20px
  }
• tipvertical-align仅在表格内生效→利用此属性定位元素→IE8以上适用
  div{
  width: 100px;
  height: 100px;
  display: table-cell; 以表格形式渲染此div
  vertical-align: center;
  text-align: center;
  }