常用 CSS - daniel-qa/Vue GitHub Wiki

常用 CSS

  • 間距，不是調 margin, 就是調 padding (外距，內距)

  • 如果調不動，就是 element plus 已經寫死，要調 element plus 的參數

套用規則

margin: 10px;

  • 如果只指定 1 个值，则上下、左右的 margin 都设置为相同的值。

  • 如果指定 2 个值，第 1 个值用于上下（top 和 bottom），第 2 个值用于左右（left 和 right）。

  • 如果指定 3 个值：

第 1 个值用于 top（上）。

第 2 个值用于 left 和 right（左右相同）。

第 3 个值用于 bottom（下）。

示例：

margin: 5px 10px 15px;

margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
  • 4 个值

第 1 个值用于 top（上）。

第 2 个值用于 right（右）。

第 3 个值用于 bottom（下）。

第 4 个值用于 left（左）。

示例：

margin: 5px 10px 15px 20px;

margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;

套用預設，及使用自定義

<div class="list">
    <!-- 使用默认高度 680px -->
</div>
<div class="list" style="height: 700px;">
    <!-- 自定义高度为 700px -->
</div>

.list {
    width: 100%;
    height: 680px; /* 默认高度 */
    border: 1px solid #ccc;
    padding: 10px;
    overflow-y: auto;
}

没有 style 时：使用 .list 的默认高度（例如 height: 680px;）。

有 style 时：以 style 的值为准，覆盖默认高度。

滑鼠懸停色

  • hover
<template>
    <div>
        <div class="list-item">項目 1</div>
        <div class="list-item">項目 2</div>
        <div class="list-item">項目 3</div>
    </div>
</template>

<style scoped>
.list-item {
    padding: 10px;
    margin: 5px;
    background-color: #f5f5f5; /* 默認背景顏色 */
    cursor: pointer; /* 改變鼠標樣式 */
    transition: background-color 0.3s ease; /* 添加背景顏色變化的過渡效果 */
}

.list-item:hover {
    background-color: #e0f0ff; /* 懸停時的背景顏色 */
}
</style>

增加空白

&nbsp;

設置內置間距

padding: 5px 10px;

5px（垂直內邊距）

設置元素內容距離上邊和下邊的間距為 5px。

10px（水平內邊距）

設置元素內容距離左邊和右邊的間距為 10px。

這是 padding 的簡寫形式，分別對垂直（上下）和水平（左右）的內邊距進行設置。

強制套用

!important 是一個 CSS 關鍵字，用於強制覆蓋其他樣式規則。無論樣式的優先級如何，帶有 !important 的規則都會優先應用

.element {
  padding: 10px !important;
  color: red !important;
}

DOM 靠左

ext-align: left;

<span style="display: block; font-size: 10px; line-height: 1.2;text-align: left;">
    <el-button @click="mytest">測試</el-button>
</span>

限制文字高度

<div style="margin: 5px 0;">
  <!-- 內容放這裡 -->
</div>

margin: 5px 0; 是用來設置元素上下邊距的 CSS 屬性。

margin: 5px 0; 是一個簡寫形式，等價於：

上 右 下 左

margin-top: 5px;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;

<div class="text-content">
      <p>Column 1</p>
</div>

.text-content p {
  margin: 5px 0;
}

小按鍵

<span style="display: block; font-size: 10px; line-height: 1.2; text-align: left;">
    <el-button @click="mytest" size="mini">測試</el-button>
</span>

佔空間

<span style="display: block; font-size: 10px; line-height: 1.2; text-align: left;">
    <br>  <!-- 暫時排版用-->
</span>

邊框

  • div 加邊框
.bordered-div {
  border: 2px solid #000000; /* 邊框寬度 2px，實線，顏色為黑色 */
}

背景色

.element {
  background-color: #FFFFFF; /* 背景白色 */
}

標題

/* Card Header */
.outer-head-text {
	font-size: 23px; /* 外层卡片标题字体 */
	font-weight: bold;
	text-align: center;
	color: #333;
}

水平置中

margin: 0 auto;

<div style="width: 50vh; margin: 0 auto;">

flexbox — 使用 display: flex 和 justify-content: center

Flexbox 是一個非常強大的工具，能夠實現各種居中布局。

對父元素設置 display: flex，然後使用 justify-content: center 來實現水平方向上的居中。

.parent {
  display: flex;               /* 使父容器成為Flex容器 */
  justify-content: center;     /* 水平居中子元素 */
}

HTML：

<div class="parent">
  <div class="child">這是用Flexbox水平居中的元素</div>
</div>
  • ex: row 的 Button 置中

你可以给 el-row 添加 display: flex 并设置 justify-content: center 来使其中的按钮水平居中。

  <el-row style="height: 15vh; display: flex; justify-content: center; align-items: center;">
    <!-- 上一步按钮，触发父组件事件，将 active 设置为 0 -->
    <el-button type="primary" @click="goPreviousStep">上一步</el-button>
    <el-button type="primary" @click="goNextStep">下一步</el-button>
  </el-row>

動態高度

min-height：让容器在内容较少时看起来更统一（比如保持基本占位）。
max-height：控制内容过多时，限制高度并启用滚动条。

自動滾動 overflow

overflow 定義了當元素的內容超出其容器邊界時應如何處理，選項如下：

visible: 預設值，內容不會被剪裁，會溢出容器。

hidden: 溢出部分會被隱藏。

scroll: 始終提供滾動條（即使內容沒有超出）。

auto: 根據需要自動提供滾動條。

overflow : auto;
⚠️ **GitHub.com Fallback** ⚠️