From 942ea6b635769bf30eeef3dafdf1933b5107b481 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sat, 25 Apr 2020 10:58:44 +0800
Subject: [PATCH] docs: improve format

---
 docs/markdown/theme.md        | 14 +++++++-------
 packages/common/README.md     | 22 +++++++++++-----------
 packages/divider/README.md    | 15 +++++++++------
 packages/field/README.md      |  3 ++-
 packages/submit-bar/README.md |  2 +-
 packages/tabs/index.less      |  5 ++---
 6 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/docs/markdown/theme.md b/docs/markdown/theme.md
index a12c243c..ae96451b 100644
--- a/docs/markdown/theme.md
+++ b/docs/markdown/theme.md
@@ -2,13 +2,13 @@
 
 ### 背景知识
 
-小程序基于 [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn) 来实现自定义组件，所以 Vant Weapp 使用与之配套的 [Css 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。
+小程序基于 [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn) 来实现自定义组件，所以 Vant Weapp 使用与之配套的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。
 
-Css 变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=css-variables) 查看。对于不支持 Css 变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。
+CSS 变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=css-variables) 查看。对于不支持 CSS 变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。
 
 ### 样式变量
 
-定制使用的 Css 变量 与 Less 变量 同名，下面是一些基本的样式变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less)。
+定制使用的 CSS 变量 与 Less 变量 同名，下面是一些基本的样式变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less)。
 
 ```less
 // Component Colors
@@ -23,7 +23,7 @@ Css 变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=css-va
 
 ### 定制单个组件的主题样式
 
-> 在 wxss 中为组件设置 Css 变量
+> 在 wxss 中为组件设置 CSS 变量
 
 ```html
 <van-button class="my-button">
@@ -38,7 +38,7 @@ Css 变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=css-va
 }
 ```
 
-> 或通过 style 属性来设置 Css 变量，这使你能够轻松实现主题的动态切换
+> 或通过 style 属性来设置 CSS 变量，这使你能够轻松实现主题的动态切换
 
 ```html
 <van-button style="{{ buttonStyle }}">
@@ -70,7 +70,7 @@ Page({
 
 ### 定制多个组件的主题样式
 
-> 与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 Css 变量 设置在 container 节点上
+> 与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 CSS 变量 设置在 container 节点上
 
 ```html
 <view class="container">
@@ -103,7 +103,7 @@ Page({
 
 ### 定制全局主题样式
 
-> 在 app.wxss 中，写入 Css 变量，即可对全局生效
+> 在 app.wxss 中，写入 CSS 变量，即可对全局生效
 
 ```less
 page {
diff --git a/packages/common/README.md b/packages/common/README.md
index 0fbfcfc1..37f4ff44 100644
--- a/packages/common/README.md
+++ b/packages/common/README.md
@@ -18,27 +18,27 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
 
 当文本内容长度超过容器最大宽度时，自动省略多余的文本。
 
-```html
-<view class="van-ellipsis"
-  >这是一段宽度限制 250px 的文字，后面的内容会省略</view
->
+```xml
+<view class="van-ellipsis">
+  这是一段宽度限制 250px 的文字，后面的内容会省略
+</view>
 
 <!-- 最多显示两行 -->
-<view class="van-multi-ellipsis--l2"
-  >这是一段最多显示两行的文字，后面的内容会省略</view
->
+<view class="van-multi-ellipsis--l2">
+  这是一段最多显示两行的文字，后面的内容会省略
+</view>
 
 <!-- 最多显示三行 -->
-<view class="van-multi-ellipsis--l3"
-  >这是一段最多显示三行的文字，后面的内容会省略</view
->
+<view class="van-multi-ellipsis--l3">
+  这是一段最多显示三行的文字，后面的内容会省略
+</view>
 ```
 
 ### 1px 边框
 
 为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。
 
-```html
+```xml
 <!-- 上边框 -->
 <view class="van-hairline--top"></view>
 
diff --git a/packages/divider/README.md b/packages/divider/README.md
index 1f38b89d..d6a700ac 100644
--- a/packages/divider/README.md
+++ b/packages/divider/README.md
@@ -48,10 +48,12 @@
 
 ```html
 <van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>
-<van-divider contentPosition="center" borderColor="#1989fa"
-  >border颜色</van-divider
->
-<van-divider contentPosition="center" fontSize="18">字体大小</van-divider>
+<van-divider contentPosition="center" borderColor="#1989fa">
+  border 颜色
+</van-divider>
+<van-divider contentPosition="center" fontSize="18">
+  字体大小
+</van-divider>
 ```
 
 ### 自定义样式
@@ -59,9 +61,10 @@
 ```html
 <van-divider
   contentPosition="center"
-  customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
-  >文本</van-divider
+  customStyle="color: #1989fa; border-color: #1989fa; font-size: 18px;"
 >
+  文本
+</van-divider>
 ```
 
 ## API
diff --git a/packages/field/README.md b/packages/field/README.md
index 27ca60ee..7effe7fe 100644
--- a/packages/field/README.md
+++ b/packages/field/README.md
@@ -163,7 +163,8 @@ Page({
 
 ### 真机上为什么会出现聚焦时 placeholder 加粗、闪烁的现象？
 
-由于微信小程序的 input 组件和 textarea 组件是原生组件，聚焦时会将原生的输入框覆盖在对应位置上，导致了这个现象的产生。相关的讨论可以查看[微信开放社区](https://developers.weixin.qq.com/community/search?query=placeholder%20%E9%97%AA%E7%83%81%20%E5%8A%A0%E7%B2%97)
+- 由于微信小程序的 input 组件和 textarea 组件是原生组件，聚焦时会将原生的输入框覆盖在对应位置上，导致了这个现象的产生。
+- 相关的讨论可以查看[微信开放社区](https://developers.weixin.qq.com/community/search?query=placeholder%20%E9%97%AA%E7%83%81%20%E5%8A%A0%E7%B2%97)
 
 ### 真机上 placeholder 为什么会盖过 popup 等其它组件？
 
diff --git a/packages/submit-bar/README.md b/packages/submit-bar/README.md
index e7a5167f..aba9cc3c 100644
--- a/packages/submit-bar/README.md
+++ b/packages/submit-bar/README.md
@@ -62,7 +62,7 @@
   tip="{{ true }}"
 >
   <van-tag type="primary">标签</van-tag>
-  <view slot="tip"> 您的收货地址不支持同城送, <text>修改地址</text> </view>
+  <view slot="tip">您的收货地址不支持同城送, <text>修改地址</text></view>
 </van-submit-bar>
 ```
 
diff --git a/packages/tabs/index.less b/packages/tabs/index.less
index ea1eddd3..af80fdad 100644
--- a/packages/tabs/index.less
+++ b/packages/tabs/index.less
@@ -21,9 +21,8 @@
 
     &--line {
       box-sizing: content-box;
-      height: calc(
-        100% + 15px
-      ); /* 15px padding to hide scrollbar in mobile safari */
+      // 15px padding to hide scrollbar in mobile safari
+      height: calc(100% + 15px);
     }
 
     &--card {