浅聊一下

春招正在如火如荼地进行中，我来汇总一下这些天战斗积累的经验，本系列主要是总结一下在面试中遇到的css方面的题目

假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！

什么是响应式

在被问到这个问题的时候会有点沾沾自喜，心里想，响应式那不是手到擒来，ref，reactive都刚总结过了，NO！大错特错，在这里面试官问的是CSS中的响应式...

什么是响应式

跟随用户设备尺寸的变化，页面实现自动的适配。

如何实现响应式

使用flex

首先我先创建6个li，并且给他们不同的颜色、相同宽高，给上ul样式display:flex

当我们给页面缩小以后，li的宽度都随着总宽度的减小而减小，flex适用于某个容器内的响应式

百分比

在定义li的宽度时，选择使用百分比为单位，也可以实现响应式

css 复制代码

        li{
            list-style: none;
            width: 20%;
            height: 100px;
        }

当我们把页面缩小，响应式效果出现 （适用于外层大容器）

rem + 媒体查询

要使用rem单位来实现响应式，就得搭配上媒体查询

css 复制代码

        li{
            list-style: none;
            width: 10rem;
            height: 100px;
        }
        @media screen and (min-width:1000px){
            html{
                font-size: 30px;
            }
        }
        @media screen and (min-width:800px) and (max-width:1000px){
            html{
                font-size: 20px;
            }
        }

rem的大小是根据根字体的大小来改变的，所以使用媒体查询来改变width

当宽度超过1000px时：

当宽度大于800px小于1000时

当宽度小于800px时，此时没有设置根字体的大小，所以默认1rem=16px (可用于任何地方)

媒体查询

刚才使用的是rem+媒体查询，其实我们单用媒体查询也是可以的 (可用于任何地方)---代码量大

css 复制代码

      @media screen and (min-width:1000px) {
        li{
            width: 300px;
        }
      }
      @media screen and (min-width:800px) and (max-width:1000px) {
        li{
            width: 200px;
        }
      }
      @media screen and (max-width:500px) {
        li{
            width: 100px;
        }
      }

直接通过改变li的宽度来响应式宽度变化，效果和上一种差不多我就不过多展示了... 但是直接通过媒体查询的方式来写会让你头疼的，因为一个li要适应性变化代码就够你写的了...

vw/vh

vw/vh单位呢是基于视口宽高的，我们也可以用他来实现响应式 (适用于外层大容器) 直接设置宽度为50vw

css 复制代码

        li{
            list-style: none;
            width: 50vw;
            height: 100px;
        }

缩小页面宽度

响应式说到这里就算是完成了...

谈谈你对BFC容器的理解

何为BFC容器

块级格式化上下文，是页面中一个渲染区域，有一套属于自己的渲染规则。讲到这里，就可以展开讲讲BFC容器的一些规则

渲染规则

BFC容器在计算高度时，浮动元素的高度也会计算在内

设置两个div，给第一个加上浮动

css 复制代码

        .box1{
            width: 200px;
            height: 100px;
             float: left;
            background-color: aquamarine;
        }
        .box2{
            width: 100px;
            height: 200px;
            background-color: blue;
        }

效果如下

当我们给他设置为BFC容器以后

BFC容器内的子元素的margin-top不会和BFC这个父容器发生重叠

让我们先来看普通容器，给父容器设置了margin-top为30px，子容器margin-top为10px 我们看到子容器的margin和父容器的margin重叠了，我们再来看看BFC容器，这就不会重叠了...

从上往下，从左往右的布局排列

这点就不解释了...

如何设置BFC容器

聊完BFC容器的渲染规则，就得聊一下如何设置一个BFC容器，给父容器设置以下属性，就可以让其成为BFC容器

arduino 复制代码

1. overflow: 不为visible;
2. float
3. display: inline-block || inline-XXX || flex || table-XXX || grid,
4. position: absolute || fixed

BFC容器的应用

在上面我们可以看到，BFC容器连浮动元素的高度也会计算在内，所以BFC容器的主要应用就是清除浮动

说说css中的单位有哪些?

px是像素单位，我们的屏幕上埋藏了很多的物理发光点，每一个物理发光点就是一个像素

rem是相对单位，相对根字体的大小，浏览器默认根字体大小为16px

em 是相对单位，用在字体上会继承父容器的字体大小，用在他处，相对于当前容器自己的字体大小来定

vw/vh

vw/vh是相对单位，相对于视口宽度/高度

%：相对单位，相对于父容器的宽度/高度

面了这么多天，该做总结了-CSS篇(一)

浅聊一下

什么是响应式

谈谈你对BFC容器的理解

说说css中的单位有哪些?

结尾