移动WEB - 自我总结

移动WEB-day01

1. 平面转换 [transform]

1.1 位移

1.2 旋转

​ 1.2.1 转换原点

1.3 缩放

1.4 符合属性写法

1.1 位移 [ transform: translate(x, y); ]

• 代码

  transform: translateX(-200px);
  transform: translateY(200px);
  transform: translate(-200px, 200px);
  transform: translate(100%, 100%);
  

• 两个值，第一个x轴，第二个y轴，中间用逗号隔开

• 方向的上下左右通过值的正负号来决定，负数（上左），正数（下右）

1.1.1 位移实现盒子水平垂直居中

.son {
      position: absolute;
      left: 50%;
      top: 50%;
      /*  margin-left: -100px;
          margin-top: -50px; */
      /* 百分比: 参考自身尺寸计算 */
      transform: translate(-50%, -50%);

      width: 200px;
      height: 100px;
      background-color: pink;
    }

1.2 旋转 [ transform: rotate(360deg); ]

• 代码

  transform: rotate(360deg);
  

• 角度单位：deg

• 正负值都可以：正值顺时针，负值逆时针

1.2.1 转换原点 [ transform-origin: (left center) ]

• 代码

  transform-origin: left center; 
  transform-origin: 50px 100px;
  /* 使用百分比参考的是自身的宽高 */
  transform-origin: 10% 50%;
  

• 转换原点默认为中心点

• 值用空格隔开，第一个值为x轴，第二个值为y轴

1.3 缩放 [ transform: scale(2); ]

• 代码

  /*变大*/
  transform: scale(1.6);
  /* 变小*/
  transform: scale(0.6);
  /*默认*/
  transform: scale(1, 1);
  

• 值为倍数没有单位，第一个为x轴的倍数，第二个为y轴的倍数，

• 缩放是转换的一种方式，能够改变盒子的大小

• 值大于1变大，小于1变小,等于1表示不变

1.4 符合属性写法

• 代码

  /* 旋转一定写在最后，因为先写旋转，那么旋转会改变x轴的方向，所以会转圆的同时越来越远 */
        transform: translate(600px) scale(2) rotate(360deg);
  

• 特点

  • transform是符合属性，不能重复使用，会被层叠掉

  • 同时有多个状态需要用符合属性写法

  • 旋转一定写在最后，因为先写旋转，那么旋转会改变x轴的方向，所以会转圆的同时越来越远

2. 渐变 [background-image: linear-gradient(颜色1,颜色2);]

• 代码

  background-image: linear-gradient(
  	/*渐变的方向,可以跟度数，正商为0度，顺时针增加度数*/
  	/*to right,*/
  	to 135deg,
  	pink,skyblue
  );
  

  background-image: linear-gradient(
  	/* 向上渐变，由第一个颜色向第二个颜色渐变*/
  	to top,
  	/*第一个颜色透明度为 1 的黑色*/
  	rgba(0, 0, 0, 1),
  	/*透明色*/
  	transparent
  	/*rgba(0, 0, 0, 0)*/
  );
  

• 概念：一个颜色逐渐向另一个颜色发生变化

• to top: 决定渐变的方向，可以跟方位名词，也可以跟度数，上方的中间为 0 度开始算，顺时针的增加度数

移动WEB-day02

1. 空间转换 [transfrom]

• 空间转换也叫做3D转换，x, y, z 三条坐标构成了一个立体空间，z轴位置与视线方向相同。

1.1 3D-位移

1.1 3D-位移 [ transform: translate3d(x, y, z); ]

• 代码

  .box:hover {
        /* translate3d不可以简写成一个值，必须写三个 */
        /* transform: translate3d(100px);  --  错误的写法 */
  
        /* 中间用逗号隔开  第一个值x轴移动距离  第二个值y轴移动距离  第三个值z轴移动距离*/
        /* transform: translate3d(100px, 0, 0); */
        /* transform: translate3d(100px, 100px, 0); */
  
        /* z轴移动的距离不加透视效果是看不出来移动的,要给他的父亲加透视 */
        transform: translate3d(100px, 100px, 100px);
        transform: translateX(100px) translateY(100px) translateZ(100px);
      }
  

• 注意点：

  • 不可以简写成一个值，必须写三个值

  • 中间用逗号隔开

  • 第一个值为x轴移动距离，第二个值为y轴移动距离，第三个为z轴的移动距离（不加透视效果显示不出来z轴的移动）

  • 正负值均可，值可以取单位数值，可以取百分比

1.2 透视效果 [perspective]

• ！！！需要将该属性添加给父盒子！！！
• 通过 perspective 可以增加立体的效果，让人产生 3D 的感觉
• 如果对 z 轴有操作，一定要加perspective,添加上这个属性才可以显示出立体效果
• 效果取决于后面的值，可以改变视觉的强和弱，建议值（800 ~ 1200），值小效果强，值大效果弱

1.3 3D-旋转

• 代码

  /*空间旋转-X轴*/
  transform: rotateX(90deg);
  /*空间旋转-Y轴*/
  transform: rotateY(365deg);
  /*空间旋转-Z轴*/
  transform: rotateZ(360deg);
  

• 旋转的方向，f左手法则，大拇指指向正值方向

1.4 立体呈现 [ transform-style: preserve-3d; ]

• 代码

  transform-style: preserve-3d;
  

• 注意

  • 想让盒子叠着的两个盒子分开就给他的父级加这个属
  • 空间内，转换元素都有自己独立的坐标互不影响

2. 动画 [ animation ]

2.1 体验动画

• 先定义在调用,代码如下：

  /* 一. 定义动画：从200变大到600 */
  @keyframes move {
      from {
          width: 200px;
      }
      to {
          width: 600px;
      }
  }
  /* 二. 调用动画：anmiation 调用*/
  .box {
      animation: move 2s 3;
  }
  

• 定义

  @keyframes move {
      /*使用百分比时，他是时间总长的百分比*/
      10% {
          width: 200px;
      }
      30% {
          width: 300px;
      }
      50% {
          width: 400px;
      }
  }
  .box {
      width: 200px;
      height: 100px;
      background-color: pink;
      animation: move 4s;
  }
  

  • 分比，10% 是在4s的百分之十开始变化成第一帧的样子； 30% 变化到时间的百分之三十的时候结束第一帧开始第二帧；50% 变化到时间的百分之五十结束第二帧，开始第三帧到结束

2.2 复合属性

• 属性
  • animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态;
• 值
  • 速度曲线：linear 匀速
  • 延迟时间：3s 3秒后开始，第二个时间为延迟时间
  • 重复次数：infinite 无限次数 (3 数字没有时间单位)
  • 动画方向：alternate 反向也有动画
  • 播放完毕时的状态：forwards 动画结束时保留最后一帧的样式
• 注意
  • 动画名称和动画时长必须赋值
  • 取值不分先后
  • 如果有两个时间值，第一个表示动画时长，第二个表示延迟时间

2.3 拆分写法

• 代码

  .box {
        width: 200px;
        height: 100px;
        background-color: pink;
  
        /* 动画的名称 */
        animation: change;
  
        /* 动画时长 */
        animation-duration: 1s;
      
        /* 执行的次数 */
        animation-iteration-count: infinite;
      
        /* 延迟时间 这个值是写在第二个的  第一个值是动画的运行时间*/  
        animation-delay: 2s;
  
        /* 动画完毕时的状态 
      	frowards:最后一帧状态
      	backwards:第一帧的状态 */
        animation-fill-mode: forwards;
      	
        /* 动画执行的方向 */
        animation-direction: altemate; /*为反向8?
  
        /* 速度曲线 */
        /* animation-timing-function: linear; */
        animation-timing-function: steps(3);
      
        /* 暂停动画 
          paused为暂停，通常配合：hover使用*/
        animation-play-state:paused;
      }
      @keyframes change {
        from {
          width: 200px;
        }
        to {
          width: 600px;
        }
    }
  

移动WEB-day03

1. 视口 [ viewport ]

• 概念：用来显示网页内容的区域（视口在【移动设备】上不等于浏览器窗口）

• 解决移动页面的首要问题是处理视口与浏览器窗口大小的关系

• 写移动端页面需要将视口的宽度调整至留恋其窗口的大小一致！！！

• 通过meat来调整视口的大小，目的是让视口和设备宽度的大小一致

  • 方法一：让视口的宽度等于设备宽度

    /*让视口和设备宽度的大小一致*/
    <meta name="viewport" content="width=device-width">
    

  • 方法二：让视口的宽度和设备的宽度是 1 : 1

    /*调整视口缩放比例 让设备宽度和视口宽度一样*/
    <meta name="viewport" content="initial-scale=1">
    

  • 方法三（推荐）：前两种方法的合体，为了兼容性问题，适配横竖屏，和更多机型

    /*前两种方法的合体，为了兼容性问题，适配横竖屏，和更多机型*/
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

• 总结

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dY09hRr3-1649576773954)(\images\1.png)]

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iN6s72GM-1649576773960)(\images\2.png)]

2. 二倍图

• 理论：图片是按照物理分辨率来计算的，CSS写样式是按逻辑分辨率写的。
• 作用：照片比照片的本身大两倍（避免模糊）

3. Flex布局/弹性布局

• 适用于来布局手机网页的一个新的方案
• 不脱标
• 要使用Flex，必须有父子关系，给父亲添加display: Flex;
• 父级添加了Flex布局，子元素行内样式可以直接设置宽高，不用转换显示模式
• 父元素设置了felx布局属性，子盒子的folat,clear,vertical-align会失效

3.1 组成部分

• 弹性容器（父级）

• 弹性盒子（子级）

  • 主轴（水平方向）

  • 侧轴/交叉轴 （垂直方向）

3.2 调节主轴/水平对齐方式 [ justify-content ]

3.2.1 主轴靠左 [ justify-content: flex-start; ]

• 代码

  /* 设置给父级 */
  display: flex;
  /* 默认值 */
  justify-content: flex-start;
  

3.2.2 主轴靠右 [ justify-content: flex-end; ]

• 代码

  /* 设置给父级 */
  display: flex;
  justify-content: flex-end;
  

3.2.3 主轴靠中间 [ justify-content: center; ]

• 代码

  /* 设置给父级 */
  display: flex;
  justify-content: center;
  

3.2.4 主轴对齐-两端对齐 [ justify-content: space-between; ]

• 代码

  /* 设置给父级 */
  display: flex;
  justify-content: space-between;
  

3.2.5 主轴对齐-环绕对齐 [ justify-content: space-around; ]

• 代码

  /* 设置给父级 */
  display: flex;
  justify-content: space-around;
  

3.2.6 主轴对齐-等距离环绕对齐 [ justify-content: space-evenly; ]

• 代码

  /* 设置给父级 */
  display: flex;
  justify-content: space-evenly;
  

3.3 调节垂直/侧轴对齐方式 [ align-items ]

3.3.1 子盒子拉伸 [ align-items: stretch; ]

• 代码

  /* 设置给父级 */
  display: flex;
  /* 默认值  子盒子没有高度的时候会拉伸到父盒子的高度*/
  align-items: stretch;
  

3.3.2 子盒子靠顶部 [ align-items: flex-start; ]

• 代码

  /* 设置给父级 */
  display: flex;
  align-items: flex-start;
  

3.3.3 子盒子靠底部 [ align-items: flex-end; ]

• 代码

  /* 设置给父级 */
  display: flex;
  align-items: flex-end;
  

3.3.4 子盒子靠中间 [ align-items: center; ]

• 代码

  /* 设置给父级 */
  display: flex;
  align-items: center;
  

3.3.5利用flex布局让块盒子居中

• 代码

  .box {
      width: 600px;
      height: 400px;
      border: 1px solid green;
      /* 1.给父盒子添加模式转换为Flex布局 */
      display: flex;
  }
  .item {
      /* 2.子盒子margin设置为auto，可实现垂直水平居中 */
      margin: auto;
      width: 100px;
      height: 100px;
      background-color: skyblue;
  }
  

3.4 伸缩比例

• flex属性是设置给子盒子的,父盒子要设置Flex布局

• 子设置伸缩比例时，比例关系是【分配】其父盒子剩余的空间

• 代码

  <!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>Flex 伸缩比例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        display: flex;
        width: 600px;
        height: 300px;
        margin: 100px auto;
        border: 1px solid #ccc;
      }
      .box .item {
        width: 150px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background-color: pink;
      }
      .box .item:nth-child(2) {
        /* box 的第二个人子盒子占剩余空间的 2/3 */
        flex: 2;
      }
      .box:last-child {
        /* box 的第三个人子盒子占剩余空间的 1/3 */
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
  </html>
  

知识点

1. 宽度不写的情况下的默认设置是 auto；宽度为自动时，其大小为父盒子的宽度 - 子盒子的内外边距和边框。

2. 快盒子的高度是被内容撑开的；给html设置高度为100%，那么就会得到一个和视口一样大的盒子；给body设置高度为100%，那么body会和html高度大小一样。

3. 背景图默认会平铺，值为两个（x轴 y轴）；也可以为方位名词，left的含义是让背景图的左侧边缘和盒子的左侧边缘重叠，其他方位名词同理。

4. pc端宽度一般都是给个固定版心，移动端宽度多数是100%

5. 分辨率：指的是水平和垂直方向的像素

   1. 物理分辨率：出场设置的物理分辨率
   2. 逻辑分辨率：通过软件缩放后显示的分辨率

移动WEB-day04

知识点

1. 多行文本溢出隐藏显示省略号

   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   /*显示行数*/
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   

   2. margin 的值可以为负数，这样会把盒子拉大

1. Flex 布局

1.1 主轴的方向 [ flex-direction ]

• 默认情况水平是主轴，垂直为侧轴

• 修改垂直为主轴时：在使用 jusity-content 时，调整的为垂直的对齐

• 主轴修改为垂直时，侧轴变为水平

• 代码

  /*默认主轴为行*/
  /* flex-direction: row;*/
  
  /*改变主轴为列*/
  flex-direction: column;
  
  /* 主轴(垂直方向)两端对齐 */
  justify-content: space-between;
  /* 主轴(垂直方向)环绕 */
  justify-content: space-around;
  /* 主轴(垂直方向)等距离环绕 */
  justify-content: space-evenly;
  
  /* 此时在使用侧轴时调整的是水平方向的对齐 */
  /* 侧轴（水平方向）对齐方式为居中 */
  align-items: center;
  /* 默认为拉伸，前提是子盒子没宽，主轴（水平方向）拉伸，因为主轴方向已经调整 */
  align-items: stretch;
  

1.2 Flex 弹性盒子换行

• 不缩放盒子，强制（碰到父亲盒子的边界）换行

• 如果使用 flex-wrap: wrap; 将盒子换行后可以针对每一行进行布局处理

• align-content 的取值与 justify-conter 一致

• 代码

  display: flex;
  
  /* 不收缩盒子，遇到边界强制换行 */
  flex-wrap: wrap;
  
  /* 如果使用 flex-wrap: wrap; 将盒子换行后，可以针对每一行进行布局 */
  /* align-content  的取值与  justify-content  一直 */
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;
  align-items: space-between;
  align-items: space-around;
  /* 注意：没有 align-items: space-evenly; */
  

1.3 单独控制侧轴对齐

• 通过align-self 可以单独控制某个盒子在【侧轴】的对齐

  .box {
      display: flex;
      align-items: center;
      width: 600px;
      height: 400px;
      border: 1px solid #ccc;
  }
  /*让第二个子盒子单独侧轴靠上*/
  .items:nth-child(2) {
      align-self: flex-start;
  }
  

移动WEB-day05

1. margin负值

• 子盒子的margin取负值，可以把父盒子的padding值给抵消掉，如果超出父盒子就不会撑大盒子但是子盒子会变大

  <!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>Document</title>
    <style>
      .box {
        margin: 0 auto;
        width: 600px;
        height: 100px;
        padding: 0 20px;
        box-sizing: border-box;
        background-color: blue;
      }
      .xbox {
        margin-left: -20px;
        margin-right: -40px;
        height: 80px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="xbox"></div>
    </div>
  </body>
  </html>
  

2. rem

2.1 rem体验

• rem 是一个单位

• rem 长度是不固定，px单位是固定的，百分比或者flex布局只能保证宽度自适应高度不可以

• rem 写法（原理）

  1. 设置HTML标签字号

  2. 设置盒子的尺寸是rem单位

     • /* root */ 根标签

     • 1rem = 当前 根标签[html] 的字号大小

• 只要 html 字号大小发生改变，那么 rem 也会跟着变化

2.2 媒体查询

• 媒体查询相当于是一个条件判断

  <style>
      /* @media (具体条件) {
      	执行的 css
      } */
      
      @media (width: 375px) {
          html{
              background-color: pink;
          }
      }
      @media (width: 414px) {
          html {
              background-color: green;
          }
      }
  
      /* 大于375像素的时候 背景颜色改为pink */
      @media (min-width: 375px) {
        html{
          background-color: pink;
        }
      }
      /* 大于414像素的时候 背景颜色改为green */
      @media (min-width: 414px) {
        html {
          background-color: green;
        }
      }
      /* 使用min-width的时候 要【从小到大】顺序书写，不然会产生覆盖问题 */
    </style>
  

  • 注意代码顺序带来的影响
  • 使用min-width 的时候，切记书写顺序要【从小到大】

2.3 rem 适配

• rem + 媒体查询 就可以实现移动端的适配了
• rem + flexble.js 就可以实现移动端的适配了

2.3.1核心内容

```css
@media (width: 320px) {
      html {
        font-size: 32px;
      }
    }

@media (width: 375px) {
    html {
        font-size: 37.5px;
    }
}

@media (width: 414px) {
    html {
        font-size: 41.4px;
    }
}
```

• 在使用rem来适配网页布局的时候，有两个选择，分别为 媒体查询、JavaScript
• 但是 JavaScript会【更灵活】能够保证任意尺寸的改变都会设置新的 html 字号
• 媒体查询 和 JavaScript 实现原理一样

2.3.2 过程原理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4uKUXe2p-1649576773963)(C:\Users\Hi\AppData\Roaming\Typora\typora-user-images\image-20220312120044883.png)]

2.3.3 结论

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DMjswHxn-1649576773965)(.\images\rem-2.png)]

• 元素实际大小 / (设计稿宽度 / 10)

2.4 Less语法

• 需要配合vscode插件使用
  • 插件名称：Easy LESS

2.4.1 体验less

• 结论：

  • less 预处理器，他能让CSS更容易被管理！！！

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D2ea2pkb-1649576773967)(.\images\less.png)]

  • less是不可以被浏览器识别的，必须要将less转成css
  • 安装vscode的插件【Easy LESS】，保存就自动生成css文件按了

2.4.2 less注释

• CSS 的注释在 LESS 依然可以使用
  • /* 注释内容，一般用于【多行的注释】*/
  • // 注释的内容，一般用于【单行注释】

// 注释的文字

/*
多行注释
多行注释
多行注释
*/

2.4.3 计算

• less 能够很好的对 CSS 进行管理，其中的一个用法就是能够进行数学运算。

  • 运算符号
    • 加 +
    • 减 -
    • 乘 *
    • 除 ( / )
  • 由于CSS的语法本身就包含 / 所以出号必须【用括号括起来】
  • 如果表达式有多个单位, 以第一个单位为准

• less输入以下代码

  .box {
      // 加
      width: 100rem + 50px;
      // 减
      height: 100px - 50px;
      // 乘
      margin: 10px * 2px;
      // 除
      padding: (20px / 5px);
  }
  

• 保存后生成以下css文件，代码如下

  .box {
    width: 150rem;
    height: 50px;
    margin: 20px;
    padding: 4px;
  }
  

2.4.4 变量

• 变量就是一个代号

• 如何定义一个代号

  • @代号名：所代表的内容;

  // 变量就是一个【代号】
  
  // 如何定义一个代号？
  // 使用 @代号名：所代表的内容
  
  // @name: 小明;
  // 使用 name 来代表小名，我们将 @name 称为变量
  
  @color: green;
  .box {
      background-color: @color;
  }
  .navs a {
      color: @color;
  }
  

2.4.5 实现px转换rem

less 代码如下：

// 设计稿尺寸为 375px 除以 10

// 根据设计稿进行转换 rem 时需要除的数字
@rootSize: (375 / 10);

// 假如设计稿有一个盒子的宽度为 68px 高度为 29px 外边距为 15px
.box {
  width: (68rem / @rootSize);
  height: (29rem / @rootSize);
  margin: (15rem / @rootSize);
}

保存转换后的 CSS 代码：

.box {
  width: 1.81333333rem;
  height: 0.77333333rem;
  margin: 0.4rem;
}

2.4.6 嵌套

• 在嵌套中可以使用特殊符号 & 来代表【当前选择器】

less 代码如下：

.box {
    width: 200px;
    height: 200px;

    .nav {
        height: 100%;
        box-sizing: border-box;

        &-left {
            background-color: skyblue;
        }

        a {
            font-size: 15px;

            &:hover {
                color: red;
            }
        }
    }
}

保存转换后的 CSS 代码：

.box {
  width: 200px;
  height: 200px;
}
.box .nav {
  height: 100%;
  box-sizing: border-box;
}
.box .nav-left {
  background-color: skyblue;
}
.box .nav a {
  font-size: 15px;
}
.box .nav a:hover {
  color: red;
}

2.4.7 导入

• 导入从另一个 .less 文件中将代码加载（合并）进来
• 语法格式： @import ‘路径’
• 不要使用如下方式来导入！！！！
  • @import url()
  • 这是CSS的标准代码，但是很少使用（性能不好）
• 正确书写如下

less 代码如下：

@import './01-体验less.less';
@import './02-注释.less';

保存转换后的 CSS 代码：

.father {
  width: 150px;
  width: 1.81333333rem;
}
/* 块 / 多行 注释 */
/*
多行注释
多行注释
多行注释
*/

2.4.8 导出 （不是Less,而是【Easy LESS】插件提供的）

• 导出指的时将 .less 转换成一个 .css

• 这个要写在最顶端，而且要注释起来

• 默认情况 Easy LESS 在文件保存的时候就自动导出了，导出名与原来一样就变了后缀，导出目录路径跟当前是一样的

• 我们可以设置导出css 的名称、路径，只需要在【文件最顶端】写一个【注释】

• 语法

  out: .css 文件路径及文件

// out: ./css/out.css

@import './03-计算.less';

2.4.9 禁止导出（不是Less,而是【Easy LESS】插件提供的）

• 第一行添加一行注释内容

  // out: false, main: index.less
  

• 保存不导出，但是会导出index.css

移动WEB-day06

知识点

• 安装 [ px to rem & rpx ] 插件

  • 点开设置更改Root Font Size改成视口的十分之一
  • 直接输入px，会自转换对应的rem
  • 只支持在less文件使用

1. 关于位置伪类选择器

• 交集选择器

  • 即满足标签名是第一个，也满足第二个

    • div.box {}

    • a:hover {}

    • li:hover {}

    • p:hover {}

• li:first-child {}

  • 即满足是自己是 li 标签
  • 也要满足他是父元素的第一个元素

<html lang="en">
<head>
  <title>Document</title>
  <style>
    /*  这是错误的，这样改变不了
     .box b:first-child {
       color: red;
     }
    */
    /*  这是对的，即是 b 标签，又是box盒子里的第三个元素标签 */
     .box b:nth-child(3) {
       color: red;
     }
  </style>
</head>
<body>
  <div class="box">
    <i>wo</i>
    <em>ni</em>
    <b>ta</b>
  </div>
</body>
</html>

2. 粘性定位 [ position: sticky; ]

• 可以理解为 相对定位 + 固定定位

• 到达top的距离订在那

  <style>
      .box {
          position: relative;
          /* width: 200px; */
          height: 2000px;
      }
      .xbox {
          position: sticky;
          top: 0px;
          /* width: 100%; */
          height: 50px;
          background-color: skyblue;
      }
  </style>
  

3. vw / vh (新的也是用来做适配移动端)

• 相对视口计算结果,他是一个单位长度

• 他是视口宽度或者高度的百分之一

• 根据视口的宽度来决定vw和vh的大小

  • vw: viewport width
    • 1vw = 1/100 视口宽度
  • vw: viewport height
    • 1vh = 1/100 视口高度

• 总结

  • 通过 vw 或 vh 可以实现同 rem 一样的效果，屏幕大了，网页内容就会大一些，屏幕小了内容就会变小
  • 但是也是有区别的，使用 rem 人为的将设计稿分为 10 份，使用 vw 或 vh 则是有官方分成了 100 份
  • 建议都用 vw 来做，因为高度设备可能不一样，vw和vh可以共用，但是这样会很麻烦

• 适配方案

  1. 使用 vw 进行屏幕适配不需要动态调整字号
  • 不需要使用媒体查询
  • 不使用 flexbile.js
  2. 只需要让【设计稿中的元素尺寸 / 视口的 1%】

移动WEB-day07

响应式

• 使用一套代码在不同宽度的屏幕显示不同的布局。
• 开发响应式时，需要指定一个宽度范围，因此使用 min-width 或 max-width，使用时注意书写顺序，因为要利用 CSS 层叠性

1. 媒体查询 [ @media () {} ]

• 通过媒查询能够实现屏幕尺寸不同区间，执行不同的样式，在执行样式过程中会产生层叠。

• 实现响应式的核心

• 提到响应式布局，第一要想到的是媒体查询

• 在开发响应式的时候，媒体查询条件不可以是一个固定的宽度，应当是一个范围

• 代码

  /* 
      媒体查询的语法
      @media (条件) {
      执行的 css
  } 
  */
  
  /* 当屏幕的宽度大于等于1000时，表示的是一个范围 */
  @media (max-width: 1000px) {
      body {
          background-color: skyblue;
      }
  }
  
  /* 当屏幕的宽度小于等于900时，表示的是一个范围 */
  @media (max-width: 900px) {
      body {
          background-color: pink;
      }
  }
  

1.1 媒体查询-书写顺序

• 【 min-width 和 max-width 不可以混着用 】

  • 语法上不是说不能混着用，只是容易混乱

• 在使用媒体查询表示一个范围时要考虑层叠性

• 书写顺序

  • min-width: 从小往大写
    • 条件（小于等于的时候）
  • max-width: 从大往小写
    • 条件（大于等于的时候）

• 在实际使用中遵行书写顺序的规则，无论使用 min-width 还是 max-width 都可以表示区间，一定要保证顺序，不可以两者混着使用

• 扩充点 优先使用

  • 移动（WEB） 优先
    • 优先使用 min-width
    • 因为默认情况下是 WEB 样式
  • PC（WEB） 优先
    • 优先使用 max-width
    • 因为默认情况下是 PC 样式

1.2 媒体查询-link

• 屏幕宽度满足设定的区间时才会调用对应的样式，可以调用多个，注意 link 引入的顺序

• 代码

  <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" />
      <!-- 注意书写顺序 -->
      <link rel="stylesheet" href="./two.css" media="(min-width: 768px)">
      <link rel="stylesheet" href="./one.css" media="(min-width: 1200px)">
      <title>媒体查询</title>
    </head>
  

1.3 媒体查询关键字

1.3.1 简写

/* 简写 */
/* @media () {
} */

1.3.2 带屏幕 并且

/* 当浏览器在处于【带屏幕】的设备中运行网页 */
/* and 翻译成是【并且】的意思 */
@media screen and (min-width: 768px) {
    
}
/* 【不建议这样写】可以这么写但是容易混乱 */
@media (min-width: 768px) and (max-width: 1200px) {
    
}

1.3.3 仅仅[only] 带屏幕[screen] 并且

/* only 是【仅仅的】意思 */
/* 【仅仅】是在【带屏幕】的设备上运行网页 */
/* 【并且】屏幕宽度大于等于768px */
@media only screen and (min-width: 768px) {
    
}

1.3.4 除了[not] 带屏幕[screen] 并且[and]

/* not 是【除了】意思 */
/* 【除了】是在【带屏幕】的设备上运行网页 */
/* 【并且】屏幕宽度大于等于768px */
@media not screen and (min-width: 768px) {
    
}

1.3.5 屏幕方向[landscape/portrait]

/* 当屏幕的方向处于横屏时 */
@media (orientation: landscape) {
    body {
        background-color: pink;
    }
}
/* 当屏幕的方向处于竖屏时 */
@media (orientation: portrait) {
    body {
        background-color: green;
    }
}

2. BootStrap [ 框架 ]

• 参考中文文档：https://v3.bootcss.com/css/

• 可以定制更改其中的部分内容，然后重新下载即可。（可更改视口宽度为多少时隐藏）

• 样式框架：别人写好的代码，拿过来可以直接用，通过它可以少些样式，就能开发漂亮的网页

• 功能类别是有区别的

  • 有的框架是针对样式的
    • BootStrap 等
  • 有的框架是针对逻辑的
    • Vue 等

• 操作步骤

  1. 先引入 bootstrap 的样式代码
     • 切记路径问题
  2. 给 html 标签添加【对应的】类名
     • 所谓对应的类名不能乱写，必须是 bootstrap 中定义好的
  3. 保证以上两点， bootstrap 即可正常工作

  <head>
  	<!-- 1. 引入 bootstrap 的代码 -->
      <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
  </head>
  <body>
  	<!-- 没有写一行样式，那么表格就可以很美观的展示了1 -->
  	<table class="table table-bordered table-striped table-hover">
  	</table>
  </body>
  

2.1 全局样式-按钮

​ 一定要先引入框架CSS

2.1.1 样式

<!-- 要先引入框架的 CSS 样式 -->

<a type="button" class="btn btn-default">（默认样式）Default</a>

<button type="button" class="btn btn-primary">（首选项）Primary</button>

<input type="button" value="（成功）Success" class="btn btn-success">

<button type="button" class="btn btn-info">（一般信息）Info</button>

<button type="button" class="btn btn-warning">（警告）Warning</button>

<button type="button" class="btn btn-danger">（危险）Danger</button>

<button type="button" class="btn btn-link">（链接）Link</button>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rdvX1Mc8-1649576773969)(./images/btn-01.png)]

2.1.2 大小

<p>
    <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
    <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
    <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
    <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
    <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
    <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wvto0IMc-1649576773970)(./images/btn-02.png)]

2.1.3 拉伸至父元素100%的宽度

<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0z4NgvR4-1649576773971)(./images/btn-03.png)]

2.1.4 激活状态、 禁用状态

<!--激活状态-->
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
<!--禁用状态-->
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2yiiaB4L-1649576773973)(./images/btn-04.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SE3MEjZR-1649576773974)(./images/btn-05.png)]

2.2 全局样式-表格

• 具体参考中文文档

  • https://v3.bootcss.com/css/

• 条纹状表格

  • table-striped

• 带边框的表格

  • table-bordered

• 鼠标悬停

  • table-hover

• 紧缩表格

  • table-condensed

• 状态类 - (设置背景色，单元格或一行)

  • active
    • 鼠标悬停在行或单元格上时所设置的颜色
  • success
    • 标识成功或积极的动作
  • info
    • 标识普通的提示信息或动作
  • warning
    • 标识警告或需要用户注意
  • danger
    • 标识危险或潜在的带来负面影响的动作

2.3 全局样式-表单

• 具体参考中文文档

  • https://v3.bootcss.com/css/

• 示例-代码

  <!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>全局CSS样式-表单</title>
      <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <h4>学习使用 bootstrap </h4>
      <!-- 行 row 可以省略... -->
      <div class="form-group">
        <label for="">用户名：</label>
        <input type="text" class="form-control">
      </div>
      <div class="form-group">
        <label for="">密码：</label>
        <input type="password" class="form-control">
      </div>
      <div class="form-group">
        <label for="">性别：</label>
        <input type="radio"> 男
        <input type="radio"> 女
      </div>
    </div>
  </body>
  </html>
  

  • 结果

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ahu0ewZy-1649576773976)(./images/BiaoDan-01.png)]

2.4 栅格系统

• 所谓的栅格指的是将网页人为分为一个个小格子，然后在小格子添加内容
• bootstrap 默认支持栅格，
  • row 是 bootstrap 提供的类名，用来定义【行】（也可以省略）
  • col-xx-xx 也是 bootstrap 提供的类名，用于定义【列】
    • bootstrap 将每个行分成了均等的 12 份，col-sm-4 表示占 4 等份

<div class="row">
    <!-- bootstrap 将每个行分成了均等的 12 份，col-sm-4  表示占 4 等份 -->
    <div class="col-sm-4">第1列</div>
    <div class="col-sm-4">第2列</div>
    <div class="col-sm-4">第3列</div>
</div>
<div class="row">
    <div class="col-sm-6">第1列</div>
    <div class="col-sm-6">第2列</div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KHaDF1ID-1649576773977)(./images/ShanGe-01.png)]

• bootstrap，它是支持【响应式】的栅格

• 不同屏幕尺寸，列的布局是不一样的

• container 这个类名在不同屏幕尺寸其大小是一样的

• [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BUM3PTXX-1649576773978)(./images/ShanGe-02.png)]

  • col-xs- 对应一个尺寸**<768px**
  • col-sm- 对应一个尺寸≥768px
  • col-md- 对应一个尺寸≥992px
  • col-lg- 对应一个尺寸≥1200px

• 例子-代码

  <!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>
      <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css" />
      <style>
        .conrainer > div {
          height: 200px;
          background-color: pink;
        }
      </style>
    </head>
    <body>
      <!-- 响应式时就加上 container -->
      <div class="conrainer">
        <!-- 行 row 是可以省略的。。。 -->
        <!-- 大屏幕时一行显示 4 个，每个占 3 份 -->
        <!-- 0 ~ 768(col-xs-xx)， 768 ~ 992(col-sm-xx)， 992 ~ 1200(col-md-xx)， 1200 ~ 无限大(col-lg-xx) -->
          
          
        <!-- 
          视口: 0 ~ 768(col-xs-12) div占12份  默认
          视口: 768 ~ 992(col-sm-6)  div占6份  一行显示两个
          视口: 992 ~ 1200(col-md-3)  div占3份  一行显示四个
          视口: 1200 ~ 无限大(col-lg-3)  div占3份  一行显示四个
  	  -->
        <div class="col-sm-12 col-sm-6 col-md-3 col-lg-3">1</div>
        <div class="col-sm-12 col-sm-6 col-md-3 col-lg-3">2</div>
        <div class="col-sm-12 col-sm-6 col-md-3 col-lg-3">3</div>
        <div class="col-sm-12 col-sm-6 col-md-3 col-lg-3">4</div>
      </div>
    </body>
  </html>
  

2.5 组件

• 组件就是具有【实际功能】意义的区块

• 具体参考中文文档

  • https://v3.bootcss.com/css/

• 参考文档，需要哪里 copy 哪里，样式不一样的时候，自己写覆盖他的样式

2.6 图标

• 具体参考中文文档
  • https://v3.bootcss.com/css/

2.7 插件

• 使用步骤

  1. 引入css样式

  2. 引入js文件： jquery.js 和 bootstrap.js

     • jquery.js 引入要在bootstrap.js前面

• 不引入 js 文件功能无法生效！！！