开发过程中还是会遇到一些样式问题调整半天,但我觉得一个前端程序员很不应该在样式上过于浪费时间,也还是因为自己的css基础不够牢固,对css渲染的理解过于表面。以下记录一些让我浪费很多时间的css样式,以及觉得有意义的tips:
- 垂直居中
- 单行文字或图片,容器高度固定
- 多行文字或图片,容器高度固定
- 内容高度固定,容器高度不固定
。。。等等
2.设置滚动条样式
- ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式- 插件nicescroll 查看源码 (低优先级)
3.深入理解 vertical-align
- 伪类和伪元素
5.文字溢出显示省略号 纯css实现(虽然很常用但是。。)
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis
- 深入理解box-sizing和display
- display常用属性block inline-block inline 这几个应该很清楚并熟练运用
- 不常用的table等代表啥意思呢?了解一下并查找可能会用到的场景
- dispaly:flex flex布局认真看一下
7.font-weight 为何大于600才生效?
https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-weight
网友评论