博客列表 >1. box-sizing属性解决了什么问题?2. 伪类选择器的参数 an+b的经典应用场景,实例演示,3. 媒体查询移动优先与PC优先的区别与联系,实例演示

1. box-sizing属性解决了什么问题?2. 伪类选择器的参数 an+b的经典应用场景,实例演示,3. 媒体查询移动优先与PC优先的区别与联系,实例演示

⁶
原创
2021年09月30日 08:43:58445浏览

1. box-sizing属性解决了什么问题

答案;通过box- sizing属性来指定内容区的边界在哪里


2伪类选择器的参数 an+b的经典应用场景,实例演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>伪类选择器的参数</title>
  8. </head>
  9. <body>
  10. <ul class="list">
  11. <li>item1</li>
  12. <li>item2</li>
  13. <li>item3</li>
  14. <li>item4</li>
  15. <li>item5</li>
  16. <li>item6</li>
  17. <li>item7</li>
  18. <li>item8</li>
  19. </ul>
  20. <style>
  21. /*:nth-0f-type(参数)*/
  22. /*大参数=an+ba,n,b=[0,1,2,3,4,..]*/
  23. /*a:系数, n:计算器乘, b:偏移量*/
  24. /*元素的有效编号: 必须从1开始,n是从0开始,b也是从0开始*/
  25. /* nth-of-type(3) h-of-type(on+3)*/
  26. .list > :nth-of-type(0n + 3) {
  27. /* background-color: darkkhaki; */
  28. }
  29. /* 1n+b: */
  30. .list > :nth-of-type(1n + 3) {
  31. /* background-color: red; */
  32. }
  33. /*k10+3=3*/
  34. /*1*1+3=4*/
  35. /*1*2+3=5*/
  36. /*大因为1乘任何数都不变,所以1可以不写*/
  37. .list > :nth-of-type(n + 3) {
  38. /* background-color: rebeccapurple;*/
  39. }
  40. /*匹配所有的偶数元素*/
  41. /*.list > :nth-of-type(2n) {
  42. background-color: rebeccapurple;
  43. }*/
  44. /* even表示偶数
  45. .list > :nth-of-type(even) {
  46. background-color: rebeccapurple;
  47. }*/
  48. /* 2 * 1 = 2 2*2 = 4 */
  49. /*奇数
  50. .list > :nth-of-type(2n + 1) {
  51. background-color: rebeccapurple;
  52. }*/
  53. /*.list > :nth-of-type(odd) {
  54. background-color: rebeccapurple;
  55. }*/
  56. /*前三个*/
  57. .list > :nth-of-type(-n + 3) {
  58. background-color: rebeccapurple;
  59. }
  60. /*-1*0+3=3
  61. 1*1+3=2
  62. 1*2+3=1
  63. 1*3+3=0(非法索引,匹配就结束了)*/
  64. /*后三个*/
  65. .list > :nth-last-of-type(-n + 3) {
  66. background-color: rebeccapurple;
  67. }
  68. /*大总结一下
  69. 1.获取指定的某一个:(
  70. 2,获取前几个,(n-b)
  71. 3.获取指定位置后的全部元素,(n+b)
  72. 4.获取全部偶数(2n/even)或奇数(2n+1/0dd)元素*/
  73. html {
  74. background-color: royalblue;
  75. }
  76. /*:root = html */
  77. :root {
  78. background-color: saddlebrown;
  79. }
  80. </style>
  81. <input type="text" />
  82. <input type="text" disabled />
  83. <style>
  84. input:disabled {
  85. background-color: red;
  86. }
  87. input:enabled {
  88. background-color: royalblue;
  89. }
  90. </style>
  91. </body>
  92. </html>

. 3媒体查询移动优先与PC优先的区别与联系,实例演示

  1. /* 我只要动态的改变rem的大小,就可以动态的调整每个按钮的大小 */
  2. /* 移动优先,从最小的屏幕开始进行媒体查询 */
  3. /* @media (min-width:480px) {
  4. html {
  5. font-size: 12px;
  6. }
  7. }
  8. @media (min-width:640px) {
  9. html {
  10. font-size: 14px;
  11. }
  12. }
  13. @media (min-width:720px) {
  14. html {
  15. font-size: 16px;
  16. }
  17. }*/
  18. /* 桌面优先/pc优先 由大屏到小屏幕 */
  19. @media (max-width720px) {
  20. html {
  21. font-size: 16px;
  22. }
  23. }
  24. @media (min-width640px) {
  25. html {
  26. font-size: 14px;
  27. }
  28. }
  29. @media (min-width480px) {
  30. html {
  31. font-size: 12px;
  32. }
  33. }
  34. @media (min-width720px) {
  35. html {
  36. font-size: 16px;
  37. }
  38. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议