1021作业

作业内容：

1. 实例演示表单中常用的”状态伪类”, 尽量选择课堂上未提及的
2. 实例演示盒模型的五个核心属性,并描述padding、margin的简记规则

状态伪类

选择器	功能描述
E:focused	选择表单中获得焦点的元素
E:checked	选择表单中被选中的radio或者checkbox元素
E:enabled	选择表单中可用的元素
E:disabled	选择表单中不可用（即被禁用）的元素
E:valid	选择表单中填写的内容符合要求的元素
E:invalid	选择表单中填写的内容不符合要求的元素，如非法的URL或E-Mail，或与 pattern 属性给出的模式不匹配
E:in-range	选择表单中输入的数字在有效范围内的元素
E:out-of-range	选择表单中输入的数字超出有效范围的元素
E:required	选择表单中必填的元素
E:optional	选择表单中允许使用required属性，且未指定为required的元素
E:read-only	选择表单中状态为只读的元素
E:read-write	选择表单中状态为非只读的元素
E:default	选择表单中默认处于选取状态的单选框或复选框，即使用户将该单选框或复选框控件的选取状态设定为非选取状态，E:default选择器中指定的样式仍然有效
E:indeterminate	选择器表单中一组单选框中没有任何一个单选框被选取时整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定

---

html

    <form action="">
      <fieldset>
        <legend>用户注册</legend>
        <!-- ? autofocus: 布尔属性,自动获取焦点 -->
        <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/>
        <!-- ? 复选框默认是选中状态: 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;
}

效果

盒模型的五朵金花

盒模型五个核心属性：

1. width: 宽度
2. height: 高度
3. padding: 内边距
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;
}

效果和解释

两个div，中间颜色填充的部分是content区域，最外层的红色实线和虚线是border，由border属性控制。border和content之间的空白处是padding。

第一个div，由于设置了box-sizing: border-box;，width/height属性值是content区域的width/height+左右/上下padding+左右/上下border。因此content的width/height=100-20-4=76。

第二个div，由于没有设置box-sizing: border-box;，width和height属性设置的是content区域的width和height。因此，审查元素时，显示的是content的widht/height(200) + 左右/上下padding(40) + 左右/上下border(4) = 244.

简记规则

      /* 盒模型属性的顺序 */
      /* 顺时针方向 */
      .box {
        /* 边框是可视属性,除了宽高, 还可以设置样式, 颜色 */
        border: 5px dashed red;
        /* 如果同时设置四个方向,而四个方向值各不相同,则必须全部写齐了 */
        /* 规则顺序: 上,右,下,左, 就是手表的顺时针 */
        /* 四值: 上, 右, 下, 左 */
        padding: 5px 10px 15px 20px;
        /* 三值: 上, 左右, 下 */
        padding: 5px 10px 15px;
        /* 双值: 上下, 左右 */
        padding: 5px 10px;
        /* 单值: 上下左中全相等 */
        padding: 10px;
        /* 三值,双值记忆方法: 只要出现在第二个参数位置上,就必然代表"左右"   */
        /* margin 的规则 padding 是一样的 */
        /* border 是不存在以上的简化缩写 */
      }

四值: 上, 右, 下, 左
三值: 上, 左右, 下
双值: 上下, 左右
单值: 上下左中全相等
三值、双值记忆方法: 只要出现在第二个参数位置上,就必然代表”左右”