1. 通过 CSS 的哪些方式可以实现隐藏页面上的元素？

1、般常用的是以下几种

隐藏页面元素:
  1. opacity: 0; 透明度为0, 盒子占位置
  2. visibility: hidden; 盒子占位置
  3. display: none; 盒子不占位置
  4. transform: scale(0, 0)

2 . px、em、rem之间有什么区别？

px: 绝对单位
em: 相对单位, 相对于父盒子的font-size
rem: 相对单位, 相对于html根标签

rem最大的作用

rem 一般可以用于 rem适配
rem 适配的原理?

 1. 使用 rem 作为单位 (转换问题 => 利用webpack插件, 写px自动转rem)

    width: 10rem; 把屏幕分成10等份
    
 2. 动态的设置不同屏幕下的 html font-size 
   1 360px 屏幕中, html { font-size: 36px;  36X10 }  盒子大小360
   1 480px 屏幕中, html { font-size: 48px;  48X10 }  盒子大小480
 3：做适配的方法
  媒体查询,   2：js设置 (插件 => flexible.js))

3 清除浮动的方式

清除浮动:

清除浮动造成的影响, 浮动脱离标准流, 不占位置 (父盒子不会被撑开)

4. 谈谈你对 BFC 的理解？

BFC

块级格式化上下文, 是一块独立的渲染区域 (触发了BFC, 这块区域就是一块独立的渲染区域)，会将处于BFC的内容和处于BFC外的内容隔离

触发BFC的方式:

position: absolute/fixed
float: left / right; 浮动的元素多个放在一起, 会互相隔开
overflow: 非visible hidden/auto/scroll
display: inline-block

BFC应用:

处理块级元素, 上下margin合并的问题
处理margin塌陷
清除浮动
实现自适应布局左边固定, 右边自适应 flex => display: flex; 左边定宽, 右边 flex: 1; 浮动 => 先浮动占位置, 再中间盒子overflow: hidden 定位 => 先定位, 再设置padding即可

5. 什么是CSS Sprites以及它的好处？

一、什么是CSS Sprites

CSS Sprites，俗称雪碧图、精灵图。这是一种CSS图片合并技术，就是将CSS中原先引用的一些较小的图片，合并成一张稍大的图片后再引用的技术方案。它可以减少请求多张小图片带来的网络消耗（因为发起的HTTP请求数变少了），并实现提前加载资源的效果。

二、实现方式

把精灵图放到文件中，然后测量图片的大小，准备图片大小的容器，然后设置图片位置

<style>
    i {
      display: inline-block;
      width: 24px;
      height: 24px;
    }
    .one {
      background: url('./sprite.png') 0px 0px;
    }
    .two {
      background: url('./sprite.png') 0px -44px;
    }

  </style>
</head>
<body>

  <!-- 优化小图片加载的技术, 将多张小图片, 合成一张使用 -->
  <i class="one"></i>
  <i class="two"></i>
  
</body>
</html>

三、CSS Sprites（精灵图）的缺点

CSS Sprites中任意一张小图的改动，都需要重新生成大图；并且用户端需要重新下载整张大图，这就降低了浏览器缓存的优势
随着HTTP2的逐渐普及，HTTP2的多路复用机制可以解决请求多个小图片所创建多个HTTP请求的消耗，让CSS Sprites存在的价值降低了
图片如果放大, 是会失真

6. 你对媒体查询的理解是什么样的？

响应式适配, 根据不同的屏幕尺寸, 显示不同的效果 (设置盒子的样式)

媒体查询是自 CSS3 开始加入的一个功能。它可以进行响应式适配展示。

媒体查询由两部分组成：

一个可选的媒体类型（如 screen、print 等）
零个或多个媒体功能限定表达式（如 max-width: 500px、orientation: landscape 等）

这两部分最终都会被解析为 true 或 false 值，然后整个媒体查询值为 true，则和该媒体查询关联的样式就生效，否则就不生效。

<style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 100%;
      background-color: pink;
      height: 500px;
      margin: 0 auto;
    }
    /* 媒体查询 (不会增加任何的权重, 一般放下面) 
       1. width: xxx 固定值
       2. max-width: 样式生效的最大宽度 <= 这个宽, 样式生效
       3. min-width: 样式生效的最小宽度 >= 这个宽, 样式生效
    */
    @media screen and (min-width: 1200px) {
      .box {
        width: 1170px;
      }
    }
    /* 992 <= x < 1200 */
    @media screen and (min-width: 992px) and (max-width: 1199px) {
      .box {
        width: 980px;
      }
    }
    @media screen and (min-width: 768px) and (max-width: 991px) {
      .box {
        width: 750px;
      }
    }
    @media screen and (max-width: 767px) {
      .box {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <!-- box在不同屏幕范围有不同的宽度 
       1. 1200以上, 宽度1170px
       2. 992以上, 宽度980px
       3. 768以上, 宽度750px
       4. 768以内, 宽度100%
  -->
  <div class="box"></div>

7. 伪类和伪元素的区别

什么是伪类？

伪类（pseudo-class）是以冒号:为前缀，可被添加到⼀个选择器的末尾的关键字。

它用于让样式在元素的特定状态下才被应用到实际的元素上。比如：:checked、:hover、:disabled、 :first-child等。

:hover

:nth-child(1)

:nth-child(2)

:checked

注意: 伪类, 虽然是写法比较特殊, css选择器的权重, 和类一致的

什么是伪元素

:before / :after

伪元素⽤于创建⼀些并不在 DOM 树中的元素，并为其添加样式。伪元素的语法和伪类类似，可以一个冒号或双冒号为前缀。这里的单冒号双冒号的区别：单冒号（:）用于css3的伪类，双冒号（::）用于css3的伪元素

⽐如，可以通过 :before 、:after 来在⼀个元素前、后增加⼀些额外的⽂本并为它们添加样式；并且，虽然⽤户可以看到这些⽂本，但其实它们并不在 DOM 树中

总结和注意

1. 伪类：是用来选择元素的，他选择的是真实的元素，是真实DOM上的元素

2. 伪元素：是用来创建元素的,他创建的是元素的不是真实在DOM上

注：伪元素是无法注册事件的, 所以不要通过js控制伪元素

8 、 flex布局

在真实的应用场景中，通常会遇到各种各样不同尺⼨和分辨率的设备，为了能在所有这些设备上正常的布局我们的应用界面，就需要响应式的界⾯设计方式来满⾜这种复杂的布局需求。flex 弹性盒模型的优势在于开发⼈员只需要声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局

flex-direction: 调整主轴方向

row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。

justify-content主要用来设置主轴方向的对齐方式

flex-start: 弹性盒子元素将向起始位置对齐 flex-end: 弹性盒子元素将向结束位置对齐。 center: 弹性盒子元素将向行中间位置对齐 space-around: 弹性盒子元素会平均地分布在行里 space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。

align-items用于调整侧轴的对齐方式

flex-start：元素在侧轴的起始位置对齐。 flex-end：元素在侧轴的结束位置对齐。 center：元素在侧轴上居中对齐。 stretch：元素的高度会被拉伸到最大（不给高度时, 才拉伸）。

flex-wrap属性控制flex容器是单行或者多行,默认不换行

nowrap：不换行（默认），如果宽度溢出，会压缩子盒子的宽度。 wrap：当宽度不够的时候，会换行。

align-content用来设置多行的flex容器的排列方式

flex-start：各行向侧轴的起始位置堆叠。 flex-end：各行向弹性盒容器的结束位置堆叠。 center：各行向弹性盒容器的中间位置堆叠。 space-around：各行在侧轴中平均分布。 space-between：第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。 stretch：拉伸，不设置高度的情况下。

9. CSS盒子模型

浏览器的渲染引擎在对网页文档进行布局时，会按照 “CSS 基础盒模型” （CSS Basic Box Model）标准，将文档中的所有元素都表示为一个个矩形的盒子，再用 CSS 去决定这些盒子的大小尺寸、显示位置、以及其他属性（如颜色、背景、边框等）。下图就是盒模型示意图，它由几部分组成：

内容（content）
内边距（padding）
边框（border）
外边距（margin

10. 如何清除浮动？

定高法，直接给高度
使用一个空的div，并设置样式

<div style="clear:both"></div>

为父元素添加 overflow: hidden
定义一个 clearfix 样式类

.clearfix:after {
  content: "";  			/*设置内容为空*/
  height: 0;    			/*高度为0*/
  line-height: 0;			/*行高为0*/
  display: block;			/*将文本转为块级元素*/
  visibility: hidden;	/*将元素隐藏*/
  clear: both; 				/*清除浮动*/
}

.clearfix {
  zoom: 1; 				/*为了兼容IE*/
}

11. 如何理解 z-index？

可以将它看做三维坐标系中的z轴方向上的图层层叠顺序。元素默认的 z-index 为 0，可通过修改 z-index 来控制设置了postion 值的元素的图层位置。可以将这种关系想象成一摞书本，通过 z-index 可以改变一本书在这摞书中的上下位置。

注意点：

z-index的小坑, 如果父辈元素有定位, 且配置了z-index, 优先按照父辈元素的定位的z-index进行比较层级

12：css选择器的优先级以及权重

1:选择器的优先级

浏览器默认样式<继承<通配符<标签选择器<类选择器(包括伪类选择器)<id选择器<行类样式<!important

2:权重计算

1，权重是有4组数字组成，但是不会有进位
2：可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推.....
3:可以简单记忆法，通配符和继承权重为0，标签选择器为1，类选择器为10，id选择器为100，行类样式为1000，！important无穷大。

3:权重可以叠加

div ul li =======0,0,0,3
.nav ul li =======0,0,1,2
a:hover =======0,0,1,1
.nav a =======0,0,1,1

CSS知识点理解