1021状态伪类与盒模型作业

盒模型

<style>
    .box{
      /* 宽度等于100像素 */
      width: 100px;
      /* 高度等于100像素 */
      height: 100px;
      /* 1像素的红色实线边框 */
      /* 
        常用边框有以下
        dashed：虚线
        dotted：点线
        none: 无边框
      */
      border: 1px solid red;
      /* 页面中，宽高属性包含内容，内边距和边框，不包含外边距 */
      /* 也就是说：width = 内容 + border + padding; 高度同理*/
      box-sizing: border-box;
      /* 页面中，高度属性不包含内边距，边框，外边距，只包含内容 */
      /* 也就是说：width = 内容; 高度同理 */
      box-sizing: content-box;
      /* 外边距上下左右四个边距都为0 */
      margin: 0;
      /* 外边距上下为0；左右为15像素 */
      margin: 0 15px;
      /* 外边距上为0，左右为10像素，下为15像素 */
      margin: 0 10px 15px;
      /* 外边距上为0，右边10像素，下为15像素，左为20像素 */
      margin: 0 10px 15px 20px;
      /* padding为内边距，计算公式跟margin是一样的 */
    }
  </style>
  <div class="box"></div>

状态伪类

<style>
    /* 设置所有input元素已禁用的背景颜色 */
    input:disabled{
    background-color: red;
    }
    /* 设置所有input元素内容非法的背景颜色 */
    input:invalid{
    background-color: green;
    }
    /* 设置所有已启用的input元素边框颜色 */
    input:enabled{
      border-color:#ffff00;
      border-width: 5px;
    }
  </style>
  <form action="">
    <input type="text" name="" id="" disabled>
    <input type="email" name="" id="" value="dsjidsji">
  </form>