search

博客列表 >CSS伪类和媒体优先

CSS伪类和媒体优先

初见
初见原创
2021年09月26日 17:10:10406浏览

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优先

上一条：伪类、字题图标 、盒模型的计算方法、单位和媒体查询下一条：CSS Flex 布局语法教程
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多