Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1. box-sizing属性解决了什么问题?2. 伪类选择器的参数 an+b的经典应用场景,实例演示，3. 媒体查询移动优先与PC优先的区别与联系,实例演示
Blogger Information
Blog 15
fans 0
comment 0
visits 8949
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1. box-sizing属性解决了什么问题?2. 伪类选择器的参数 an+b的经典应用场景,实例演示，3. 媒体查询移动优先与PC优先的区别与联系,实例演示
⁶
Original
436 people have browsed it

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开始*/
  26.       /* nth-of-type(3)     h-of-type(on+3)*/
  27.       .list > :nth-of-type(0n + 3) {
  28.         /*   background-color: darkkhaki;   */
  29.       }
  31.       /*     1n+b:   */
  32.       .list > :nth-of-type(1n + 3) {
  33.         /*    background-color: red;  */
  34.       }
  36.       /*k10+3=3*/
  37.       /*1*1+3=4*/
  38.       /*1*2+3=5*/
  39.       /*大因为1乘任何数都不变,所以1可以不写*/
  40.       .list > :nth-of-type(n + 3) {
  41.         /*   background-color: rebeccapurple;*/
  42.       }
  44.       /*匹配所有的偶数元素*/
  45.       /*.list > :nth-of-type(2n) {
  46.         background-color: rebeccapurple;
  47.       }*/
  48.       /*    even表示偶数
  49.       .list > :nth-of-type(even) {
  50.         background-color: rebeccapurple;
  51.       }*/
  52.       /* 2 * 1 = 2     2*2 =  4          */
  54.       /*奇数
  55.       .list > :nth-of-type(2n + 1) {
  56.         background-color: rebeccapurple;
  57.       }*/
  58.       /*.list > :nth-of-type(odd) {
  59.         background-color: rebeccapurple;
  60.       }*/
  62.       /*前三个*/
  63.       .list > :nth-of-type(-n + 3) {
  64.         background-color: rebeccapurple;
  65.       }
  66.       /*-1*0+3=3
  67.         1*1+3=2
  68.         1*2+3=1
  69.         1*3+3=0(非法索引,匹配就结束了)*/
  71.       /*后三个*/
  72.       .list > :nth-last-of-type(-n + 3) {
  73.         background-color: rebeccapurple;
  74.       }
  76.       /*大总结一下
  77.         1.获取指定的某一个:(
  78.         2,获取前几个,(n-b)
  79.         3.获取指定位置后的全部元素,(n+b)
  80.         4.获取全部偶数(2n/even)或奇数(2n+1/0dd)元素*/
  82.       html {
  83.         background-color: royalblue;
  84.       }
  85.       /*:root  = html */
  86.       :root {
  87.         background-color: saddlebrown;
  88.       }
  89.     </style>
  91.     <input type="text" />
  92.     <input type="text" disabled />
  94.     <style>
  95.       input:disabled {
  96.         background-color: red;
  97.       }
  98.       input:enabled {
  99.         background-color: royalblue;
  100.       }
  101.     </style>
  102.   </body>
  103. </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.       }*/
  19.       /* 桌面优先/pc优先 由大屏到小屏幕 */
  20.       @media (max-width：720px) {
  21.         html {
  22.           font-size: 16px;
  23.         }
  24.       }
  25.       @media (min-width：640px) {
  26.         html {
  27.           font-size: 14px;
  28.         }
  29.       }
  30.       @media (min-width：480px) {
  31.         html {
  32.           font-size: 12px;
  33.         }
  34.       }
  36.       @media (min-width：720px) {
  37.         html {
  38.           font-size: 16px;
  39.         }
  40.       }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post