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

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,328评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,792评论 0 2
  • W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的...
    青春前行阅读 1,427评论 0 5
  • 3. 固定定位 固定定位脱离标准流,不会占用标准流中的空间 固定定位不区分块级,行内和行内块级元素 固定定位会让元...
    苏打丶观阅读 594评论 0 0
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,891评论 0 4