登录  /  注册
首页 > web前端 > css教程 > 正文

看看这些前端面试题，带你搞定高频知识点（五）

青灯夜游
发布： 2023-02-23 19:23:26
转载
1332人浏览过

看看这些前端面试题，带你搞定高频知识点（五）

每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起探讨技术之美。

面试官：css 如何实现左侧固定 300px，右侧自适应的布局？

我：呃~，好的，可以采用flex布局，或者浮动+BFC，整出代码如下：

flex布局：



  
    
    
  
登录后复制

浮动+BFC：



  
    
    
  
登录后复制

面试官：flex 布局中 align-content 与 align-items 有何区别？

我：呃~，它们都是作用于纵轴的元素，具体区别如下：

align-content：作用于纵轴多行元素，一行元素不起作用。【相关推荐：web前端开发】



  
    1
    2     3     4     5     6     7                  
登录后复制

align-items：作用于纵轴单行元素



  
    1
    2     3     4     5     6     7                  
登录后复制

面试官：Grid 布局的优势在哪里？

我：呃~，Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。 Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。 Grid 布局远比 Flex 布局强大。

面试官：Flex 布局中的 flex-basis 与 width 有何区别？

我：呃~，flex-basis 的值为理想情况，而在实际情况中可能被压缩，当 flex-direction 为 column 时，主轴为纵轴，此时 flex-basis 与 height 对应

面试官：css 加载会阻塞 DOM 树的解析和渲染吗？

我：呃~，css 加载会直接影响网页的渲染，因为只有 css 加载完毕，构建完 CSSOM 后，渲染树(Render Tree)才会构建，然后渲染成位图，如果 html 中有加载 script 的话，还会间接影响 DOM 树的解析，因为 javascript 的下载、解析和执行和阻塞 DOM 树的解析，而 javascript 中有可能访问 CSSOM，比如 Element.getBoundingClientRect，因此 CSSOM 构建完毕以后才会开始 javascript 的执行，间接阻塞 dom 树的解析。

面试官：什么是层叠上下文 (stacking contect)，谈谈对它的理解

我：呃~，好的，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。优先级如下：

 想了解更深层叠上下文：推荐文章：深入理解CSS中的层叠上下文和层叠顺序 。

面试官：z-index: 999 元素一定会置于 z-index: 0 元素之上吗？

我：呃~，不会，我们在进行层叠上下文时，会优先比较父级，如果父级是层叠上下文，子级即使有z-index也不再起作用了，如果父级层叠上下文层叠顺序相等，那么采取后来居上原则，前者覆盖后者。如果父级是普通元素，子级层叠比较就不受父级的影响，谁的层叠顺序高谁就先展示。

层叠黄金准则：

谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。

后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

整出代码如下：



  
    
             
登录后复制

面试官：什么是 Data URL？

我：呃~，Data URL 是将图片转换为 base64 直接嵌入到了网页中。

使用看看这些前端面试题，带你搞定高频知识点（五）这种方式引用图片，不需要再发请求获取图片。

使用 Data URL 也有一些缺点：

base64 编码后的图片会比原来的体积大三分之一左右。

Data URL 形式的图片不会缓存下来，每次访问页面都要被下载一次。可以将 Data URL 写入到 CSS 文件中随着 CSS 被缓存下来。

面试官：网站设置字体时，如何设置优先使用系统默认字体？

我：呃~，system-ui 将会自动选取系统默认字体作为字体。

面试官：CSS如何实现圣杯布局？

我：呃~，圣杯布局是指两端宽度固定，中间自适应。在日常开发中，圣杯布局的使用频率是比较高的。举一个简单的浮动例子，当然也可以使用定位或flex布局，整出代码如下：

浮动：



    
        
        
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                border: 1px solid black;
                overflow: hidden;
                padding: 0px 100px;
                min-width: 100px;
            }
            .left {
                background-color: greenyellow;
                float: left;
                width: 100px;
                margin-left: -100%;
                position: relative;
                left: -100px;
            }
            .center {
                background-color: darkorange;
                float: left;
                width: 100%;
            }
            .right {
                background-color: darkgreen;
                float: left;
                width: 100px;
                margin-left: -100px;
                position: relative;
                left: 100px;
            }
        
    

 
 

    
    	
            
            
            
        
    
登录后复制

（学习视频分享：web前端入门、编程基础视频）

以上就是看看这些前端面试题，带你搞定高频知识点（五）的详细内容，更多请关注php中文网其它相关文章！

相关标签：
css html 前端 面试题
来源：csdn网
上一篇：看看这些前端面试题，带你搞定高频知识点（四） 下一篇：css实现登录按钮炫酷效果（附代码实例）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
类标识是不是就是数组的键? 类标识是不是就是数组的键?
齐天大宅来自于2023-10-04 00:37:56
0 0 133
session_variables 表在 performance_schema 中不存在 在将MySQL升级到5.7.8-rc版本并登录服务器后，我遇到了以下错误：表'performance_schema.session_variables'不存在我找不到任何解决方案。...
P粉504920992来自于2023-09-22 13:52:07
0 2 709
Laravel按价格排序，带有特殊价格条件 我有一个带有以下列（价格，特价，是否特价）的表。+-------+------+-----------------+--------------+---------+|id|pri...
P粉030479054来自于2023-09-22 13:06:46
0 1 681
renderHook中waitForNextUpdate的替代方案 我已经更新了Testing-library，但我在这种情况下很难找到waitForNextUpdate的替代方法（在react-testing-libraryv13中不再可用htt...
P粉198670603来自于2023-09-22 11:40:09
0 1 569
为什么我无法在Next JS应用中使用CSS文件？ 我一直在一个使用NextJS进行网站设计的项目中工作，想要使用CSS文件进行组件设计，但为什么我无法在我的组件中导入呢？在NextJS应用中是否可能只能使用模块化的CSS文件？我尝...
P粉904191507来自于2023-09-22 10:58:43
0 1 561
如何将函数传递给动态创建的 href？ 我想把一个函数传递给我的a标签链接的href属性，但无论我尝试什么都不起作用。它要么导致404页面，要么根本无法点击。我做错了什么？这个是不可点击的<body><...
P粉571233520来自于2023-09-22 09:37:55
0 1 630
getFirstHalf函数返回结果时出现问题 正在开发一个函数，该函数接受一个数组并返回该数组的前一半，但在返回之前，它会调用自身，直到数组的长度为1：constgetFirstHalf=function(array){con...
P粉311617763来自于2023-09-22 08:49:09
0 1 363
使用React.StrictMode和fabric.js的Canvas实例进行重渲染 我正在创建一个织物画布和按钮，这些按钮实例化的形状应该是可选择的。我不明白为什么在以下情况下我的组件会被重新渲染两次。因此，我的织物形状无法选择。然而，当我从我的index.tsx...
P粉659378577来自于2023-09-21 23:48:52
0 1 426
PHP存储数据库效率的问题 程序一：for($i=0;$<100;$++){连接数据库；执行select提前一个值；断开数据库连接；连接数据库；执行一次updata 存储数据；断开数据库连接；}程序执行...
八哥来自于2023-09-22 22:46:18
0 0 355
React Native自定义TextInput不响应onChangeText事件 我想在ReactNative中创建和使用一个CustomTextInput。我已经按照下面的代码创建了它，但是CustomTextInput中的onChangeText属性没有正常...
P粉743288436来自于2023-09-21 22:59:27
0 2 306
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网，和优秀的人一起学习！
全站2000+教程免费学
微信扫码登录

  • 精品班

  • 立即咨询

  • 微信沟通

  • QQ群

  • 优惠券

  • 返回顶部