欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

伪类跟选择器伪类的参数以及常用距离的单位，并且学习了盒模型的部署，强化了学习中box-sizing: border-box;对内边距和线的了解以及表格中类元素的使用

程序员文章站 2022-04-17 19:00:58
...

伪类的选择器

伪类的级别为最低的,比class,id,标签的级别更低

两种伪类

  1. 结构伪类
    根据元素位置获取元素
  2. 状态伪类
    根据状态来获取元素
    结构伪类
    说明:伪类结构属于父级结构元素 常与 > 符号一起使用
    nth-of-type 参数正数第几个.
    单选情况案例1:
      

    1.  <ul class="ul">
      2. 

    2.    <li class="li1">测试</li>
      3. 

    3.    <li class="li2">测试</li>
      4. 

    4.    <li class="li3">测试</li>
      5. 

    5.    <li class="li4">测试</li>
      6. 

    6.    <li class="li5">测试</li>
      7. 

    7.  </ul>
      8. 

    8.  <style>
      9. 

    9.    .ul > li:nth-of-type(2) {
      10. 

    10.      background-color: black;
      11. 

    11.    }
      12. 

    12.  </style>
      13.
    示例图:
    伪类跟选择器伪类的参数以及常用距离的单位，并且学习了盒模型的部署，强化了学习中box-sizing: border-box;对内边距和线的了解以及表格中类元素的使用
    更改背景颜色的是class属性为li2的一行

一组情况案例2:

    

  1.     <ul class="ul">
    2. 

  2.       <li class="li1">测试</li>
    3. 

  3.       <li class="li2">测试</li>
    4. 

  4.       <li class="li3">测试</li>
    5. 

  5.       <li class="li4">测试</li>
    6. 

  6.       <li class="li5">测试</li>
    7. 

  7.     </ul>
    8. 

  8.     <style>
    9. 

  9.       .ul > li:nth-of-type(n + 2) {
    10. 

  10.         background-color: black;
    11. 

  11.         color: chartreuse;
    12. 

  12.       }
    13. 

  13.     </style>
    14.

示例图:
伪类跟选择器伪类的参数以及常用距离的单位，并且学习了盒模型的部署，强化了学习中box-sizing: border-box;对内边距和线的了解以及表格中类元素的使用

单选情况案例3:
nth-last-of-type 参数倒数第几个
代码:

    

    2. 

  2.     <ul class="ad">
    3. 

  3.       <li class="a1">测试倒数</li>
    4. 

  4.       <li class="a2">测试倒数</li>
    5. 

  5.       <li class="a3">测试倒数</li>
    6. 

  6.       <li class="a4">测试倒数</li>
    7. 

  7.       <li class="a5">测试倒数</li>
    8. 

  8.       <li class="a5">测试倒数</li>
    9. 

  9.     </ul>
    10. 

  10.     <style>
    11. 

  11.       /* nth-last-of-type属性,是倒数第三个,在of前面加了一个last */
    12. 

  12.       .ad > li:nth-last-of-type(3) {
    13. 

  13.         background-color: blue;
    14. 

  14.       }
    15. 

  15.     </style>
    16.

示例图:
伪类跟选择器伪类的参数以及常用距离的单位，并且学习了盒模型的部署，强化了学习中box-sizing: border-box;对内边距和线的了解以及表格中类元素的使用
这里底部颜色变色的是倒数第三个,也就是class=”a4”的一行.

一组情况案例4:

    

  1.     <ul class="ad">
    2. 

  2.       <li class="a1">测试倒数</li>
    3. 

  3.       <li class="a2">测试倒数</li>
    4. 

  4.       <li class="a3">测试倒数</li>
    5. 

  5.       <li class="a4">测试倒数</li>
    6. 

  6.       <li class="a5">测试倒数</li>
    7. 

  7.       <li class="a6">测试倒数</li>
    8. 

  8.       <li class="a7">测试倒数</li>
    9. 

  9.       <li class="a8">测试倒数</li>
    10. 

  10.     </ul>
    11. 

  11.     <style>
    12. 

  12.       /* 这里出来的是从倒数第三个,往前走,意思是2*0+3,第二个为2*1+3 第三个为2*2+3 */
    13. 

  13.       /* 所以底色选中的是倒数第三个,倒数第五个,倒数第七个 */
    14. 

  14.       .ad > li:nth-last-of-type(2n + 3) {
    15. 

  15.         background-color: blue;
    16. 

  16.       }
    17. 

  17.     </style>
    18.

示例截图:
伪类跟选择器伪类的参数以及常用距离的单位，并且学习了盒模型的部署，强化了学习中box-sizing: border-box;对内边距和线的了解以及表格中类元素的使用
其他类参数:
first-of-type 整数第一个
last-of-type 倒数第一个

参考表格:

参数 值 说明
nth-of-type(值) 数字例如1,2,3/an+b(a是可以是一个数字或-1,n属于自增字段,b也可以是1个数字) 选择正数第几个或者第几组(在an+b情况下是组)
nth-last-of-type(值) 数字例如1,2,3/an+b(a是可以是一个数字或-1,n属于自增字段,b也可以是1个数字) 这里与nth-of-type相反,是倒数第几行或者第几组(在an+b情况下是组)
first-of-type 空 选中正数第一个
last-of-type 空 选中倒数第一个

解释:

    

  1.     <ul class="list">
    2. 

  2.       <li>item1</li>
    3. 

  3.       <li>item2</li>
    4. 

  4.       <li>item3</li>
    5. 

  5.       <li>item4</li>
    6. 

  6.       <li>item5</li>
    7. 

  7.       <li>item6</li>
    8. 

  8.       <li>item7</li>
    9. 

  9.       <li>item8</li>
    10. 

  10.     </ul>
    11. 

  11.     <style>
    12. 

  12.       /* 
    13. 

  13.         :nth-of-type(an+b)
    14. 

  14.         1. a: 系数, [0,1,2,...]
    15. 

  15.         2. n: [0,1,2,3,....]
    16. 

  16.         3. b: 偏移量, 从0开始
    17. 

  17.         注: 计算出来的索引,必须是有效, 从1开始
    18. 

  18.       */
    19. 

    20. 

  20.       /* 选择元素只有二种情况: 
    21. 

  21.       1. 选择一个
    22. 

  22.       2. 选择一组 */
    23. 

    24. 

  24.       /* 1. 匹配单个, a = 0  */
    25. 

  25.       /* 匹配第3个 */
    26. 

  26.       .list > :nth-of-type(0n + 3) {
    27. 

  27.         background-color: lightgreen-;
    28. 

  28.       }
    29. 

  29.       /* 0n+3 => 3 */
    30. 

  30.       /* 因为0乘任何数都0,所以可简化,只写偏移量 */
    31. 

  31.       .list > :nth-of-type(3) {
    32. 

  32.         background-color: lightgreen-;
    33. 

  33.       }
    34. 

    35. 

  35.       /* 2. 匹配一组 */
    36. 

  36.       /* 2.1 a = 1 */
    37. 

  37.       .list > :nth-of-type(1n) {
    38. 

  38.         background-color: lightgreen-;
    39. 

  39.       }
    40. 

  40.       /* 1乘任何数不变, 所以1可以不写 */
    41. 

  41.       .list > :nth-of-type(n) {
    42. 

  42.         background-color: lightgreen-;
    43. 

  43.       }
    44. 

    45. 

  45.       /* .list > * {
    46. 

  46.         background-color: lightblue !important;
    47. 

  47.       } */
    48. 

    49. 

  49.       /* 实际开发过程, 使用 n + b(偏移量)来匹配元素 */
    50. 

    51. 

  51.       /* 任务: 匹配第3个子元素后面的所有兄弟元素 */
    52. 

  52.       /* .list .three,
    53. 

  53.       .list .three ~ * {
    54. 

  54.         background-color: lightgreen;
    55. 

  55.       } */
    56. 

    57. 

  57.       /* an+b = 1n+3 */
    58. 

  58.       /* n+3: 偏移量是3, 表示从第3个开始匹配 */
    59. 

  59.       .list > :nth-of-type(n + 3) {
    60. 

  60.         background-color: lightgreen-;
    61. 

  61.       }
    62. 

  62.       /*
    63. 

  63.         n: 从0开始取, n+3 匹配的全过程
    64. 

  64.         1. n=0: 0+3=3, 匹配第3个
    65. 

  65.         2. n=1: 1+3=4, 匹配第4个
    66. 

  66.         3. n=2: 2+3=5, 匹配第5个
    67. 

  67.         4. n=3: 3+3=6, 匹配第6个
    68. 

  68.         5. n=4: 4+3=7, 匹配第7个
    69. 

  69.         6. n=5: 5+3=8, 匹配第8个
    70. 

  70.         7. n=6: 6+3=9, 索引越界,匹配失败,结束计算
    71. 

  71.         n+3 => [3,4,5,6,7,8], 匹配到6个
    72. 

  72.       */
    73. 

    74. 

  74.       /* 2.2 a=-1, 功能与 a=1是一样,但是反向取 */
    75. 

  75.       /* 取前3个 */
    76. 

  76.       .list > :nth-of-type(-n + 3) {
    77. 

  77.         background-color: lightgreen-;
    78. 

  78.       }
    79. 

  79.       /*
    80. 

  80.       -n+3: 
    81. 

  81.       1. n=0: -0+3=3, 匹配第3个
    82. 

  82.       2. n=1: -1+3=2, 匹配第2个
    83. 

  83.       3. n=2: -2+3=1, 匹配第1个
    84. 

  84.       4. n=3: -3+3=0, 匹配失败,计算结束
    85. 

  85.       -n+3 => [3,2,1],返回前3个
    86. 

  86.       */
    87. 

    88. 

  88.       /* 思考: 如果匹配最后三个怎么办? */
    89. 

  89.       .list > :nth-last-of-type(-n + 3) {
    90. 

  90.         background-color: lightgreen-;
    91. 

  91.       }
    92. 

    93. 

  93.       /* 2.3 a=2 : 匹配奇偶位置的元素 */
    94. 

  94.       /* 2n+0: 偶数位元素 */
    95. 

  95.       .list > :nth-of-type(2n) {
    96. 

  96.         background-color: lightgreen-;
    97. 

  97.       }
    98. 

  98.       /* 2n+1: 奇数位元素 */
    99. 

  99.       .list > :nth-of-type(2n + 1) {
    100. 

  100.         background-color: lightgreen-;
    101. 

  101.       }
    102. 

  102.       /* 2n: even, 2n+1: odd  */
    103. 

    104. 

  104.       /* .list :nth-of-type(even):hover {
    105. 

  105.         background-color: yellow;
    106. 

  106.       } */
    107. 

  107.     </style>
    108.

一组案例代码5:
兄弟元素的使用
代码:

    

    2. 

  2.     <ul class="ad">
    3. 

  3.       <li class="a1">test</li>
    4. 

  4.       <li class="a2">test</li>
    5. 

  5.       <li class="a3">test</li>
    6. 

  6.       <li class="a4">test</li>
    7. 

  7.       <li class="a5">test</li>
    8. 

  8.       <li class="a6">test</li>
    9. 

  9.       <li class="a7">test</li>
    10. 

  10.       <li class="a8">test</li>
    11. 

  11.     </ul>
    12. 

  12.     <style>
    13. 

  13.       /* 意思是从class="a3"开始,往后,这里往后是从后往前数，因为是nth-last所有的兄弟元素添加一个底颜色 */
    14. 

  14.       .ad > li.a4 ~ *:nth-last-of-type(n) {
    15. 

  15.         background-color: blue;
    16. 

  16.       }
    17. 

  17.     </style>
    18.

意思是从class=”a3”开始,往后所有的兄弟元素添加一个底颜色,
示例图:
伪类跟选择器伪类的参数以及常用距离的单位，并且学习了盒模型的部署，强化了学习中box-sizing: border-box;对内边距和线的了解以及表格中类元素的使用

表单类伪元素

表单类伪元素就是进行对表单添加伪元素,使其增加一些class属性
表单类伪元素表格及使用说明:

属性值 用法 说明
disabled input:disabled 针对无效属性设置相关的css,前提情况下是当前属性在disabled禁用状态下,常常配合input中text属性值来使用,无效点击的设置
enabled input:enabled 针对有效属性,前提情况下是当前属性在enabled状态下,也就是默认开启的状态下,配合input中text属性值来使用,有效点击下的背景属性
focus input:focus 光标的聚焦移动到文本框后,鼠标的箭头的变化,一般也是配合input中text属性值来用的,input光标焦点的设置
checked input:checked + label 此属性一般跟复选框/单选框挂钩,当type的值为radio,checkbox中, + label绑定使用,添加style属性,比如背景,点击后背景改变等, 这里解析为单击选中后文字的特效
hover input:hover 类似class中hover使用方法一直,就是鼠标移动过去之后的效果

代码部分：

    

  1.        <form method="post" action="login.php">
    2. 

  2.             <div>
    3. 

  3.                 <span class="iconfont icon-favorite">用户名:</span>
    4. 

  4.                 <input type="text" id="text" name="text" value="用户名" />
    5. 

  5.             </div>
    6. 

  6.             <div>
    7. 

  7.                 <span class="iconfont icon-forhelp">性别:</span>
    8. 

  8.                 <label for="m">男性</label>
    9. 

  9.                 <input type="radio" id="m" name="m" value="0" required />
    10. 

  10.                 <label for="g">女性</label>
    11. 

  11.                 <input type="radio" id="g" name="m" value="1" />
    12. 

  12.             </div>
    13. 

  13.             <div>
    14. 

  14.                 <span class="iconfont icon-warning">爱好:</span>
    15. 

  15.                 <label for="love">php</label>
    16. 

  16.                 <input type="checkbox" id="love" name="l[]" checked />
    17. 

  17.                 <label for="html">html</label>
    18. 

  18.                 <input type="checkbox" id="html" name="l[]" />
    19. 

  19.                 <label for="css">css</label>
    20. 

  20.                 <input type="checkbox" id="css" name="l[]" />
    21. 

  21.             </div>
    22. 

  22.             <div>
    23. 

  23.                 <span class="iconfont icon-mail">邮箱:</span>
    24. 

  24.                 <label for="email"></label>
    25. 

  25.                 <input type="email" id="email" name="email" placeholder="请填写您的邮箱" required />
    26. 

  26.             </div>
    27. 

  27.             <div>
    28. 

  28.                 <span class="iconfont icon-comment">邀请码:</span>
    29. 

  29.                 <input type="text" value="75sgst" name="y" disabled />
    30. 

  30.             </div>
    31. 

  31.             <button type="submit">提交</button>
    32. 

  32.             <button type="reset">重置</button>
    33. 

  33.             <button type="button">无效点击</button>
    34. 

  34.             <style>
    35. 

  35.                 input:disabled {
    36. 

  36.                     /* 无效点击的设置 */
    37. 

  37.                     background-color: gray;
    38. 

  38.                     color: honeydew;
    39. 

  39.                 }
    40. 

    41. 

  41.                 input:enabled {
    42. 

  42.                     /* 有效点击下的背景属性 */
    43. 

  43.                     background-color: cyan;
    44. 

  44.                 }
    45. 

    46. 

  46.                 span {
    47. 

  47.                     display: block;
    48. 

  48.                     width: 60px;
    49. 

  49.                     float: left;
    50. 

  50.                 }
    51. 

    52. 

  52.                 div {
    53. 

  53.                     height: 30px;
    54. 

  54.                 }
    55. 

    56. 

  56.                 input:focus {
    57. 

  57.                     /* input光标焦点的设置 */
    58. 

  58.                     background-color: blanchedalmond;
    59. 

  59.                 }
    60. 

    61. 

  61.                 input:checked+label {
    62. 

  62.                     /* 这里解析为单击选中后文字的特效 */
    63. 

  63.                     color: red;
    64. 

  64.                     background-color: chartreuse;
    65. 

  65.                 }
    66. 

    67. 

  67.                 input:hover {
    68. 

  68.                     /* hover为光标移动后的属性 */
    69. 

  69.                     background-color: crimson;
    70. 

  70.                     cursor: pointer;
    71. 

  71.                     border: blue 1px solid;
    72. 

  72.                     /* 鼠标移动过去鼠标的属性 */
    73. 

  73.                 }
    74. 

  74.             </style>
    75. 

  75.         </form>
    76.
表单额外学习知识勿忘记：
type值 用法 说明
checkbox type=”checkbox” 复选框，使用时name值为数组形式，如：name=”l[]”
radio type=”radio” 单选框，使用时name需相同，value值不同，尽量为数字，如name=”m” value=”0”

表单组合使用其他代码：
placeholder="文本框提示语句"。
required 提交时必填。
checked 打开页面默认选中。

字体引入（来源于阿里字体库）

内有说明，可直接拿其使用，下载文件内详细参考知识，不做详细
帖入字体引入代码：

    

  1. <link rel="stylesheet" href="//at.alicdn.com/t/font_3062587_tqyeoh701u.css" />
    2. 

  2. <!--头部加入因为文件代码-->
    3. 

  3.             <div>
    4. 

  4.                 <span class="iconfont icon-favorite">用户名:</span>
    5. 

  5.                 <!--   需要加图标的位置根据阿里云说明，加入class属性，iconfont必带属性，icon-favorite图标相应属性 -->
    6. 

  6.                 <input type="text" id="text" name="text" value="用户名" />
    7. 

  7.             </div>
    8.

效果图：
伪类跟选择器伪类的参数以及常用距离的单位，并且学习了盒模型的部署，强化了学习中box-sizing: border-box;对内边距和线的了解以及表格中类元素的使用

盒模型知识点

其中盒模型常用的四个参数

属性 值 用法/说明
width width=”100px”或者width: 200px; width加宽度值，宽度的值有px（像素），em（根据父级字体大小设置大小），rem（根据html字体大小设置大小），vw（视口就是可视窗口的宽的百分比）
height height=”100px”或者height: 200px; 和width一样，不同的地方是多了一个，vh，也是视口的可视窗口的百分比
border border: 10px solid #000; 其中solid是必带参数，意思是线，border我自己理解为边框，border: 10px solid #000; 解读为边框，10px，实线，加颜色
padding padding: 5px 10px 15px 20px; 盒子内边距，padding值可为4个，也可以为2个，也可以为3个，还可以为1个，其意思跟顺时针意思一样，4个的时候，上右下左，2个的时候代表上，中，下，单个值就是4个方向一样。
margin margin:5px 10px 15px 20px; 意思跟padding是一样的，只不过他是外边距，padding是内边距
box-sizing box-sizing: border-box; 防止溢出，border和paddind会被计算在盒子的高度宽度之类，比如盒子我设定的高度宽度值100px，

自己码的代码示例：

    

  1. <body>
    2. 

  2.     <style>
    3. 

  3.         .ad {
    4. 

  4.             width: 200px;
    5. 

  5.             box-sizing: border-box;
    6. 

  6.             background-color: palegreen;
    7. 

  7.         }
    8. 

    9. 

  9.         .ad1 {
    10. 

  10.             width: 180px;
    11. 

  11.              /*添加了box-sizing后 这里计算padding宽度左右两边，各为5，总和10，边距为左右两边，各为10，左右总为20，实际的width宽度为150px */
    12. 

  12.             padding: 5px;
    13. 

  13.             margin: 10px;
    14. 

  14.             border: palevioletred solid 10px;
    15. 

  15.             background-color: purple;
    16. 

  16.             box-sizing: border-box;
    17. 

  17.         }
    18. 

  18.     </style>
    19. 

  19.     <div class="ad">
    20. 

  20.         <div class="ad1"></div>
    21. 

  21.     </div>
    22.

示例截图：
伪类跟选择器伪类的参数以及常用距离的单位，并且学习了盒模型的部署，强化了学习中box-sizing: border-box;对内边距和线的了解以及表格中类元素的使用
伪类跟选择器伪类的参数以及常用距离的单位，并且学习了盒模型的部署，强化了学习中box-sizing: border-box;对内边距和线的了解以及表格中类元素的使用
盒模型老师教我的部分代码：

    

  1.   <body>
    2. 

  2.     <div class="box"></div>
    3. 

  3.     <style>
    4. 

  4.       /* 盒模型常用属性
    5. 

  5.       1. width
    6. 

  6.       2. height
    7. 

  7.       3. border
    8. 

  8.       4. padding
    9. 

  9.       5. margin
    10. 

  10.       */
    11. 

    12. 

  12.       .box {
    13. 

  13.         width: 200px;
    14. 

  14.         height: 200px;
    15. 

  15.         /* border: 10px solid #000; */
    16. 

  16.         background-color: violet;
    17. 

  17.         border: 10px dashed currentColor;
    18. 

  18.         background-clip: content-box;
    19. 

  19.         /* padding: 内边距,呼吸区 */
    20. 

  20.         padding: 20px;
    21. 

    22. 

  22.         /* 当前盒子总宽度: 200 + 20*2 + 10*2 = 260px  */
    23. 

    24. 

  24.         /* 改变盒子大小的计算方式,使用户设置width,height就是盒子的实际大小,以方便计算与布局 */
    25. 

    26. 

  26.         box-sizing: border-box;
    27. 

  27.         /* 此时, width, heigth设置的盒子大小, 就是最终的计算尺寸 */
    28. 

  28.         /* 当前盒子总宽度: 140 + 20*2 + 10*2 = 200px  */
    29. 

  29.         /* 计算出来的200px, 就是width=200px  */
    30. 

  30.       }
    31. 

  31.       .box {
    32. 

  32.         /* 四值 , 顺时针 */
    33. 

  33.         /* padding: 上 右 下 左 ; */
    34. 

  34.         padding: 5px 10px 15px 20px;
    35. 

    36. 

  36.         /* 三值 , 中间表示左右*/
    37. 

  37.         padding: 5px 10px 15px;
    38. 

    39. 

  39.         /* 双值: 第1个上下,第2个左右 */
    40. 

  40.         padding: 5px 10px;
    41. 

    42. 

  42.         /* 单值, 四个方向全一样 */
    43. 

  43.         padding: 5px;
    44. 

    45. 

  45.         /* padding: 是透明的,只有宽度可以设置 */
    46. 

  46.       }
    47. 

  47.       .box {
    48. 

  48.         /* 边框有视觉效果,有宽度, 样式, 颜色 */
    49. 

  49.         /* border-top-width: 20px;
    50. 

  50.         border-top-style: solid;
    51. 

  51.         border-top-color: red; */
    52. 

  52.         border-top: 20px solid red;
    53. 

    54. 

  54.         border: 5px solid green;
    55. 

  55.       }
    56. 

    57. 

  57.       /* 样式重置的简化通用方案 */
    58. 

  58.       * {
    59. 

  59.         padding: 0;
    60. 

  60.         margin: 0;
    61. 

  61.         box-sizing: border-box;
    62. 

  62.       }
    63. 

    64. 

  64.       .box {
    65. 

  65.         /* margin 与 padding是一样,只不过它在边框外部, 是外边距, 控制多个盒子之间的间隔; */
    66. 

  66.         margin: 10px;
    67. 

  67.       }
    68. 

  68.     </style>
    69.
常用距离单位：

在前端html页面中，常用距离单位，为px，em，rem，vw，vh。

参数代码 示例 说明
px width=”100px” 意思是宽度100个像素，当然不只是用在宽度里面，还有内边距，外边距，线等等，其距离单位为px，像素
em width=”10em” 这里就比较有意思，这里1em指定的是父级字体像素的比，比如父级字体为10px，那么这里设置为10em，就等于100px。
rem width=”10rem” 这里单位是继承了页面html的像素比例，比如页面html像素为100px，这里的10rem就是10*100px的值，就是1000px。
vw width=”10vm” 这里是视口，就是可视页面，能看见的页面的地方的百分比，写宽度10vm，等于屏幕宽的10%大小
vh height=”10vm” 这里也是视口的意思，和vw意思一样，只是vw是宽，vh是高

这里没写一小段代码，整段代码写到了作业里面了，
老师教我的常用单位示例：

    

  1.  <!-- px, em, rem , vh, vw  -->
    2. 

    3. 

  3.     <style>
    4. 

  4.       /* 绝对单位: px , 1in = 96px  */
    5. 

  5.       /* 相对单位: em,rem, vh, vw  */
    6. 

  6.     </style>
    7. 

    8. 

  8.     <div class="box"></div>
    9. 

  9.     <style>
    10. 

  10.       * {
    11. 

  11.         padding: 0;
    12. 

  12.         margin: 0;
    13. 

  13.         box-sizing: border-box;
    14. 

  14.       }
    15. 

    16. 

  16.       /* font-size: 字号大小, 它是一个可以被继承的属性 */
    17. 

  17.       .box {
    18. 

  18.         /* font-size: 32px; */
    19. 

  19.         /* width: 160px; */
    20. 

  20.         /* width: 10em; */
    21. 

  21.         /* 10em = 160px */
    22. 

  22.         /* em = font-size 默认字号 16px*/
    23. 

    24. 

  24.         /* 1em = 16px  */
    25. 

  25.         /* 10em = 160px  */
    26. 

    27. 

  27.         /* height: 5em;
    28. 

    29. 

  29.         background-color: lightgreen; */
    30. 

    31. 

  31.         /* em: 永远和当前或父级的font-size进行绑定 */
    32. 

  32.       }
    33. 

    34. 

  34.       /* rem: 永远和html(根元素)中的font-size绑定 */
    35. 

    36. 

  36.       html {
    37. 

  37.         /* 1rem = 10px; */
    38. 

  38.         /* font-size: 10px; */
    39. 

  39.       }
    40. 

    41. 

  41.       .box {
    42. 

  42.         /* font-size: 40px; */
    43. 

  43.         /* width: 200px; */
    44. 

  44.         /* 200px = 20 * 10 = 20rem */
    45. 

  45.         /* width: 20rem;
    46. 

  46.         height: 15rem;
    47. 

    48. 

  48.         width: 10em;
    49. 

  49.         height: 5em; */
    50. 

  50.       }
    51. 

    52. 

  52.       /* vh, vw  */
    53. 

    54. 

  54.       /* vw: 将视口宽度分为100份, 1vw = 1/100 */
    55. 

  55.       /* vh: 将视口高宽分为100份, 1vh = 1/100 */
    56. 

    57. 

  57.       /* 视口: 可视窗口 */
    58. 

    59. 

  59.       /* .box {
    60. 

  60.         width: 100vw;
    61. 

  61.         height: 100vh;
    62. 

  62.       } */
    63. 

  63.     </style>
    64.

作业完成案例截图：
伪类跟选择器伪类的参数以及常用距离的单位，并且学习了盒模型的部署，强化了学习中box-sizing: border-box;对内边距和线的了解以及表格中类元素的使用
相关代码：

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>Document</title>
    8. 

  8.     <link rel="stylesheet" href="//at.alicdn.com/t/font_3062587_tqyeoh701u.css" />
    9. 

  9. </head>
    10. 

  10. <header>
    11. 

  11.     <div class="head">头部部分</div>
    12. 

  12. </header>
    13. 

  13. <style>
    14. 

  14.     html {
    15. 

  15.         font-size: 10px;
    16. 

  16.     }
    17. 

    18. 

  18.     .head {
    19. 

  19.         width: 100vw;
    20. 

  20.         height: 20vh;
    21. 

  21.         background-color: gray;
    22. 

  22.         font-size: 30px;
    23. 

  23.         text-align: center;
    24. 

  24.     }
    25. 

    26. 

  26.     body div.body {
    27. 

  27.         width: 33.3%;
    28. 

  28.         height: 60vh;
    29. 

  29.         background-color: green;
    30. 

  30.         float: left;
    31. 

  31.     }
    32. 

    33. 

  33.     footer div {
    34. 

  34.         width: 100vw;
    35. 

  35.         height: 20vh;
    36. 

  36.         background-color: gray;
    37. 

  37.         font-size: 30px;
    38. 

  38.         text-align: center;
    39. 

  39.     }
    40. 

    41. 

  41.     #left {
    42. 

  42.         width: 33.3%;
    43. 

  43.         height: 60vh;
    44. 

  44.         background-color: hotpink;
    45. 

  45.         text-align: center;
    46. 

  46.         font-size: 5em;
    47. 

  47.         float: left;
    48. 

  48.     }
    49. 

    50. 

  50.     #right {
    51. 

  51.         width: 33.3%;
    52. 

  52.         height: 60vh;
    53. 

  53.         background-color: hotpink;
    54. 

  54.         text-align: center;
    55. 

  55.         font-size: 5rem;
    56. 

  56.         float: left;
    57. 

  57.     }
    58. 

    59. 

  59.     body {
    60. 

  60.         margin: 0;
    61. 

  61.     }
    62. 

    63. 

  63.     .body_left {
    64. 

  64.         width: 33.3%;
    65. 

  65.         height: 100%;
    66. 

  66.         float: left;
    67. 

  67.     }
    68. 

    69. 

  69.     form {
    70. 

  70.         width: 33.3%;
    71. 

  71.         height: 100%;
    72. 

  72.         float: left;
    73. 

  73.         background-color: ivory;
    74. 

  74.         box-sizing: border-box;
    75. 

  75.     }
    76. 

    77. 

  77.     button {
    78. 

  78.         background-color: green;
    79. 

  79.         border: none;
    80. 

  80.         color: ivory;
    81. 

  81.     }
    82. 

    83. 

  83.     button:hover {
    84. 

  84.         background-color: orange;
    85. 

  85.     }
    86. 

    87. 

  87.     form div {
    88. 

  88.         border: orangered solid;
    89. 

  89.         padding: 2em;
    90. 

  90.         margin: 5rem;
    91. 

  91.     }
    92. 

    93. 

  93.     .body_right {
    94. 

  94.         width: 33.3%;
    95. 

  95.         height: 100%;
    96. 

  96.         float: left;
    97. 

  97.     }
    98. 

    99. 

  99.     .body_left,
    100. 

  100.     .body_right {
    101. 

  101.         font-size: 30px;
    102. 

  102.     }
    103. 

    104. 

  104.     .iconfont {
    105. 

  105.         color: orangered;
    106. 

  106.     }
    107. 

  107. </style>
    108. 

    109. 

  109. <body>
    110. 

  110.     <!-- <ul class="list">
    111. 

  111.         <li>item1</li>
    112. 

  112.         <li>item2</li>
    113. 

  113.         <li>item3</li>
    114. 

  114.         <li>item4</li>
    115. 

  115.         <li>item5</li>
    116. 

  116.         <li>item6</li>
    117. 

  117.         <li>item7</li>
    118. 

  118.         <li>item8</li>
    119. 

  119.     </ul> -->
    120. 

  120.     <style>
    121. 

  121.         /* 
    122. 

  122.         :nth-of-type(an+b)
    123. 

  123.         1. a: 系数, [0,1,2,...]
    124. 

  124.         2. n: [0,1,2,3,....]
    125. 

  125.         3. b: 偏移量, 从0开始
    126. 

  126.         注: 计算出来的索引,必须是有效, 从1开始
    127. 

  127.       */
    128. 

  128.         /* 选择元素只有二种情况: 
    129. 

  129.       1. 选择一个
    130. 

  130.       2. 选择一组 */
    131. 

  131.         /* 1. 匹配单个, a = 0  */
    132. 

  132.         /* 匹配第3个 */
    133. 

    134. 

  134.         .list> :nth-of-type(0n + 3) {
    135. 

  135.             background-color: lightgreen-;
    136. 

  136.         }
    137. 

  137.         /* 0n+3 => 3 */
    138. 

  138.         /* 因为0乘任何数都0,所以可简化,只写偏移量 */
    139. 

    140. 

  140.         .list> :nth-of-type(3) {
    141. 

  141.             background-color: lightgreen-;
    142. 

  142.         }
    143. 

  143.         /* 2. 匹配一组 */
    144. 

  144.         /* 2.1 a = 1 */
    145. 

    146. 

  146.         .list> :nth-of-type(1n) {
    147. 

  147.             background-color: lightgreen-;
    148. 

  148.         }
    149. 

  149.         /* 1乘任何数不变, 所以1可以不写 */
    150. 

    151. 

  151.         .list> :nth-of-type(n) {
    152. 

  152.             background-color: lightgreen-;
    153. 

  153.         }
    154. 

  154.         /* .list > * {
    155. 

  155.         background-color: lightblue !important;
    156. 

  156.       } */
    157. 

  157.         /* 实际开发过程, 使用 n + b(偏移量)来匹配元素 */
    158. 

  158.         /* 任务: 匹配第3个子元素后面的所有兄弟元素 */
    159. 

  159.         /* .list .three,
    160. 

  160.       .list .three ~ * {
    161. 

  161.         background-color: lightgreen;
    162. 

  162.       } */
    163. 

  163.         /* an+b = 1n+3 */
    164. 

  164.         /* n+3: 偏移量是3, 表示从第3个开始匹配 */
    165. 

    166. 

  166.         .list> :nth-of-type(n + 3) {
    167. 

  167.             background-color: lightgreen-;
    168. 

  168.         }
    169. 

  169.         /*
    170. 

  170.         n: 从0开始取, n+3 匹配的全过程
    171. 

  171.         1. n=0: 0+3=3, 匹配第3个
    172. 

  172.         2. n=1: 1+3=4, 匹配第4个
    173. 

  173.         3. n=2: 2+3=5, 匹配第5个
    174. 

  174.         4. n=3: 3+3=6, 匹配第6个
    175. 

  175.         5. n=4: 4+3=7, 匹配第7个
    176. 

  176.         6. n=5: 5+3=8, 匹配第8个
    177. 

  177.         7. n=6: 6+3=9, 索引越界,匹配失败,结束计算
    178. 

  178.         n+3 => [3,4,5,6,7,8], 匹配到6个
    179. 

  179.       */
    180. 

  180.         /* 2.2 a=-1, 功能与 a=1是一样,但是反向取 */
    181. 

  181.         /* 取前3个 */
    182. 

    183. 

  183.         .list> :nth-of-type(-n + 3) {
    184. 

  184.             background-color: lightgreen-;
    185. 

  185.         }
    186. 

  186.         /*
    187. 

  187.       -n+3: 
    188. 

  188.       1. n=0: -0+3=3, 匹配第3个
    189. 

  189.       2. n=1: -1+3=2, 匹配第2个
    190. 

  190.       3. n=2: -2+3=1, 匹配第1个
    191. 

  191.       4. n=3: -3+3=0, 匹配失败,计算结束
    192. 

  192.       -n+3 => [3,2,1],返回前3个
    193. 

  193.       */
    194. 

  194.         /* 思考: 如果匹配最后三个怎么办? */
    195. 

    196. 

  196.         .list> :nth-last-of-type(-n + 3) {
    197. 

  197.             background-color: lightgreen-;
    198. 

  198.         }
    199. 

  199.         /* 2.3 a=2 : 匹配奇偶位置的元素 */
    200. 

  200.         /* 2n+0: 偶数位元素 */
    201. 

    202. 

  202.         .list> :nth-of-type(2n) {
    203. 

  203.             background-color: lightgreen-;
    204. 

  204.         }
    205. 

  205.         /* 2n+1: 奇数位元素 */
    206. 

    207. 

  207.         .list> :nth-of-type(2n + 1) {
    208. 

  208.             background-color: lightgreen-;
    209. 

  209.         }
    210. 

  210.         /* 2n: even, 2n+1: odd  */
    211. 

  211.         /* .list :nth-of-type(even):hover {
    212. 

  212.         background-color: yellow;
    213. 

  213.       } */
    214. 

  214.     </style>
    215. 

  215.     <!-- 一组案例代码5: 兄弟元素的使用 代码: -->
    216. 

    217. 

  217.     <!-- <ul class="ad">
    218. 

  218.         <li class="a1">test</li>
    219. 

  219.         <li class="a2">test</li>
    220. 

  220.         <li class="a3">test</li>
    221. 

  221.         <li class="a4">test</li>
    222. 

  222.         <li class="a5">test</li>
    223. 

  223.         <li class="a6">test</li>
    224. 

  224.         <li class="a7">test</li>
    225. 

  225.         <li class="a8">test</li>
    226. 

  226.     </ul> -->
    227. 

  227.     <!-- <style>
    228. 

  228.         /* 意思是从class="a3"开始,往后所有的兄弟元素添加一个底颜色 */
    229. 

    230. 

  230.         .ad>li.a4~*:nth-last-of-type(n) {
    231. 

  231.             background-color: blue;
    232. 

  232.         }
    233. 

  233.     </style> -->
    234. 

  234.     <!-- 意思是从class=”a3”开始,往后所有的兄弟元素添加一个底颜色, 示例图: 表单类伪元素 表单类伪元素就是进行对表单添加伪元素,使其增加一些class属性 表单类伪元素表格及使用说明: 属性值 用法 说明 disabled input:disabled 针对无效属性设置相关的css,前提情况下是当前属性在disabled禁用状态下,常常配合input中text属性值来使用,无效点击的设置 enabled input:enabled 针对有效属性,前提情况下是当前属性在enabled状态下,也就是默认开启的状态下,配合input中text属性值来使用,有效点击下的背景属性
    235. 

  235.     focus input:focus 光标的聚焦移动到文本框后,鼠标的箭头的变化,一般也是配合input中text属性值来用的,input光标焦点的设置 checked input:checked + label 此属性一般跟复选框/单选框挂钩,当type的值为radio,checkbox中, + label绑定使用,添加style属性,比如背景,点击后背景改变等, 这里解析为单击选中后文字的特效 hover input:hover 类似class中hover使用方法一直,就是鼠标移动过去之后的效果
    236. 

  236.     先贴代码,明天去公司继续撸代码 -->
    237. 

    238. 

  238.     <div id="left">left</div>
    239. 

  239.     <div class="body">
    240. 

  240.         <div class="body_left">body左</div>
    241. 

  241.         <form method="post" action="login.php">
    242. 

  242.             <div>
    243. 

  243.                 <span class="iconfont icon-favorite">用户名:</span>
    244. 

  244.                 <input type="text" id="text" name="text" value="用户名" />
    245. 

  245.             </div>
    246. 

  246.             <div>
    247. 

  247.                 <span class="iconfont icon-forhelp">性别:</span>
    248. 

  248.                 <label for="m">男性</label>
    249. 

  249.                 <input type="radio" id="m" name="m" value="0" required />
    250. 

  250.                 <label for="g">女性</label>
    251. 

  251.                 <input type="radio" id="g" name="m" value="1" />
    252. 

  252.             </div>
    253. 

  253.             <div>
    254. 

  254.                 <span class="iconfont icon-warning">爱好:</span>
    255. 

  255.                 <label for="love">php</label>
    256. 

  256.                 <input type="checkbox" id="love" name="l[]" checked />
    257. 

  257.                 <label for="html">html</label>
    258. 

  258.                 <input type="checkbox" id="html" name="l[]" />
    259. 

  259.                 <label for="css">css</label>
    260. 

  260.                 <input type="checkbox" id="css" name="l[]" />
    261. 

  261.             </div>
    262. 

  262.             <div>
    263. 

  263.                 <span class="iconfont icon-mail">邮箱:</span>
    264. 

  264.                 <label for="email"></label>
    265. 

  265.                 <input type="email" id="email" name="email" placeholder="请填写您的邮箱" required />
    266. 

  266.             </div>
    267. 

  267.             <div>
    268. 

  268.                 <span class="iconfont icon-comment">邀请码:</span>
    269. 

  269.                 <input type="text" value="75sgst" name="y" disabled />
    270. 

  270.             </div>
    271. 

  271.             <button type="submit">提交</button>
    272. 

  272.             <button type="reset">重置</button>
    273. 

  273.             <button type="button">无效点击</button>
    274. 

  274.             <style>
    275. 

  275.                 input:disabled {
    276. 

  276.                     /* 无效点击的设置 */
    277. 

  277.                     background-color: gray;
    278. 

  278.                     color: honeydew;
    279. 

  279.                 }
    280. 

    281. 

  281.                 input:enabled {
    282. 

  282.                     /* 有效点击下的背景属性 */
    283. 

  283.                     background-color: cyan;
    284. 

  284.                 }
    285. 

    286. 

  286.                 span {
    287. 

  287.                     display: block;
    288. 

  288.                     width: 60px;
    289. 

  289.                     float: left;
    290. 

  290.                 }
    291. 

    292. 

  292.                 div {
    293. 

  293.                     height: 30px;
    294. 

  294.                 }
    295. 

    296. 

  296.                 input:focus {
    297. 

  297.                     /* input光标焦点的设置 */
    298. 

  298.                     background-color: blanchedalmond;
    299. 

  299.                 }
    300. 

    301. 

  301.                 input:checked+label {
    302. 

  302.                     /* 这里解析为单击选中后文字的特效 */
    303. 

  303.                     color: red;
    304. 

  304.                     background-color: chartreuse;
    305. 

  305.                 }
    306. 

    307. 

  307.                 input:hover {
    308. 

  308.                     /* hover为光标移动后的属性 */
    309. 

  309.                     background-color: crimson;
    310. 

  310.                     cursor: pointer;
    311. 

  311.                     border: blue 1px solid;
    312. 

  312.                     /* 鼠标移动过去鼠标的属性 */
    313. 

  313.                 }
    314. 

  314.             </style>
    315. 

  315.         </form>
    316. 

  316.         <div class="body_right">body右</div>
    317. 

  317.     </div>
    318. 

  318.     <div id="right">right</div>
    319. 

  319. </body>
    320. 

  320. <footer style="clear: both">
    321. 

  321.     <div>尾部位置</div>
    322. 

  322. </footer>
    323. 

    324. 

  324. </html>
    325.

上一篇： 使用em属性进行移动适配及使用固定/相对/绝对定位的演练并对flex常用属性进行演练操作

下一篇： VUE的事件绑定修饰符练习及vue列表渲染及条件渲染练习，vue键盘事件+数组方式参数的传递学习及vue的计算属性访问器属性及侦听属性练习以及vue注册组件自定义标签及子组件向父组件传参及父组件向父组件传参

推荐阅读