CSS 汇总

CSS 计算 calc

calc 支持 + - * /

CSS 变量

CSS 以 -- 作为命名前缀 , 用 var() 去引用
一般通过 :root 伪类中声明变量
注意: 声明的变量需要在同一个作用域内才能生效

attr 属性

通过 padding-bottom 设置宽高等比例缩放

让 padding-bottom 把盒子撑起来
padding-bottom 的百分比 即为盒子宽度的百分比
子盒子绝对定位 并 设置子盒子宽和高为 100%

省略显示文本溢出...

单行

多行(方案1)

多行(方案2)

垂直居中

文本居中

图片居中

flex

定位居中

自定义滚动条

自适应的输入框

通过CSS来实现输入框的自适应

大致思路：
给输入框一个绝对定位，让其宽度继承父盒子的宽度，父盒子的宽度由占位子盒子的宽度撑起
占位子盒子和输入框的文本格式和盒模型保持一致
输入框的文本同步到占位子盒子内