美文网首页
css撰写细节录

css撰写细节录

作者: lavi呀 | 来源:发表于2018-09-26 10:22 被阅读0次

    开发过程中还是会遇到一些样式问题调整半天,但我觉得一个前端程序员很不应该在样式上过于浪费时间,也还是因为自己的css基础不够牢固,对css渲染的理解过于表面。以下记录一些让我浪费很多时间的css样式,以及觉得有意义的tips:

    1. 垂直居中
    1. 单行文字或图片,容器高度固定
    2. 多行文字或图片,容器高度固定
    3. 内容高度固定,容器高度不固定
      。。。等等

    2.设置滚动条样式

    1. ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
      ::-webkit-scrollbar-button 滚动条两端的按钮
      ::-webkit-scrollbar-track 外层轨道
      ::-webkit-scrollbar-track-piece 内层滚动槽
      ::-webkit-scrollbar-thumb 滚动的滑块
      ::-webkit-scrollbar-corner 边角
      ::-webkit-resizer 定义右下角拖动块的样式
    2. 插件nicescroll 查看源码 (低优先级)

    3.深入理解 vertical-align

    1. https://segmentfault.com/q/1010000007314504?_ea=1305721
    2. https://blog.csdn.net/lulujiajiawenwen/article/details/8245201
    1. 伪类和伪元素

    5.文字溢出显示省略号 纯css实现(虽然很常用但是。。)

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis

    1. 深入理解box-sizing和display
    1. display常用属性block inline-block inline 这几个应该很清楚并熟练运用
    2. 不常用的table等代表啥意思呢?了解一下并查找可能会用到的场景
    3. dispaly:flex flex布局认真看一下

    7.font-weight 为何大于600才生效?
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-weight

    相关文章

      网友评论

          本文标题:css撰写细节录

          本文链接:https://www.haomeiwen.com/subject/pcvkoftx.html