React常用css爬坑

居中：

左右居中

//文本或图片等内容物居中
 text-align: center;
//块居中
margin:0 auto;
父级
{
  text-align: center;
}
子级
{
  display:inline-block;
}

垂直居中
高度需要使用 line-height: 30px;的情况下

vertical-align: middle;

去掉边框

border: null

元素使用
场景：a标签有个效果，鼠标放上去颜色会变暗。效果不好需要修改。

anit design input 调整失效

  <Input

              className="input-bottom"
              placeholder="请输入问题描述"
              type="textarea"
              rows={7}
            />

可以在样式里加入 resize: none;

自适应高度和宽度

常用伪元素：

名称 解释

 :before 在元素内容的前面插入内容 
 :after 在元素内容的后面插入内容
 :hover 当鼠标悬浮在元素上方的 
 :focus 当鼠标聚焦在该元素上时 

举例 鼠标移动到标签会有默认的效果，若要修改可使用：hover

.impotent

如果
{
  color:red;
}
没有生效，原因是被其他color代码段覆盖时，使用
{
  color:red !impotent;//可以理解为相同代码彼此影响的情况下，以impotent为主；
}

锚点

//锚点区域
<div  id="tab"/>
//触发区域
<a  href="#tab"/>
//当点击a链接时，页面会聚焦到锚点区域

固定位置悬浮：

{
    position: fixed;//生成绝对定位的元素，相对于浏览器窗口进行定位。
    top: 10px;
    left:10px;
    right: 17px;
    bottom:10px;
    z-index: 100;//数值越大，表明在最外层；
}