H5+class10
2017-02-24 本文已影响0人
敲出天下
今天整理笔记主要如下几点：
- input标签中通过css调整placeholder显示样式；
- visibility、display、opacity在隐藏上的区别；
- a标签伪类选择器；
- transition过渡模块；
- 2D转化模块；
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
一、input中placeholder调整首行缩进的代码样式：
input::-webkit-input-placeholder{ /*WebKit browsers*/
text-indent:34px;
/*line-height: 38px;*/
}
input::-moz-input-placeholder{ /*Mozilla Firefox*/
text-indent:34px;
/*line-height: 38px;*/
}
input::-ms-input-placeholder{ /*Internet Explorer*/
text-indent:34px;
/*line-height: 38px;*/
}
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
二、 visibility、display、opacity在隐藏上的区别
1.PNG
我们常常会看到如上的层级结构，1和3是兄弟关系，2是1子代，4是3子代，我们在hover1的时候2会出现，hover3的时候4会出现。这个时候存在如下区别：
- 如果只是简单的隐藏，出现，visibility和display没什么区别，如果给2加了特效，display方式会将特效消除，visilibity正常。
- 感觉使用opactiy不太适合这种场合使用，它能够保留特效，但是即使在2隐藏的情况下，在默认情况下，鼠标放在2上面，2也会自动将opactiy变成1，解决办法就是将3的调整成浮动流（一般是relative），然后设置Z-index>0即可。这个时候就可以在点击3的时候，在3和2的共同区域，然4显示出来，而不会让2显示出来。但是有一点需要注意：如下图，按照上面的设置，如果将鼠标停留在2的右侧，这个时候2也会跳出来，本来我们的本意是hover1的时候2才会显示，但是鼠标放在2的右侧2同样会显示出来，这是不好的一点。还有一个不好的一点，刚才2显示出来的效果会在3的背面，这个时候我们就想通过设置Z-index来讲2在显示的状态下，提高到最上层来显示，这个时候如果1和3是兄弟关系，2和4是子代关系，那么即使1和3都设置成浮动流，然后Z-index值一样，假设是4，然后设置2在1hover的情况下，Z-index=5，即使这样，2也不可能盖住3，这个时候需要将3调整成1的后代，就能将和2进行比较Z-index。
（以上经验不完善）
2.PNG
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
三、a标签伪类选择器
格式：
- :link 修改从未被访问过状态下的样式
- :visited 修改被访问过的状态下的样式
- :hover 修改鼠标悬停在a标签上状态下的样式
- :active 修改鼠标长按状态下的样式
注意：
书写顺序：爱恨原则，顺序错了会无效：爱恨原则 love hate
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
四、transition过渡模块
常见属性：
transition-property
transition-duration
transition-timing-function
transition-delay
transition-property不简写格式：
transition-property: background-color;
transition-duration: 5s;
transition-property简写格式：
transition：background-color 5s;
当有两个以上要过渡的时候：用逗号隔开；
transition-property: width, background-color;
transition-duration: 5s, 5s;
transition-timing-function的五种运动形式：
linear
ease
ease-in
ease-out
ease-in-out
以上特性都可以通过连写来完成简写：
1.过渡连写格式
transition: 过渡属性 过渡时长 运动速度 延迟时间;
2.过渡连写注意点
- 和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可
- 连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
- 如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为
transition:all 0s;
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
五、2D转化模块
- 格式（例子）：
transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5)
rotate分为rotateX、rotateY、rotateZ，相对于 - 变形中心点：
transform-origin: 0% 0%；
transform-origin: 200px 0px；
transform-origin: left top
