頁面佈局的相關內容

是個小白的小李發表於2020-11-19

相對定位

開啟相對定位: 不脫離文件流。
如果把當前元素設定為脫離流的話，margin實現的水平居中失效。
由於父級容器沒有設定height屬性，父級元素出現高度塌陷的問題。
可以讓menu元素相對於當前元素設定定位，只需要為當前元素開啟定位。
注意：軟體開發的基本原則：低耦合。軟體開發最理想的狀態：零耦合。耦合度：簡單來說，就是指很多值之間的關聯大不大。

固定定位

固定定位: 設定當前元素相對於瀏覽器視窗定位。

繼承

這裡所說的繼承，指的是 CSS 中的樣式屬性的繼承。所謂繼承，就是指當前樣式屬性不僅能作用於當前的元素，還能作用於所有的後代元素。

CSS 的樣式屬性分成兩類:

  • 具有可繼承性的屬性, 比如 color 屬性

  • 不具有可繼承性的屬性, 比如 margin 屬性

層疊

在瀏覽器執行 HTML 頁面時, 最終看到的 HTML 頁面的效果, 實際上是多個樣式疊加在一起的綜合效果:

  • 瀏覽器本身對 HTML 頁面提供了一個預設樣式

  • 使用者對 HTML 頁面也可以定義樣式(比較少見)

  • 開發者對 HTML 頁面也會定義樣式

使用者定義的樣式會覆蓋瀏覽器提供的樣式, 然後開發者定義的樣式會覆蓋使用者定義的樣式。

對於我們(開發者)比較關注的:

  • 瀏覽器提供的預設樣式

  • 開發者定義的樣式

注意：即使是開發者定義的樣式: 多重樣式根據CSS選擇器的優先順序別, 判斷最終有效的哪一個。CSS選擇器的優先順序別, 存在一個例外:當將某個樣式屬性設定為 !important, 表示該屬性的級別最高。 !important吧(不建議使用)。

堆疊

堆疊: 更多指的是在開啟定位的情況下(relative)在多個脫離文件流的元素中, 通過堆疊可以設定某個元素的層級高。z-index屬性的值允許是負值, 但一般情況下不用。

兄弟關係的元素: 當這兩個元素都脫離文件流之後。後面的元素會在前面的元素的上面。

什麼是佈局

所謂的佈局, 就是 HTML 頁面的結構。實現佈局是要通過 HTML 元素和 CSS 樣式結合。佈局特別想蓋樓的時候的設計圖紙。

G1I3P@V96D0N_QO86UFF2.png

佈局的分類

目前比較流行的佈局:
  • 居中佈局: 水平方向居中佈局、垂直方向居中佈局以及水平和垂直都居中的佈局
  • 多列布局: 兩列布局和三列布局、等分佈局和等高佈局(聖盃佈局和雙飛翼佈局)
  • 全屏佈局：使用百分比。
從技術角度分化的話:
  • CSS3 新增的彈性(flex)盒子模型

  • CSS3 新增的網格(grid)佈局

根據場景不同, 也可以這樣劃分:
  • 響應式佈局: 一個 HTML 既可以在 PC 電腦端瀏覽器開啟, 也可以在移動端瀏覽器開啟
  • 移動端佈局: 在手機端或平板電腦端瀏覽器開啟

之前比較流行的佈局:

  • 聖盃佈局(三行三列布局)
  • 雙飛翼佈局(優化版的聖盃佈局, 淘寶前端團隊推出的)
  • 瀑布流佈局

實現水平局中

第一種實現水平居中的解決方案:
問題: 子級元素的文字內容同時也會居中對齊，為了實現子級元素的水平居中, 為父級元素設定額外的樣式屬性。
將實現水平方向居中效果的元素設定為inline-block:
  • 多個inline-block元素之間水平方向排列

  • inline-block元素可以設定width和height屬性的

  • inline-block元素具備inline元素的特性

text-align屬性: 原本作用是設定文字內容的對齊方式，對inline-block元素同樣有效

第二種實現水平居中的解決方案:
問題: 如果當前元素脫離了文件流, margin屬性失效了。
為當前元素設定width屬性(定寬)
使用margin屬性實現水平居中
第三種實現水平居中的解決方案:
問題:為了實現子級元素的水平居中, 為父級元素設定額外的樣式屬性。如果使用transform屬性: CSS3 新增屬性。實現水平居中時:如果使用margin-left屬性: 導致耦合度升高。
將子級元素設定為絕對定位(父級元素設定相對定位)，left設定50%和translateX()設定-50%實現水平居中。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-ryiEVTVJ-1605718076241)(https://i.loli.net/2020/06/11/lSZmDeo5CTX7UBr.png)]

margin-left屬性的值與當前元素的width屬性的值有關的
translateX()函式的50%指的是當前元素寬度的50%

垂直居中

第一種實現垂直居中:
問題: 為了實現子級元素的水平居中, 為父級元素設定額外的樣式屬性。
將父級元素設定為table-cell，在父級元素設定vertical-align屬性垂直居中。
預設作用: 設定文字內容在垂直方向的對齊方式vertical-align: middle;
table-cell值相當於HTML中的元素display: table-cell;
第二種實現垂直居中:
問題:為了實現子級元素的垂直居中, 為父級元素設定額外的樣式屬性。實現垂直居中時:如果使用margin-top屬性: 導致耦合度升高，如果使用transform屬性: CSS3 新增屬性。
將子級元素設定為絕對定位(父級元素設定相對定位)，left設定50%和translateY()設定-50%實現垂直居中。

兩列布局

所謂的兩列布局, 並不是簡單將兩個元素水平排列, 而是一列是定寬的, 另一列是自適應的。
  • 其中一列是定寬: 將該元素的寬度設定為固定的寬度
  • 其中一列是自適應: 除了定寬之外所有的寬度都為第二列
第一種兩列布局：
通過浮動和移動或遮擋實現兩列布局。
第二種兩列布局：
通過overflow: hidden;開啟·BFC: 建立出一個完全隔離的空間。
第三種兩列布局：

通過display: table;改變了父級元素的顯示型別。將外層div變成table裡面的元素轉變為表格元素。

三列布局
所謂的三列布局, 其中兩列是定寬, 另一列是自適應。劃分成以下兩種情況:
  • 定寬+定寬+自適應: 兩個定寬的列是相鄰的
  • 定寬+自適應+定寬: 兩個定寬的列不是相鄰的(自適應這一列在中間)
三列布局的第一種情況：

通過display: table;改變了父級元素的顯示型別。將外層div變成table裡面的元素轉變為表格元素。

三列布局的第二種情況：
通過margin移動遮擋達到顯示效果。改變了HTML的結構。
等分佈局
第一種實現等分佈局：

通過百分比等分效果實現。

第二種實現等分佈局：

利用表格的單元格寬度是自動分配的:每一列的內容結構保持一致。

第一種空白間隙的等分佈局：
通過border-spacing: 5px;實現。
第二種空白間隙的等分佈局：
使用padding設定左右邊距，再巢狀一層div抵消移動達到顯示效果。
第一種實現等高佈局:
通過display: table;改變了父級元素的顯示型別。
第二種實現登高佈局：
偽登高：使用padding-bottom: 9999px;強制拉成後使用overflow: hidden;截斷多餘內容。

表單

為什麼說表單在 HTML 中很重要的原因:

  • 表單是允許接收使用者輸入的資訊, 其他元素僅是用來向使用者展示資訊。

  • 在 HTML 元素中, 可以與服務端進行通訊的只有表單。

目前, 在真實的 Web 應用或網站中, 有哪些是由表單完成的:

  • 網站的使用者註冊和登入功能
  • 搜尋功能中的搜尋框
  • 寫部落格的釋出功能
<form>元素
<form>元素: 代表表單(塊級元素)作用:
  • 用來接收使用者輸入的資訊
  • 與服務端進行通訊(向服務端提交資訊)

屬性:

  • action屬性: 設定提交表單的服務端地址
  • method屬性: 設定提交表單時的請求型別；值：GET，POST。
enctype屬性: 設定表單提交時的MIME型別，主要可實現檔案上傳。

表單可以劃分兩個組成部分:

  • <form>元素: 表單的容器元素

表單元件元素: 才是真正用來接收使用者輸入的資訊

  • <input>元素: 輸入框

  • <textarea>元素: 文字域

  • <select>元素: 下拉選單

<input>元素: 空元素

屬性:

  • type屬性: 設定輸入框的型別

  • value屬性: 設定輸入框的預設值

  • disabled屬性: 設定輸入框是否可用(只設定屬性名)

  • readonly屬性: 設定輸入框是否為只讀

HTML5新增屬性

  • autofocus屬性: 設定輸入框自動獲取焦點

  • placeholder屬性: 設定輸入框的預設提示內容

用來替代value屬性為使用者展示提示資訊，輸入框型別:text: (單行)文字框，password: 密碼框(顯示與隱藏動態切換功能)，radio: 單選框，checkbox: 核取方塊，button: 按鈕，submit: 提交按鈕，reset: 重置按鈕，file: 檔案域，hidden: 隱藏域。

HTML5新增：email: 電子郵件，url: URL地址，search: 搜尋框，tel: 電話框，，，，。

單選框或核取方塊: 定義相同的name屬性值, 表示為一組，checked屬性: 表示當前單選框或核取方塊被選中。

<input type="radio" name="like" checked>html
<input type="radio" name="like">css
<input type="radio" name="like">javascript

<input type="checkbox" name="like" checked>html
<input type="checkbox" name="like">css
<input type="checkbox" name="like">javascript
<input>元素: 按鈕
  • button: 普通按鈕
  • submit: 提交按鈕(提交表單)
  • reset: 重置按鈕
<input type="button" value="按鈕">
<button>按鈕</button>
<input type="submit" value="提交">
<input type="reset" value="重置">
注意：與元素沒有關係。
檔案域: 一般用來實現檔案上傳或選擇頭像等功能：

  • 數量設定

  • 單檔案選擇: 預設情況

  • 多檔案選擇: 設定multiple

型別設定: 規定選擇檔案的型別

  • 預設: 可以選擇任何型別

  • accept屬性: 設定選擇檔案的型別
<input type="file" multiple accept="video/*">
一般用來儲存一些不想使用者知道的資料內容, 比如使用者ID
<input type="hidden">
提供了Email地址格式的驗證
<input type="email">
提供了URL地址格式的樣式(驗證不完整)
<input type="url">
搜尋框: 移動端顯示(右下角按鈕顯示"搜尋")
<input type="search">
電話框: 移動端顯示(軟鍵盤顯示數字)
<input type="tel">
date: 日期控制元件
<input type="date">
week: 星期控制元件
<input type="week">
month: 月控制元件
<input type="month">
color: 顏色控制元件
<input type="color">
number: 數字控制元件
<input type="number">
<label>元素: 一般配合元素
作用: 為某個文字框提供文字提示內容
  • 屬性:for屬性: 設定的值與元素的id屬性值一致。

輸入框的樣式

input {
      /* 用來設定輸入框的獲取焦點時的外邊框的樣式 */
      outline: none;
      /* 用來設定輸入框的邊框 */
      border: none;
      border-bottom: .5px solid lightgray;
    }
<textarea>元素: 多行文字框

屬性:

  • cols: 設定文字域的可視寬度。必須是正數, 預設值為20
  • rows: 設定文字域的可視高度。必須是正數
特點: 允許使用者調整在HTML頁面中顯示區域
/* 禁止使用者改變文字域的顯示區域 */
resize: none;
<select>元素: 下拉選單
預設情況下, 下拉單選下拉多選：
  • multiple屬性: 表示多選
  • size屬性: 設定顯示幾個選項
<select>
      <option value="beijing">北京</option>
      <option value="shanghai" selected>上海</option>
      <option value="chongqing">重慶</option>
    </select>
元素: 列表專案
屬性:selected: 設定當前專案被選中，分組: 將元素放在元素中。
<select multiple size="3">
      <option value="beijing">北京</option>
      <option value="shanghai" selected>上海</option>
      <option value="chongqing">重慶</option>
    </select>
    <select>
      <optgroup>
        <option value="html">html</option>
        <option value="css">css</option>
        <option value="javascript">javascript</option>
      </optgroup>
      <optgroup>
        <option value="html5">html5</option>
        <option value="css3" selected>css3</option>
        <option value="ecmascript6">ecmascript6</option>
      </optgroup>
    </select>

組合表單元素

<form action="#">
    <!-- 將表單元件元素進行分組 -->
    <fieldset>
      <!-- 為每個分組設定一個標題 -->
      <legend>19級啟嘉班</legend>
      <!-- 表單元件元素 -->
      <label for="username">使用者名稱: </label>
      <input type="text" id="username" placeholder="請輸入你的使用者名稱">
      <label for="password">密碼: </label>
      <input type="password" id="password">
    </fieldset>
  </form>將表單元件元素進行分組
元素與元素配合使用
  • 元素設定list屬性: 值與元素的id屬性值一致
  • ’‘元素設定id屬性
元素:
  • 作用: 提供了一組列表項
與元素的區別:
  • ’‘元素: 必須在該元素內部定義‘’元素
  • ’‘元素: 是一個獨立的列表項

允許複用的

元素: 刻度條

屬性:

  • value: 表示當前刻度的值(介於min和max之間的值)

  • min: 設定刻度的最小邊界

  • max: 設定刻度的最大邊界

  • low: 設定刻度的最小預警值

  • high: 設定刻度的最大預警值

<meter value="30" min="0" max="100" low="40" high="80"></meter>
元素: 進度條

屬性:

  • value: 表示當前進度的值

  • max: 設定進度的最大值

<progress max="100" value="70"></progress>
元素狀態偽類選擇器
/* :disabled偽類表示選中不可用的元素 */
    input:disabled {
      background-color: lightsalmon;
    }

    /* :enabled偽類表示選中可用的元素 */
    input:enabled {
      background-color: magenta;
    }

    /* :checked偽類表示選中被選中的單選框或核取方塊 */
    input:checked {
      box-shadow: 0 0 0 3px orange;
    }

HTML5新增有關表單驗證的內容:

提供一系列可用於驗證的元素或型別, 比如‘’
提供一系列用於驗證的屬性:

  • required屬性: 驗證是否為空

  • pattern屬性: 驗證與指定正規表示式是否一致

  • min屬性: 驗證是否小於最小值

  • max屬性: 驗證是否大於最大值

  • step屬性: 驗證是否符合步長

  • minlength屬性: 驗證內容的長度是否小於最小長度

  • maxlength屬性: 驗證並限制內容的長度是否大於最大長度

注意：驗證是在提交表單時進行驗證，驗證屬性一般情況需要與DOM(visibility物件)配合使用。

<form action="#">
    <input type="text" placeholder="請輸入你的使用者名稱" required>
    <input type="text" placeholder="請輸入你的地址" pattern="^[a-zA-Z0-9]{6,12}$">
    <input type="password" minlength="4" maxlength="8">
    <input type="number" min="2" max="10" step="2">
    <input type="submit" value="提交">
  </form>

相關文章