6.补充 color 和 size 属性

前面为 button 数组添加了 color 和 size 属性，现在我们来补充 color 和 size 属性

我们经常在表单等看到如下的确认和取消的按钮

他们是两种样式，取消按钮我们将其设为默认样式。

1.默认 button 样式

我们按照css 盒模型的顺序添加 css样式，同时为了在所有浏览器都保持一致。

大部分的样式我们都需设置，避免浏览器的默认样式不一致使页面表现不一致。

• box

1. button应该表现为行内块，可以设置宽高，但多个button不换行。
2. 给button整体设置个过渡效果持续时间，这样用户有如激活等行为可以在样式上有渐变，用户会有更好的体验。

.button {
  display: inline-block;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transtion: .5s;
  transition: .5s;
}

• margin

1. 我们让用户自己可以设置 margin，初始设为 0

.button {
  margin: 0;
}

• outline

1. outline 是border周围呈现的样式

.button {
  outline: 0;
}

• border + padding + content

1. 通过设置为行内块元素我们可以指定宽高,但宽高我们可以指定为border、padding和content的总和，也可以指定为content的值。前者是IE的异怪异盒模型，后者是W3C标准盒模型。通过设置box-sizing属性实现。
2. 当用户将鼠标移入border及内时，我们希望鼠标有变化来提醒用户可以点击，如变成手指点击形状（👆）。通过设置cursor属性实现。

.button {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor:pointer;
}

• background

1. 元素的背景一般是content + padding + border，但是我们依然可以修改背景的影响范围

.button {
  background: #FFF;
  background-clip: padding-box;
}

•  border

1. border 边框线有 线宽 线型 颜色 圆角等属性

.button {
  border: 1px solid #DCDFE6;
  border-radius: 4px;
}

• padding

1. padding 内边距如果是一个值则所有的为该值；如果为两个值则前一个值代表上下，后一个值代表左右；如果为三个值则第一个值代表上，第二个值代表左右，第三个值代表下；如果为四个值则分别表示上、右、下、左。

.button {
  padding: 12px 20px;
}

• content

1. content 内容可以有text、image等。我们希望用户不能选中内容，你也可以设置为文本可以选中，或全部可以选中。
2. 添加!important将样式的权重提到最高，避免被浏览器样式覆盖。

.button {
  -webkit-user-select: none!important;
  -moz-user-select: none!important;
  -ms-user-select: none!important;
  user-select: none!important;
}

• text

1. 对于文本需要设置其颜色、行高、是否换行、对齐方式等等

.button {
  color: #606266;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}

• font

1. 文本中还需要设置字体，一般需要设置字高和粗细

.button {
  font-size: 14px;
  font-weight: 500;
}

 2. 应用 class

我们在 button 标签内添加 class 属性为 button。

现在所有的 button 的 class 属性都将具有 button 值，如果给元素加入新的 class，属性名相同的新 class 样式会覆盖 button class 中的样式 ，但元素的 class 属性的属性值不会覆盖只会添加。

<button class="button">
  <slot></slot>
</button>