前端模块化之样式初始化

在前端开发的时候，很多时候，css 的模式样式，我们不怎么常用，这个时候就需要进行重置了。

安装

yarn add phui

使用

import 'phui/reset.less'

样式重置

body

移除 body 的外边距，并且统一行高，一般开发网页的时候，都是按照100%来开发，例如手机端需要添加底部导航栏，PC端需要侧边栏菜单等等。

/* 移除 body 默认的外边距，并且统一行高 */
body {
  margin: 0;
  line-height: 1.2;
}
/* 一般开发网页的时候，都是按照100%来开发 */
html,
body {
  height: 100%;
}

img 默认空白

修复由于 inline 的时候 img 图片下方默认有空白

/* 修复由于 inline baseline 导致的图片下方的空白间隙问题 */
img {
  vertical-align: top;
}

移除列表[ul、ol]前缀

非大面积文字排版网站通常不需要列表项，如果需要可单独设置；很多时候我们使用 ul-li 的时候，都是用来排版列表的，并且大部分时候，我们是不希望前面的符合的。我们真正需要用到带符号的列表项的时候非常sha少，一般比如做隐私协议的时候可能用着，这个时候，我们可以再单独设置。

/* 非大面积文字排版网站通常不需要列表项，如果需要可单独设置 */
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

div 盒子模型

在现代网站开发中，基本统一采用盒子模型

/* 统一采用盒子模式 */
div {
  box-sizing: border-box;
}

a

现代网站开发一般是通过颜色标记为超链接，基本不再需要下划线的标记了。

/*
 * 去除链接默认的下划线，提高文字可读性
 */
a {
  text-decoration: none;
  color: #1657d9;
  cursor: pointer;
}
a:hover {
  color: #2d68dd; /* less tint(#1657d9, 10%) */
}
a:active {
  color: #3970df; /* less tint(#1657d9, 15%) */
}