/*
  檔案功能：_layout.css
  被引用目的：版型與空間配置，例如 container、欄位、主內容、側欄、頁首與頁尾排列。
  編寫安排：以模組化方式集中管理相關 class，讓 style.css 可以用 @import 組合多個小檔案，避免所有樣式混在單一大檔中。
  與 HTML 的關係：HTML 先使用語意清楚的 class 名稱，本檔再針對這些 class 定義可重複使用的視覺規則。
*/

/*container*/
.container-fluid,
/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.container {
  /* 設定左側外距。 */
  margin-left: auto;
  /* 設定右側外距。 */
  margin-right: auto;
  /* 設定定位方式，讓元素可進行相對、絕對或固定定位。 */
  position: relative;
  /* 設定左側內距。 */
  padding-left: 15px;
  /* 設定右側內距。 */
  padding-right: 15px;}

/* 設定 CSS 屬性 .container-fluid，用來微調版面或視覺表現。 */
.container-fluid:after,
/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
.container:after {
  /* 設定 CSS 屬性 content，用來微調版面或視覺表現。 */
  content: "";
  /* 設定元素顯示模式，例如 block、inline-block、flex。 */
  display: block;
  /* 清除浮動效果，避免後續區塊被浮動元素影響。 */
  clear: both;}

/* 媒體查詢，依螢幕寬度調整響應式版面。 */
@media (min-width: 768px) {
  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .container {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 720px;  }}

/* 媒體查詢，依螢幕寬度調整響應式版面。 */
@media (min-width: 992px) {
  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .container {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 920px;  }}

/* 媒體查詢，依螢幕寬度調整響應式版面。 */
@media (min-width: 1200px) {
  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .container {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 1100px;  }}

/* 媒體查詢，依螢幕寬度調整響應式版面。 */
@media (min-width: 768px) {
  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .content {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 68%;
    /* 讓元素向左或向右浮動，是早期欄位排版的重要方法。 */
    float: left;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .sidebar {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 32%;
    /* 讓元素向左或向右浮動，是早期欄位排版的重要方法。 */
    float: left;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .sidebar ~ .sidebar {
    /* 讓元素向左或向右浮動，是早期欄位排版的重要方法。 */
    float: right;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .sidebar + .content {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 36%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .content:last-child {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 68%;  }

  /* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
  .content:only-child {
    /* 設定元素寬度，是版型與欄位比例的基礎。 */
    width: 100%;  }}
