Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS伪类和媒体优先
Blogger Information
Blog 40
fans 0
comment 0
visits 27866
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
CSS伪类和媒体优先
初见
Original
407 people have browsed it

CSS伪类及媒体优先

box-sizing属性

  • 解决问题
  1. width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
  2. height(高度) + padding(内边距) + border(边框) = 元素实际高度
  3. 由于padding border等大小的改变，回改变盒子的大小，造成每修改一次padding 或border都要修改一次盒子的宽度或高度，为了解决这一问题引入了box-sizing。box-sizing有三个属性
  4. box-sizing: content-box|border-box|inherit;
  5. content-box 默认值 元素大小受到padding和border影响
  6. border-box 修改padding或border不影响元素实际大小
  7. inherit 从父元素继承
  • 实例演示如下
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <h2>content-box 默认</h2>
  11.     <div class="box1"></div>
  12.     <style>
  13.       .box1 {
  14.         background-color: thistle;
  15.         width: 10em;
  16.         height: 10em;
  17.         border: 2em solid red;
  18.         padding: 2em;
  19.         box-sizing: content-box;
  20.       }
  21.     </style>
  22.     <h2>border-box</h2>
  23.     <div class="box2"></div>
  24.     <style>
  25.       .box2 {
  26.         background-color: thistle;
  27.         width: 10em;
  28.         height: 10em;
  29.         border: 2em solid red;
  30.         padding: 2em;
  31.         box-sizing: border-box;
  32.       }
  33.     </style>
  34.   </body>
  35. </html>

默认
box-sizing

CSS伪类

  • 常用知识点
  1.  even =2n
  2.  odd =2n+1
  3.  :nth-of-type(an+b)  a是系数从1开始，n是计数器从0开始，b是偏移量从0开始
  4.  :nth-of-type(n+3) 从第三个开始
  5.  :nth-of-type(-n+3) 前三个
  6.  :nth-last-of-type(-n+3) 最后三个
  7.  not(:nth-of-type(3)) 排除第三个
  • 实例代码
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>an+b 伪类</title>
  8.   </head>
  9.   <body>
  10.     <h1>选择偶数行和奇数行</h1>
  11.     <ul class="list">
  12.       <li>item1</li>
  13.       <li>item2</li>
  14.       <li>item3</li>
  15.       <li>item4</li>
  16.       <li>item5</li>
  17.       <li>item6</li>
  18.       <li>item7</li>
  19.       <li>item8</li>
  20.     </ul>
  21.     <style>
  22.       .list > :nth-of-type(odd) {
  23.         background-color: teal;
  24.         /*  odd=2n+1 */
  25.       }
  26.       .list > :nth-of-type(even) {
  27.         background-color: tomato;
  28.         /* 偶数行 even=2n */
  29.       }
  30.     </style>
  31.     <h1>从第3行开始 排除倒数第二行</h1>
  32.     <ul class="list2">
  33.       <li>item1</li>
  34.       <li>item2</li>
  35.       <li>item3</li>
  36.       <li>item4</li>
  37.       <li>item5</li>
  38.       <li>item6</li>
  39.       <li>item7</li>
  40.       <li>item8</li>
  41.     </ul>
  42.     <style>
  43.       .list2 > :nth-of-type(n + 3):not(:nth-last-of-type(2)) {
  44.         background-color: yellow;
  45.       }
  46.     </style>
  47.     <h1>最后5行，排除倒数第二行</h1>
  48.     <ul class="list3">
  49.       <li>item1</li>
  50.       <li>item2</li>
  51.       <li>item3</li>
  52.       <li>item4</li>
  53.       <li>item5</li>
  54.       <li>item6</li>
  55.       <li>item7</li>
  56.       <li>item8</li>
  57.       <li>item9</li>
  58.     </ul>
  59.     <style>
  60.       .list3 > :nth-last-of-type(-n + 5):not(:nth-last-of-type(2)) {
  61.         background-color: violet;
  62.       }
  63.     </style>
  64.     <h1>前5行，排除第3行</h1>
  65.     <ul class="list4">
  66.       <li>item1</li>
  67.       <li>item2</li>
  68.       <li>item3</li>
  69.       <li>item4</li>
  70.       <li>item5</li>
  71.       <li>item6</li>
  72.       <li>item7</li>
  73.       <li>item8</li>
  74.     </ul>
  75.     <style>
  76.       .list4 > :nth-of-type(-n + 5):not(:nth-of-type(3)) {
  77.         background-color: turquoise;
  78.       }
  79.     </style>
  80.   </body>
  81. </html>

效果如下

css伪类

媒体查询

  • 移动优先

移动优先从小屏到大屏，代码如下

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <!-- 查询当前屏幕的变化 -->
  11.     <!-- <div class="box"></div>
  12.     <style>
  13.       :root {
  14.         font-size: 10px;
  15.       }
  16.       .box {
  17.         width: 16rem;
  18.         height: 8rem;
  19.         background-color: tomato;
  20.       }
  21.     </style> -->
  22.     <button class="btn small">按钮1</button>
  23.     <button class="btn middle">按钮2</button>
  24.     <button class="btn large">按钮3</button>
  25.     <style>
  26.       html {
  27.         font-size: 10px;
  28.       }
  29.       .btn {
  30.         background-color: seagreen;
  31.         color: white;
  32.         border: none;
  33.         outline: none;
  34.       }
  35.       .btn:hover {
  36.         cursor: pointer;
  37.         opacity: 0.8;
  38.         transition: 0.3s;
  39.       }
  40.       .btn.small {
  41.         font-size: 1.2rem;
  42.         padding: 0.4rem 0.8rem;
  43.       }
  44.       .btn.middle {
  45.         font-size: 1.6rem;
  46.         padding: 0.4rem 0.8rem;
  47.       }
  48.       .btn.large {
  49.         font-size: 1.8rem;
  50.         padding: 0.4rem 0.8rem;
  51.       }
  52.       /* 移动优先 */
  53.       @media (min-width: 480px) {
  54.         html {
  55.           font-size: 12px;
  56.         }
  57.       }
  58.       @media (min-width: 640px) {
  59.         html {
  60.           font-size: 14px;
  61.         }
  62.       }
  63.       @media (min-width: 720px) {
  64.         html {
  65.           font-size: 16px;
  66.         }
  67.       }
  68.     </style>
  69.   </body>
  70. </html>

效果如下
移动优先

  • PC优先

pc优先从大屏到小屏，代码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <!-- 查询当前屏幕的变化 -->
  11.     <!-- <div class="box"></div>
  12.     <style>
  13.       :root {
  14.         font-size: 10px;
  15.       }
  16.       .box {
  17.         width: 16rem;
  18.         height: 8rem;
  19.         background-color: tomato;
  20.       }
  21.     </style> -->
  22.     <button class="btn small">按钮1</button>
  23.     <button class="btn middle">按钮2</button>
  24.     <button class="btn large">按钮3</button>
  25.     <style>
  26.       html {
  27.         font-size: 10px;
  28.       }
  29.       .btn {
  30.         background-color: seagreen;
  31.         color: white;
  32.         border: none;
  33.         outline: none;
  34.       }
  35.       .btn:hover {
  36.         cursor: pointer;
  37.         opacity: 0.8;
  38.         transition: 0.3s;
  39.       }
  40.       .btn.small {
  41.         font-size: 1.2rem;
  42.         padding: 0.4rem 0.8rem;
  43.       }
  44.       .btn.middle {
  45.         font-size: 1.6rem;
  46.         padding: 0.4rem 0.8rem;
  47.       }
  48.       .btn.large {
  49.         font-size: 1.8rem;
  50.         padding: 0.4rem 0.8rem;
  51.       }
  52.       /* pc优先 */
  54.       @media (max-width: 720px) {
  55.         html {
  56.           font-size: 16px;
  57.         }
  58.       }
  59.       @media (max-width: 640px) {
  60.         html {
  61.           font-size: 14px;
  62.         }
  63.       }
  64.       @media (max-width: 480px) {
  65.         html {
  66.           font-size: 12px;
  67.         }
  68.       }
  69.       @media (min-width: 720px) {
  70.         html {
  71.           font-size: 16px;
  72.         }
  73.       }
  74.     </style>
  75.   </body>
  76. </html>

效果如下

pc优先

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