CSS 的樣式 - daniel-qa/Vue GitHub Wiki

CSS 的樣式

HTML Color

調整字型

  /* 标题字體 */
  <span class="header-text">選擇發送類型</span>

 .header-text {
        font-size: 20px;  /* 增大标题字体 */
        font-weight: bold;
    }

  /* radio 按鍵字體 */  
   <el-radio label="optionA" class="radio-text">個別挑選</el-radio>
 
  .radio-text {
         font-size: 16px;  /* 增大单选框文字大小 */
  }
  • 具有 CSS Select 功能
    .radio-group .el-radio {
        margin-bottom: 50px; /* 给每个 radio 添加底部间距 */
    }

Flexbox（彈性盒子布局）

Margin

设置元素的外边距 (順序: 上 右 下 左 )

以下是几种常用的设置方法：

  • 1 . 单一值
margin: 10px;

这个设置会将元素的上下左右外边距都设置为 10px。

  • 2 . 两个值
margin: 10px 20px;

第一个值（10px）应用于上下（上和下）。

第二个值（20px）应用于左右（左和右）。

  • 3 . 三个值
margin: 10px 20px 30px;

第一个值（10px）应用于上边距。 第二个值（20px）应用于左右边距（左和右）。 第三个值（30px）应用于下边距。

  • 4 . 四个值
margin: 10px 20px 30px 40px;

第一个值（10px）应用于上边距。 第二个值（20px）应用于右边距。 第三个值（30px）应用于下边距。 第四个值（40px）应用于左边距。

  • 上 下 左 右 ，個別設定
margin-top: 10px; /* 增加上方距離 */
margin-bottom: 10px; /* 增加下方距離 */
margin-left: 20px; /* 左側距離 20px */
margin-right: 20px; /* 右側距離 20px */
  • 自動
margin-left: auto; /* 左邊距自動調整 */

< style scoped> 是 Vue.js 中的一种样式作用域策略，用于确保组件的样式只应用于该组件，而不会影响到全局或其他组件的样式。

< style> 全局样式：不使用 scoped 的样式会影响整个应用程序。适用于需要全局共享的样式。

例如：你在这段代码中定义的 .header .el-date-editor .el-range-separator 等选择器将应用于所有使用这些类的地方。

<style scoped>

.msgbox {
  width: 100%;
  padding: 1%;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  line-height: 20px;
}


</style>
⚠️ **GitHub.com Fallback** ⚠️