React常用css爬坑

前端之家收集整理的这篇文章主要介绍了React常用css爬坑前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

居中:

左右居中

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

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

vertical-align@H_403_7@: middle;@H_403_7@

去掉边框

border@H_403_7@: null@H_403_7@

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

anit design input 调整失效

<Input

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

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

自适应高度和宽度

常用伪元素:

名称 解释

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

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

.impotent

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

锚点

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

固定位置悬浮:

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

猜你在找的React相关文章