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

浅聊一下

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

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

什么是响应式

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

  1. 什么是响应式

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

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

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

面了这么多天,该做总结了-CSS篇(一)
当我们给页面缩小以后,li的宽度都随着总宽度的减小而减小,flex适用于某个容器内的响应式

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

  • 百分比

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

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

面了这么多天,该做总结了-CSS篇(一)
当我们把页面缩小,响应式效果出现 (适用于外层大容器)

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

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

面了这么多天,该做总结了-CSS篇(一)
当宽度大于800px小于1000时

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

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

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

  • 媒体查询

刚才使用的是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;
        }

面了这么多天,该做总结了-CSS篇(一)
缩小页面宽度

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

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

谈谈你对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;
        }

效果如下

面了这么多天,该做总结了-CSS篇(一)
当我们给他设置为BFC容器以后

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

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

让我们先来看普通容器,给父容器设置了margin-top为30px,子容器margin-top为10px
面了这么多天,该做总结了-CSS篇(一)
我们看到子容器的margin和父容器的margin重叠了,我们再来看看BFC容器,这就不会重叠了…

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

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

这点就不解释了…

  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是相对单位,相对于视口宽度/高度

  • %

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

结尾

更多精彩,请看下集…

原文链接:https://juejin.cn/post/7338042858703388726 作者:滚去睡觉

(0)
上一篇 2024年2月23日 上午10:37
下一篇 2024年2月23日 上午10:48

相关推荐

发表回复

登录后才能评论