web前端面试题案例代码分析

这篇文章主要讲解了“web前端面试题案例代码分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“web前端面试题案例代码分析”吧！ 我：呃~，好的，可以采用flex布局，或者浮动+BFC，整出代码如下：flex布局：

浮动+BFC：

我：呃~，它们都是作用于纵轴的元素，具体区别如下：align-content：作用于纵轴多行元素，一行元素不起作用。

1
2
3
4
5
6
7

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

1
2
3
4
5
6
7

我：呃~，Flex 布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是一维布局。 Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。 Grid 布局远比 Flex 布局强大。我：呃~，flex-basis 的值为理想情况，而在实际情况中可能被压缩，当 flex-direction 为 column 时，主轴为纵轴，此时 flex-basis 与 height 对应我：呃~，css 加载会直接影响网页的渲染，因为只有 css 加载完毕，构建完 CSSOM 后，渲染树(Render Tree)才会构建，然后渲染成位图，如果 html 中有加载 script 的话，还会间接影响 DOM 树的解析，因为 javascript 的下载、解析和执行和阻塞 DOM 树的解析，而 javascript 中有可能访问 CSSOM，比如 Element.getBoundingClientRect，因此 CSSOM 构建完毕以后才会开始 javascript 的执行，间接阻塞 dom 树的解析。我：呃~，好的，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间。优先级如下：我：呃~，不会，我们在进行层叠上下文时，会优先比较父级，如果父级是层叠上下文，子级即使有z-index也不再起作用了，如果父级层叠上下文层叠顺序相等，那么采取后来居上原则，前者覆盖后者。如果父级是普通元素，子级层叠比较就不受父级的影响，谁的层叠顺序高谁就先展示。层叠黄金准则：谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。整出代码如下：

我：呃~，Data URL 是将图片转换为 base64 直接嵌入到了网页中。使用这种方式引用图片，不需要再发请求获取图片。使用 Data URL 也有一些缺点：base64 编码后的图片会比原来的体积大三分之一左右。Data URL 形式的图片不会缓存下来，每次访问页面都要被下载一次。可以将 Data URL 写入到 CSS 文件中随着 CSS 被缓存下来。我：呃~，system-ui 将会自动选取系统默认字体作为字体。我：呃~，圣杯布局是指两端宽度固定，中间自适应。在日常开发中，圣杯布局的使用频率是比较高的。举一个简单的浮动例子，当然也可以使用定位或flex布局，整出代码如下：浮动：

html>






	

感谢各位的阅读，以上就是“web前端面试题案例代码分析”的内容了，经过本文的学习后，相信大家对web前端面试题案例代码分析这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是云技术，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: jquery如何去调用数据

这篇文章主要讲解了“jquery如何去调用数据”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jquery如何去调用数据”吧！ 一、使用 jQuery 的 Ajax 方法jQuery 提供了一个方便的 Ajax …