2025-10-20 Next下的CSS

1.padding、margin 内外边距

• 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%);
}

• 参数1 渐变轴方向
  0deg 从下到上
  90deg 从左到右
  180deg 从上到下
  270deg 从右到左

• 参数2 起始色以起始位置
  var(--yellow-color) 起始色； 0% 从起始点开始；10% 起始位置为渐变轴10%的位置。

• 参数3 结束色以及结束位置
  同参数2
  注意：也可以添加多个参数，如下：

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

多种颜色的渐变色通常使用比较少，不再详细解释。

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; /* 左侧边框样式 */
  border-right: 1px solid blue; /* 右侧边框样式 */
  border-top: 1px solid blue; /* 顶部边框样式 */
  border-bottom: 1px solid blue; /* 底部边框样式 */
}

5.cursor

用来提示用户该元素 可以点击，改善交互体验。
常见光标类型

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:块级元素占满整行，可设置宽高</h3>
        <div style={{ display: 'block', ...boxStyle }}>A</div>
        <div style={{ display: 'block', ...boxStyle }}>B</div>
      </section>

      {/* 2️⃣ inline */}
      <section style={{ marginBottom: 20 }}>
        <h3>inline:行内元素与文字同行，设置宽高无效</h3>
        <span style={{ display: 'inline', ...boxStyle }}>A</span>
        <span style={{ display: 'inline', ...boxStyle }}>B</span>
        <span>继续的文字</span>
      </section>

      {/* 3️⃣ inline-block */}
      <section style={{ marginBottom: 20 }}>
        <h3>inline-block:像行内元素一样排列，但可设置宽高。</h3>
        <div style={{ display: 'inline-block', ...boxStyle }}>A</div>
        <div style={{ display: 'inline-block', ...boxStyle }}>B</div>
        <span>继续的文字</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:网格布局，可指定行列。</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 类似，但在行内显示</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 类似，但在行内显示</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