*怎么解决css命名冲突
1.css-module
2.css in js (css封装成了组件的方式使用 不好区分哪些是css组件 哪些是业务组件)
3.react-css-modules/styleName(我们用的)
*怎么让一个元素 上下左右居中(3种)
1.display:flex;//设置flex必须要设置父元素
justify-content: center;//x轴居中
align-items:center;//y轴居中
2.position:absolute;
top:0;
right:0;
bottom:0;
left:0;
3.margin-left:-50%;
margin-top:-50%;
tranfrom:translate(-50%,-50%)
*css怎么清除浮动
1.清楚内浮动：zoom: 1; overflow: hidden
2.清楚外浮动：clear: both
*BFC渲染规则
1.BFC垂直方向的距离重叠
2.BFC是一个独立的容器，外面的元素不会影响里面的元素
*BFC触发条件
1.浮动元素(元素的float不是none)
2.绝对定位元素(元素的postion为absolute或fixed)
3.行内块元素(元素的display为inline-block)
4.overflow值不为visible的块元素 -弹性元素(display为flex或inline-flex元素的直接子元素)
*如何在页面上实现一个圆形点击区域：
border-radius
*display: none; visibility: hidden 区别：
none 完全不可见，hidden 元素不可见 但占用着空间
*css3 有哪些新特性:
transfrom, transition, animation, border-radius, box-shadow, flex, will-change, ::before, ::after, :root
*css3 新增伪类
::after, ::before, :disabled, :foucs, :checked, :root, :nth-child
*css3 动画
1.transfrom: 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;
}
}
animation:名称 执行时间 动画 延迟执行时间 执行次数
*如何美化checkbook：-webkit-appearance：none
*rgba和opacity区别：
rgba只作用于当前元素
opacity作用于所有元素
*如何使用css实现硬件加速，GPU渲染
transfrom: 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
*重绘和回流
重绘：DOM树没有元素增加或删除，只是样式的改变，针对浏览器对某一元素进行单独的渲染，这个过程就叫做重绘
回流：DOM树中的元素被增加或者删除，导致浏览器需要重新的去渲染整个DOM树，回流比重绘更消耗性能，发生回流必定重绘，重绘不一定会导致回流
引起回流
添加或者删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化(包括外边距、内边距、边框大小、高度和宽度等)
内容发生变化 文本或者图片被另一个不同尺寸的图片所代替
页面开始渲染的时候
浏览器的窗口尺寸变化(回流是根据视口的大小来计算元素的位置和大小)
引起重绘
`
color
border-style
visibility
background
text-decoration
background-image
background-position
background-repeat
outline-color
outline
outline-style
border-radius
outline-width
box-shadow
background-size
`
*css命名冲突解决方案:
1.css-module
2.css in js
3.react-css-modules
