实例演示"状态伪类"和盒模型的核心点

状态伪类

demo.css

/* 状态伪类 */
fieldset {
  display: inline-grid;
  gap: 1em;
  border-radius: 10px;
  padding: 1em 2em;
  color: #666;
  background: rgb(236, 231, 234);
}
fieldset legend {
  text-align: center;
}
fieldset input {
  padding: 5px;
  border: none;
  border-bottom: 1px solid #666;
  outline: none;
  background-color: transparent;
}
/* 表单状态伪类 */
/* 匹配获取到焦点的元素 */
fieldset :focus {
  background-color: rgb(228, 236, 238);
  transition: 0.5s;
}
/* 匹配被选中的复选框元素 */
input[type="checkbox"]:checked + label {
  color: red;
}
/* 当鼠标悬停在某个元素上的效果 */
button {
  /* 去掉默认的边框与轮廓线 */
  border: none;
  outline: none;
  /* 重置默认字体与背景色 */
  background-color: seagreen;
  color: white;
  padding: 5px 10px;
  /* 文字少，可适当拉开字间距 */
  letter-spacing: 1em;
}
button:hover {
  cursor: pointer;
  /* 透明度 */
  opacity: 0.8;
  transition: 0.4s;
}
fieldset :disabled {
  background-color: yellow;
}
/* 表中符合要求的元素 */
input[type="password"]:valid {
  color: beige;
}
/* 表中可用元素 */
input[type="password"]:enabled {
  color: #fff;
}

demo.html

<!-- 1.状态伪类:<a>,<form> -->
    <form action="">
      <fieldset>
        <legend>用户注册</legend>
        <!-- outofocus:布尔属性，自动获取焦点 -->
        <input
          type="text"
          id="username"
          name="username"
          placeholder="用户名"
          required
          autofocus
        />
        <input type="email" id="email" placeholder="邮箱" disabled />
        <input
          type="password"
          id="password"
          name="password"
          placeholder="密码"
        />
        <div>
          <input type="checkbox" id="rem" name="remember" checked />
          <label for="rem">记住我</label>
        </div>
        <button>提交</button>
      </fieldset>
    </form>

盒模型

demo1.css

 /* 
        1.width:宽度
        2.height:高度
        3.padding:内边距
        4.border:边框
        5.margin:外边距
        */
      .box {
        width: 150px;
        height: 100px;
        /* 可见属性:背景，边框 */
        background-color: violet;
        border: 5px solid black;
        /* 不可见属性:内边距，外边距 */
        padding: 10px;
        background-clip: content-box;
        margin: 10px;
        /* 计算，
        宽度：margin*2+border*2+padding*2+width
        高度：margin*2+border*2+padding*2+height
         */
        /* 为什么鼠标检查页面宽高是，少了margin
        因为浏览器计算盒子大小，忽略了margin，只2计算到border
        */
        /* 设置盒子尺寸计算方式 */
        box-sizing: border-box;
        /* 
        将内容宽度/高度进行缩放，
        来实现源码中的盒子大小计算完全一致
        */
      }
      /* 通用的元素样式默认设置 */
      * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }
      /* 盒模型属性的顺序 */
      /* 顺时针方向 */
      .box {
        /* 边框是可视属性，除了宽高，还可以设置样式，颜色 */
        border: 5px dashed red;
      }

demo1.html

<div class="box"></div>