H5+class10

今天整理笔记主要如下几点:

  • 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在隐藏上的区别

H5+class10_第1张图片
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。
    (以上经验不完善)
H5+class10_第2张图片
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

你可能感兴趣的:(H5+class10)