• CSS相关的复习记录-持续更新


    一:盒模型

      自内向外  content,padding,border,margin.   content代表 width; height.

      W3C默认: box-sizing: content-box .  IE 默认: box-sizing: border-box

    二:居中相关

      行内元素可以用 text-align: center; 块级元素可以使用 margin: 0 auto;

      水平居中:

      position:absolute +left:50%+ transform:translateX(-50%)

      display:flex + justify-content: center

      垂直居中:

      设置line-height 等于height, 不能写100%

      position:absolute +top:50%+ transform:translateY(-50%)

      display:flex + align-items: center

    三:比较容易被忽略的css样式

      css禁用鼠标事件:pointer-events: none; 

      css禁止用户选择: user-select: none; (可加各个内核渲染器识别)

      隔行样式: nth-child(even/odd)

      颜色渐变实现linear-gradient

      让overflow:scroll平滑滚动 :-webkit-overflow-scrolling: touch; // 移动端

    四:如何修改chomre的记住密码后自动填充的黄色背景

       input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189); /* #FAFFBD; */ background-image: none; color: rgb(0, 0, 0); }

    五:CSS 硬件加速

    当检测到某个DOM元素应用了某些CSS规则时就会自动开启

      .css {

        -webkit-transform: translate3d(0,0,0);

        -moz-transform: translate3d(0,0,0);

        -ms-transform: translate3d(0,0,0);

        transform: translate3d(0,0,0);

      }

  • 相关阅读:
    进程与线程的区别与联系
    任务、进程、线程
    类、对象、方法、实例方法、类方法
    java 泛型详解
    Java总结篇系列:Java泛型
    html+css+js 实现自动滑动轮播图
    第三篇web前端面试自我介绍(刚毕业的菜鸟)
    怎么写网站的需求文档
    在phpStudy怎么配置虚拟地址
    第二篇web前端面试自我介绍(刚毕业的菜鸟)
  • 原文地址:https://www.cnblogs.com/yasoPeng/p/12802157.html
Copyright © 2020-2023  润新知