box-sizing 的作用-伪类选择器的参数 an+b 的应用-媒体查询：@media 规则 -

box-sizing 的作用-伪类选择器的参数 an+b 的应用-媒体查询：@media 规则

一、box-sizing 的作用

1.属性定义及使用说明

box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

默认情况下，元素的宽度(width) 和高度(height)计算方式如下：

width(宽度) + padding(内边距) + border(边框) = 元素实际宽度 
height(高度)+padding(内边距) + border(边框) = 元素实际高度

2.属性值

content-box
说明
默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box

说明
告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

示例

代码语言

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>盒模型与计算方式</title>
</head>
<body>
  <div class="box"></div>
  <style>
    /* 盒模型常用属性
    1.width
    2.height
    3.border
    4.paddin
    5.margin
    */
    .box {
      width: 200px;
      height: 200px;
      background-color: chartreuse;
      border: 10px dashed black;
      background-clip: content-box;
      /* 内边距：位于边框与内容之间的区域，呼吸区，像包装 */
      padding: 20px;
      /* 200+ 20*2+10*2=260 */
      /* 目前是W3C的标准盒子 */
      /* IE盒子，怪异盒子，通过box-sizing来指定内容区的边界在哪里 */
      /* 默认height/width就是内容区大小 */
      box-sizing: content-box;
      /* 我的目标将一个260*260 ----200*200 */
      /* width = width+ padding + border= 200; */
      /* 指定盒模型的边界在边框就行了 */
      box-sizing: border-box;
      /* 通过收缩原来的内容区大小，来保证盒子在页面中的占据的空间不变 */
      /* margin: 外边距 */
      /* 盒模型的四个方向，是可以独立设置的 */
      /* padding border  margin */
    }
    * {
       padding: 0;
       margin: 0;
      /* 盒子大小计算方式 */
       box-sizing: border-box;
     }
       </style>
</html>

二、伪类选择器的参数 an+b 的应用

示例

代码语言

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width, initial-scale=1.0" />
    <title>伪类选择器参数</title>
  </head>
  <body>
    <ul class="list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <!-- <p>demo1</p> -->
      <li>
        item4
        <!-- <ul>
                <li>item4-1</li>
                <li>item4-2</li>
                <li>item4-3</li>
            </ul> -->
      </li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
    </ul>
    <input type="text" />
    <input type="text" disabled />
  </body>
  <style>
    /* :nth-of-type()这个就是参数 */
    /* :nth-of-type(参数) */
    /* 参数 = an+b a,n,b = [0,1,2,3,4,.....] */
    /* a:系数，n:计数器， b:偏移量 */
    /* 元素得有效编号：必须从1开始，n从0开始，b也是从0开始 */
    /* :nth-of-type(3)   === :nth-of-type(0n+3) */
    .list > :nth-of-type(0n + 3) {
      background-color: red;
    }
    /* 1n  全部 */
    /* .list > :nth-of-type(1n) {
          background-color: hotpink;
        } */
    /* 1n+b    b从第几个开始 */
    .list > :nth-of-type(1n + 3) {
      background-color: red;
    }
    /* 1*0+3=3
        1*1+3=4 计算过程*/
    /* 因为1*任何数都不变，所以1可以不写 */
    /* 从3开始 */
    .list > :nth-of-type(n + 3) {
      background-color: blue;
    }
    /* 选中匹配所有的偶数元素 */
    .list > :nth-of-type(2n) {
      background-color: aquamarine;
    }
    /* even 偶数 */
    .list > :nth-of-type(even) {
      background-color: red;
    }
    /* 选中匹配所有的奇数元素 */
    .list > :nth-of-type(2n + 1) {
      background-color: red;
    }
    /* 奇数 odd*/
    .list > :nth-of-type(odd) {
      background-color: blue;
    }
    /* 只选前面三个 */
    .list > :nth-of-type(-n + 3) {
      background-color: navajowhite;
    }
    /* -1*0+3=3
        -1*1+3=2
        -1*2+3=1 */
    .list > :nth-last-of-type(-n + 3) {
      background-color: navajowhite;
    }
    /*
        总结：
        1.获取指定的某个（b)
        2.获取前几个（n-b)
        3.获取指定位置后的全部元素（n+b)
        4。获取全部偶数（2n/even)或者奇数（2n+1/odd)元素 */
    /* :first-child
    :nth-child() */
     </style>
</html>

三、常用单位

px,em,rem,vh,vw

 绝对单位：px，像素，与设置相关，一英寸有96像素
 相对单位:
 1.em,rem,与字号相关 font-size
 2.vw,vh.与视口相关（可视窗口大小）
 3.1em=16px像素
 4.em永远和当前或父级的font-size大小绑定的
 5.1rem=10px
 6.浏览器的默认最小字号为12px
 7.vh,vw 将视口看成100份，每一份是1 相当于1%个vh,vw

代码语言

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>常用单位</title>
  </head>
  <body>
    <!-- px,em,rem,vh,vm -->
    <div class="box"></div>
    <style>
      /* 绝对单位i：px ,像素，与设备相关，一英寸有96px */
      /* 相对单位 */
      /* 1.em rem  ,与字号相关  font-size */
      /* 2.vm ,vh  与可视窗口相关 */
      .box {
        /* width: 160px; */
        width: 10em;
        /* height: 80px; */
        /* 1em=font-size */
        height: 5em;
        box-sizing: border-box;
        background-color: seagreen;
        /* font-size: 32px; */
        /* em永远和当前或者父级的font-size 大小绑定 */
      }
      :root {
        font-size: 10px;
        /* rem  可以用来引用html中的font-size  */
        /* 这事根元素中的字号专用于布局了 */
      }
      .box {
        /* 我想得到一个160*80的盒子
        16rem=16*10 */
        width: 16rem;
        height: 8rem;
      }
      body {
        font-size: 16px;
      }
    </style>
    <p>hello world</p>
    <!-- 理论上讲,p中的文本大小应该是10px,但是有个最小字号问题12px问题 ,浏览器的最小字号 -->
    <!-- vw,vw,将视口看成100份,每一份就是一个vw/vh -->
    <style>
      .box {
        /* 盒子宽度永远是视口的五分之一:20% */
        width: 20vw;
        height: 10vh;
      }
    </style>
  </body>
</html>

四、媒体查询：@media 规则

代码语言

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>媒体查询</title>
    <style>
      /* 媒体:屏幕,打印机 */
      /* 查询：查询当前屏幕宽度变化 */
    </style>
  </head>
  <body>
    <button class="btn small">按钮1</button>
    <button class="btn middle">按钮2</button>
    <button class="btn large">按钮3</button>
  </body>
  <style>
    /* 移动优先，从最小屏幕开始进行媒体查询 */
    @media (min-width: 480px) {
      html {
        font-size: 12px;
      }
    }
    @media (min-width: 640px) {
      html {
        font-size: 14px;
      }
    }
    @media (min-width: 720px) {
      html {
        font-size: 16px;
      }
    }
    /* 桌面优先/pc优先，由大屏到小屏幕 */
    @media (max-width: 720px) {
      html {
        font-size: 16px;
      }
    }
    @media (max-width: 640px) {
      html {
        font-size: 14px;
      }
    }
    @media (max-width: 480px) {
      html {
        font-size: 12px;
      }
    }
    /* 边界问题 ，要保留 */
    @media (min-width: 720px) {
      html {
        font-size: 16px;
      }
    }
    /* 区间媒体查询 */
    @media (min-width: 480px) and (max-width: 640px) {
      body {
        background-color: yellow;
      }
    }
  </style>
</html>
 /* 移动优先，从最小屏幕开始进行媒体查询 */
        @media (min-width:480px) {
          html {
              font-size: 12px;
            }
        }
        @media (min-width:640px) {
          html {
              font-size: 14px;
            }
        }
        @media (min-width:720px) {
          html {
              font-size: 16px;
            }
        }
    /* 桌面优先/pc优先，由大屏到小屏幕 */
        @media (max-width:720px) {
          html {
              font-size: 16px;
            }
        }
        @media (max-width:640px) {
          html {
              font-size: 14px;
            }
        }
        @media (max-width:480px) {
          html {
              font-size: 12px;
            }
        }
        /* 边界问题 ，要保留 */
        @media (min-width:720px) {
          html {
              font-size: 16px;
            }
        }
        /* 区间媒体查询 */
        @media (min-width:480px) and (max-width:640px) {
          body{
            background-color: yellow;
          }
        }
  </style>
</html>