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