1.padding、margin 內(nèi)外邊距

• 4個值

.container {
  padding: 40px 10px 40px 30px;
}

順序:上40、右10、下40、左30

• 3個值

.container {
  padding: 40px 10px 30px；
}

順序:上40、左右10、下30

• 2個值

.container {
  padding: 40px 10px；
}

順序:上下40、左右10

• 1個值

.container {
  padding: 40px;
}

順序:上下左右都是40
注意：
1.margin同理;
2.padding-left,padding-right,padding-top,padding-bottom表示單個方向的邊距

2.linear-gradient 線性漸變色

.container {
  background: linear-gradient(180deg, var(--yellow-color) 0%, var(--white-color) 100%);
}

• 參數(shù)1 漸變軸方向
  0deg 從下到上
  90deg 從左到右
  180deg 從上到下
  270deg 從右到左

• 參數(shù)2 起始色以起始位置
  var(--yellow-color) 起始色； 0% 從起始點開始；10% 起始位置為漸變軸10%的位置。

• 參數(shù)3 結(jié)束色以及結(jié)束位置
  同參數(shù)2
  注意：也可以添加多個參數(shù)，如下：

.container {
  background: linear-gradient(180deg, var(--yellow-color) 0%, var(--white-color) 50%,blue 100%);
}

多種顏色的漸變色通常使用比較少，不再詳細(xì)解釋。

3.邊框角度

.container {
  border-radius: 10px; /* 4個角角度 */
  border-top-left-radius: 10px; /* 左上角角度 */
  border-top-right-radius: 10px; /* 右上角角度 */
  border-bottom-left-radius: 10px; /* 左下角角度 */
  border-bottom-right-radius: 10px; /* 右下角角度 */
}

4.邊框樣式

.container {
  border:1px solid blue; /* 邊框樣式 */
  border-left: 1px solid blue; /* 左側(cè)邊框樣式 */
  border-right: 1px solid blue; /* 右側(cè)邊框樣式 */
  border-top: 1px solid blue; /* 頂部邊框樣式 */
  border-bottom: 1px solid blue; /* 底部邊框樣式 */
}

5.cursor

用來提示用戶該元素 可以點擊，改善交互體驗。
常見光標(biāo)類型

6.display

export default function DisplayExample() {
  const boxStyle :React.CSSProperties = {
    background: 'skyblue',
    border: '1px solid gray',
    textAlign: 'center',
    lineHeight: '60px',
    margin: 4,
  };

  return (
    <div style={{ padding: 20 }}>
      {/* 1?? block */}
      <section style={{ marginBottom: 20 }}>
        <h3>block:塊級元素占滿整行，可設(shè)置寬高</h3>
        <div style={{ display: 'block', ...boxStyle }}>A</div>
        <div style={{ display: 'block', ...boxStyle }}>B</div>
      </section>

      {/* 2?? inline */}
      <section style={{ marginBottom: 20 }}>
        <h3>inline:行內(nèi)元素與文字同行，設(shè)置寬高無效</h3>
        <span style={{ display: 'inline', ...boxStyle }}>A</span>
        <span style={{ display: 'inline', ...boxStyle }}>B</span>
        <span>繼續(xù)的文字</span>
      </section>

      {/* 3?? inline-block */}
      <section style={{ marginBottom: 20 }}>
        <h3>inline-block:像行內(nèi)元素一樣排列，但可設(shè)置寬高。</h3>
        <div style={{ display: 'inline-block', ...boxStyle }}>A</div>
        <div style={{ display: 'inline-block', ...boxStyle }}>B</div>
        <span>繼續(xù)的文字</span>
      </section>

      {/* 4?? flex */}
      <section style={{ marginBottom: 20 }}>
        <h3>flex:彈性布局，子元素自動橫向排列</h3>
        <div style={{ display: 'flex', gap: 10 }}>
          <div style={boxStyle}>A</div>
          <div style={boxStyle}>B</div>
          <div style={boxStyle}>C</div>
        </div>
      </section>

      {/* 5?? grid */}
      <section style={{ marginBottom: 20 }}>
        <h3>grid:網(wǎng)格布局，可指定行列。</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
          <div style={boxStyle}>A</div>
          <div style={boxStyle}>B</div>
          <div style={boxStyle}>C</div>
          <div style={boxStyle}>D</div>
        </div>
      </section>

      {/* 6?? none */}
      <section style={{ marginBottom: 20 }}>
        <h3>none:隱藏元素，不占空間</h3>
        <div style={{ display: 'none', ...boxStyle }}>A</div>
        <div style={boxStyle}>B</div>
      </section>

      {/* 7?? contents */}
      <section style={{ marginBottom: 20 }}>
        <h3>contents:“消失”父容器，只保留子元素</h3>
        <div style={{ background: 'lightgray', padding: 10 }}>
          <div style={{ display: 'contents' }}>
            <span style={{ background: 'lightpink', padding: 10 }}>A</span>
            <span style={{ background: 'lightblue', padding: 10 }}>B</span>
          </div>
          <span style={{ background: 'lightgreen', padding: 10 }}>C</span>
        </div>
      </section>

      {/* 8?? inline-flex */}
      <section style={{ marginBottom: 20 }}>
        <h3>inline-flex:與 flex 類似，但在行內(nèi)顯示</h3>
        <div style={{ display: 'inline-flex', gap: 10, background: 'lightyellow', padding: 10 }}>
          <div style={boxStyle}>A</div>
          <div style={boxStyle}>B</div>
        </div>
      </section>

      {/* 9?? inline-grid */}
      <section style={{ marginBottom: 20 }}>
        <h3>inline-grid:與 grid 類似，但在行內(nèi)顯示</h3>
        <div style={{ display: 'inline-grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <div style={boxStyle}>A</div>
          <div style={boxStyle}>B</div>
        </div>
      </section>

      {/* ?? table */}
      <section>
        <h3>table:表單布局</h3>
        <div style={{ display: 'table', border: '1px solid black' }}>
          <div style={{ display: 'table-row' }}>
            <div style={{ display: 'table-cell', ...boxStyle }}>A</div>
            <div style={{ display: 'table-cell', ...boxStyle }}>B</div>
          </div>
        </div>
      </section>
    </div>
  );
}

7.object-fit

.cardImage {
  height: 207px;
  object-fit: contain;
}

作用類似于Flutter中的fit

8.white-space