怎么解决css命名冲突
有三种解决方案
1.css-model
2.css in js (css封装成组件的方式使用 弊端：不好区分那哪些是css组件 哪些是业务组件)
3.react-css-modules / styleName
如何让一个元素 上下左右居中
有三种解决方案
1.display:flex; justify-content:center; align-items:center;
2.position:absolute; top:0; right:0; bottom:0; left:0; margin: auto;
3.margin-left:-50%; margin-top:-50%； transform：translate(-50%,-50%);
display:none; visibility: hidden ; 区别
none 完全不可见 ，hidden 元素不可见 但占用着空间
css新特性
transform,transition,animation,border-radius,box-shadow,flex,will-change,::before,::after,columns,:root
css 新增伪类
::after,::before,::disabled,::focus,::checked,::root,::nth-child
css 动画
1.transform:translate(移动) rotate(旋转) scale(缩放) translate(x,y) 移动 translateX(x) translateY(y) translate3D(x,y,z) 使用它有伪GPU加速
2.transition:css属性 执行时间 动画效果 延迟几秒执行
3.animation:
@keyframes 名称{ 0% { margin-left:100px; width:100px; } 40% { margin-left:0; width:200px; } 100% { margin-left:0; width:200px; } }
rgba和opacity 区别
rgba 只作用于当前元素
opacity 作用于所有元素
如何使用css实现硬件加速，GPU渲染
transform:translate3D(100,0,0): 写上Z轴 会使用伪GPU渲染
will-change:绝对的GPU渲染
flex
flex-direction:设置主轴方向
justify-content:伸缩项目在主轴上的对齐方式
align-items:伸缩项目在侧轴上的对齐方式(对单行对齐进行控制)
columns :列数和列宽
column-count:列数
column-width:宽度(宽度和列数都有的情况以下列数为准)
column-gap:列间距(类似margin)
column-rule:设置列之间的样式
如何截取多行文字
display:-webkit-box;
overflow-hidden;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
position 有哪些属性:
absolute,sticky(粘性定位),fixed,relative
