13. 实战总结

2017-07-29 本文已影响0人 Joey的企鹅

1. Hover时位移的一个较好方案

要求：鼠标指针悬浮时既可以实现某个方向的位移，又能有个渐进效果（不那么突兀）
本人实测（由于能力有限难免会有错误之处），最好的方案是：
http://js.jirengu.com/laceg/6/edit

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="hover滑动模型" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="parent">
    <div class="child">
      <div class="box"></div>
    </div>
  </div>
</body>
</html>

.parent {
  width: 200px;
  height: 400px;
  border: 2px solid;
}
.box {
  margin-top: 200px;
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  background-color: #03a9f4;
  /* border: 1px solid #fff; */
  transition: all .5s;
}
.child {
  border: 1px solid red;
}
.child:hover .box{
  transform: translateY(-200px);
  /* margin-top: 0px; */
}

其中要点（由于能力有限难免会有错误之处）为：
1. .child:hover .box
  这个选择器很重要，如果只是按习惯写成.box:hover，会发现滑块像得了帕金森一样，狂抖。我认为这是因为鼠标悬浮位置变了，所以浏览器要重新读取数据，因此会下移再上移。故较好的解决方案是给外层的父容器设置hover，后面再选择要移动的滑块（即.child:hover .box）。
  ps:你会发现例子中你把鼠标放到方框的空白处，滑块也会移动，那是因为.child被.box的margin撑开了（红线框）。本例为了体现一些关于-margin和transform的区别，刻意多设margin，才出现了这种情况，实际问题应具体问题具体分析。就本人目前使用来看，实际没有出现这种问题。
2. transform: translateY(-200px);与负的margin
  负的margin由于存在垂直方向外边距合并问题，总会在hover位移时导致帕金森，面对这种问题，用border来分析是最好的办法。看例子中如果改用负的margin，会发现红线框一起跟着上移，这就是外边距合并的情况。本人在WOW网页实战中便碰到了这种情况！
  解决方法是使用 transform: translateY(-200px);，这个方法目前来看没什么副作用。
3. 还有个方法positon:relative;top.......但就本人目前测试来看，transition（注意是transition而不是transform）对这个属性不生效，无法实现渐进效果，故放弃。
4. transition最好别写给hover时的属性下，否则只能实现“来”时渐进，无法实现“去”时亦渐进。
综上所述
transition写给需要移动的标签的非hover态
使用hover时写给父容器，后面跟上该标签：.child:hover .box
位移使用transform: translateY(-200px);。（XY和+-均可变）

2.引入字体

推荐网站（英文字体）：http://www.googlefonts.cn/#
搜索字体后点击Quick-use,然后勾选需要的类型（粗细正斜等），然后复制link到<head>...</head>中即可。

心得：若字体用的地方比较多，设个专有class既省事，又能让代码优雅。

3. 布局

先纵观页面考虑好各个部分的同与异再进行布局是最好的。
相同的部分用统一的class进行设置。虽然之前学习过程中被强调过这点，但实际独立作业时，才发现这点有多么重要。

4. Hover时透明膜覆盖

先写个rgba背景色，opacity设置成0；
hover时，opacity设置成想要的状态。

5. Form中placeholder内的样式设置

::-webkit-input-placeholder: {
}

6. Font简写

font: style(formal/italic)——variant——weight(数字或bold)——size/line-height——family;

7. 本地添加Iconfont字体文件

下载后，把4个iconfont开头的不同格式文件放到html cssd代码所在的文件夹下，打开iconfont.css，把@声明复制过去。注意，若文件统一放到文件夹中，则要修改声明中的路径。注意路径分隔用/。
本地文件用VScode在Chrome打开后，在线iconfont链接无法使用，必须使用本地连接。

8. Github使用过程中pull不下来的问题

一般是因为没有指定当前当前工作目录工作分支，跟远程的仓库、分支之间的关系。
输入git branch --set-upstream master origin/master（对应origin master）即可。

9. 百分比高度

若一个标签写了百分比高度，那么它的各个父级都需要写上百分比高度。

10.Iconfont的字体图标

Iconfont的字体图标可以自己打开修改、微调，以使得他们在自己的web中显示的相对统一。
经验：像素拉高去放缩和位移，像素调低去观察位置。

11. 重温CSS Sprite

给需要加入sprite的标签都打上统一的class，然后在这个class的css中统一引入background-image``background-repeat: no-repeat;并且记得display: inline-block（便于行并列以及设置宽高），然后分别设置background-position即可，同时别忘了用vertical-align去调整对齐。

12. 手机端显示问题（important）

如果通栏布局，手机端显示不全，出现“滚动背景色”，可以给body设置min-width解决。

13. VIM如何删除全部内容

按Esc键切换到命令行模式
:1,$d

14. 取消外边距合并

生成块级格式化上下文。
我比较常用padding-top: 1px或者overflow: hidden，详细方法见之前文章。