实习报告（三）

CSS部分：

一、CSS优先级：

!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默 认属性同一级别。

 

二、盒子模型：

IE盒子模型：width = border + padding +内容宽度

W3C标准盒子模型：width = 内容宽度

box-sizing：其实就是设置盒子为IE盒子还是W3C标准盒子

 

三、Position：

Static：默认状态，没有定位，正常流；

Inherit：从父元素继承position属性的值；

Fixed：生成绝对定位的元素（相对于浏览器窗口）；

Absolute：生成决定对定位的元素（相对于static定位以外的第一个父元素定位，脱离文档流）；

Relative：生成相对定位的元素（相对其正常位置定位）。

 

四、Sass：

一种css扩展语言，css预处理语言，编写时更灵活更简洁。

<div class=”box”>

<div class=”header”></div>

<div class=”content”></div>

<div class=”footer”></div>

</div>

 

.box{

.header{}

.content{}

.footer{}

}

更多请看：https://www.cnblogs.com/jerry666/p/5272530.html。

 

五、框架：

1) Mint-UI

在项目中经常会用到Mint-UI，不仅因为长得好看也因为实用和方便，富含很多常见业务的组件，如：上拉刷新、下拉刷新、弹窗、toast、单选、多选、加载动画等，是很值得学习的一个框架。

更多请看：http://mint-ui.github.io/#!/zh-cn

2) Element-UI

 

六、雪碧图

雪碧图是将多张小的png图合并到一张图片中并引入到页面。将多张图片合并到一张图片中，可以减小图片的总大小。将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。通常是在页面底部的tab切换页面中使用：

 

通过x、y定位来实现切换的动画显示。在vue中可利用router特性根据组件的name来定位雪碧图，这样更加方便简洁。

 

七、Iscroll

iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。

目前iscroll已经升级到iscroll5，但还不完善，例如它去掉了onScrollMove这个方法，这个方法去掉之后使用非常不方便，所以目前还是普遍使用iscroll4。

详情请看：http://wiki.jikexueyuan.com/project/iscroll-5/。

 

八、rem：

Rem是相对于根节点（html节点）font-size的倍数，能实现自适配终端设备的单位。

Rem与px的换算关系：