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;//數值越大，表明在最外層；
}