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

1,357 阅读4分钟

浅聊一下

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

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

什么是响应式

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

  1. 什么是响应式

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

  1. 如何实现响应式
  • 使用flex

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

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

image.png

  • 百分比

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

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

image.png 当我们把页面缩小,响应式效果出现 (适用于外层大容器)

image.png

  • rem + 媒体查询

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

        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时:

image.png 当宽度大于800px小于1000时

image.png

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

image.png

  • 媒体查询

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

      @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

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

image.png 缩小页面宽度

image.png

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

谈谈你对BFC容器的理解

  1. 何为BFC容器

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

  1. 渲染规则
  • BFC容器在计算高度时,浮动元素的高度也会计算在内

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

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

效果如下

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

image.png

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

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

image.png

  • 从上往下,从左往右的布局排列

这点就不解释了...

  1. 如何设置BFC容器

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

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

4. BFC容器的应用

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

说说css中的单位有哪些?

  • px

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

  • rem

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

  • em

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

  • vw/vh

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

  • %

%:相对单位,相对于父容器的宽度/高度

结尾

更多精彩,请看下集...