TDK优化 模块化思想 阿里巴巴矢量库 css文件引入顺序 外边距塌陷

阿里巴巴矢量库 css文件引入顺序 外边距塌陷"/>

TDK优化 模块化思想 阿里巴巴矢量库 css文件引入顺序 外边距塌陷

2020/12/31

• TDK优化

• 标题logo优化

• 模块化开发思想 结构拆分

• 阿里巴巴矢量图库 /

  • 选择图标是ui做的
  • 引入方式 推荐font class方式（点击官网“使用帮助” 有如何引入字体图标的教程）

    • 方法一：
      第一步：拷贝项目下面生成的font-face
      @font-face {font-family: ‘iconfont’;
      src: url(‘iconfont.eot’);
      src: url(‘iconfont.eot?#iefix’) format(‘embedded-opentype’),
      url(‘iconfont.woff’) format(‘woff’),
      url(‘iconfont.ttf’) format(‘truetype’),
      url(‘iconfont.svg#iconfont’) format(‘svg’);
      }
      第二步：定义使用iconfont的样式
      .iconfont{
      font-family:“iconfont” !important;
      font-size:16px;font-style:normal;
      -webkit-font-smoothing: antialiased;
      -webkit-text-stroke-width: 0.2px;
      -moz-osx-font-smoothing: grayscale;}
      第三步：挑选相应图标并获取字体编码，应用于页面
      3

    • 方法二：
      第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

			第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

- 方法三在线引入：在官网生成代码 使用引入链接的方式

• 使用在线引入方式 小缺点：不是存在本地 会有风险。
  • 开发过程中使用在线引入，上线前下载到本地。

tip:

1. css文件引入顺序：

   1.base.css 清除默认样式

   2.引入第三方的类库的css文件

   3.common.css公共样式

   4.页面自己的样式

2. 涉及到用户敏感信息的页面 是不需要seo优化的

3. 触发外边距塌陷问题解决方法：

第一种 元素加属性float：left; 浮动脱标的元素是不会触发外边距塌陷的

第二种 父元素设置overflow:hidden;

第三种 父元素设置padding;(使用了怪异盒模型不用再改宽高)