亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

作業(yè)內(nèi)容：

1. 實(shí)例演示表單中常用的”狀態(tài)偽類”, 盡量選擇課堂上未提及的
2. 實(shí)例演示盒模型的五個(gè)核心屬性,并描述padding、margin的簡(jiǎn)記規(guī)則

狀態(tài)偽類

html

    <form action="">
      <fieldset>
        <legend>用戶注冊(cè)</legend>
        <!-- ? autofocus: 布爾屬性,自動(dòng)獲取焦點(diǎn) -->
        <input type="text" id="username" name="username" placeholder="用戶名" required autofocus />
        <input type="email" id="email" name="email" placeholder="郵箱" required />
        <input type="password" id="password" name="password" placeholder="密碼" required readonly/>
        <!-- ? 復(fù)選框默認(rèn)是選中狀態(tài): checked -->
        <div>
          <input type="checkbox" id="rem" name="remember" checked />
          <label for="rem">記住我</label>
        </div>
        <button>提交</button>
      </fieldset>
    </form>

:invalid

input:invalid {
  background-color: red;
}

效果

:read-only

input:read-only {
  background-color: red;
}

效果

:required

input:required {
  background-color: red;
}

效果

盒模型的五朵金花

盒模型五個(gè)核心屬性：

1. width: 寬度
2. height: 高度
3. padding: 內(nèi)邊距
4. border: 邊框
5. margin: 外邊距

html

<div class="box1"></div>
<div class="box2"></div>

css

.box1 {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 2px solid red;
  margin: 10px;
  box-sizing: border-box;
  background-clip: content-box;
  background-color: yellow;
}
.box2 {
  margin: 20px;
  width: 200px;
  height: 200px;  
  padding: 20px;
  border: 2px dashed red;
  background-clip: content-box;
  background-color: aqua;
}

效果和解釋

兩個(gè)div，中間顏色填充的部分是content區(qū)域，最外層的紅色實(shí)線和虛線是border，由border屬性控制。border和content之間的空白處是padding。

第一個(gè)div，由于設(shè)置了box-sizing: border-box;，width/height屬性值是content區(qū)域的width/height+左右/上下padding+左右/上下border。因此content的width/height=100-20-4=76。

第二個(gè)div，由于沒有設(shè)置box-sizing: border-box;，width和height屬性設(shè)置的是content區(qū)域的width和height。因此，審查元素時(shí)，顯示的是content的widht/height(200) + 左右/上下padding(40) + 左右/上下border(4) = 244.

簡(jiǎn)記規(guī)則

      /* 盒模型屬性的順序 */
      /* 順時(shí)針方向 */
      .box {
        /* 邊框是可視屬性,除了寬高, 還可以設(shè)置樣式, 顏色 */
        border: 5px dashed red;
        /* 如果同時(shí)設(shè)置四個(gè)方向,而四個(gè)方向值各不相同,則必須全部寫齊了 */
        /* 規(guī)則順序: 上,右,下,左, 就是手表的順時(shí)針 */
        /* 四值: 上, 右, 下, 左 */
        padding: 5px 10px 15px 20px;
        /* 三值: 上, 左右, 下 */
        padding: 5px 10px 15px;
        /* 雙值: 上下, 左右 */
        padding: 5px 10px;
        /* 單值: 上下左中全相等 */
        padding: 10px;
        /* 三值,雙值記憶方法: 只要出現(xiàn)在第二個(gè)參數(shù)位置上,就必然代表"左右"   */
        /* margin 的規(guī)則 padding 是一樣的 */
        /* border 是不存在以上的簡(jiǎn)化縮寫 */
      }

四值: 上, 右, 下, 左
三值: 上, 左右, 下
雙值: 上下, 左右
單值: 上下左中全相等
三值、雙值記憶方法: 只要出現(xiàn)在第二個(gè)參數(shù)位置上,就必然代表”左右”

批改老師：PHPz

批改狀態(tài)：合格

老師批語：完成的非常好，條理清晰，功能完整。繼續(xù)加油