【手撕面试题】HTML+CSS（高频知识点五）_亦世凡华、的博客

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

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

flex布局 ：

<style>
  *{margin: 0;padding: 0;}
  .container{
    display: flex; 
  .left{
    width: 300px;
    height: 100vh;
    background-color: #f00;
  .main{
    flex: 1;
    background-color: #ae5aca; 
</style>
  <div class="container">
    <div class="left"></div>
    <div class="main"></div>
</body>

浮动+BFC ：

<style>
  *{margin: 0;padding: 0;}
  .container {
    height: 100vh;
  .left {
    float: left;
    width: 300px;
    height: 100%;
    background-color: #f00;
  .main {
    height: 100%;
    background-color: #ae5aca;
    overflow: hidden;
</style>
  <div class="container">
    <div class="left"></div>
    <div class="main"></div>
</body>

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

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

align-content ：作用于纵轴多行元素，一行元素不起作用。

<style>
  .container {
    background-color: #efefef;
    border: 1px solid #888;
    margin-top: 3rem;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
    /* 纵轴多元素一起居中 */
    align-content: center;
  .item {
    width: 200px;
    height: 100px;
    background-color: #ccc;
    border: 1px solid #aaa;
</style>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</body>

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

<style>
  .container {
    background-color: #efefef;
    border: 1px solid #888;
    margin-top: 3rem;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
    /* 纵轴单元素居中 */
    align-items: center;
  .item {
    width: 200px;
    height: 100px;
    background-color: #ccc;
    border: 1px solid #aaa;
</style>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</body>

面试官：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流中处于后面的元素会覆盖前面的元素。

整出代码如下：

<style>
  .first {
    background-color: red;
    height: 3rem;
    z-index: 2;
    opacity: 0.99;
  .item1 {
    z-index: 0;
    height: 100%;
    width: 3rem;
    background-color: orange;
  .second {
    background-color: blue;
    height: 3rem;
    margin-top: -1.5rem;
    z-index: 3;
    position: relative;
  .item2 {
    z-index: 999;
    height: 100%;
    width: 3rem;
    background-color: green;
</style>
  <div class="first">
    <div class="item1"></div>
  <div class="second">
    <div class="item2"></div>
</body>

面试官：什么是 Data URL？

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

使用<img src="data:[MIME type];base64"/>这种方式引用图片，不需要再发请求获取图片。

使用 Data URL 也有一些缺点：

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

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

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

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

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

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

<!DOCTYPE html>
        <meta charset=utf-8>
        <style type="text/css">
                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;
        </style>
    </head>
    	<section class="container">
            <article class="center"><br /><br /><br /></article>
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>
                                    1.z-index简介(1) 概念z-index属性指定了元素与元素之间的z轴上的顺序，而z轴决定元素之间发生覆盖的层叠关系。(2) 属性值1.默认auto为什么元素添加定位属性(不包括static)后会覆盖普通元素？元素添加定位属性(不包括static)后，z-index默认是auto，在层叠水平上相当于z-index为0，但是不会产生层叠上下文，但是会比普通元素没有z-index的层级要高。2...
                                    z-index就是堆叠上下文，它规定一个元素的堆叠顺序。一般来说，拥有更高堆叠顺序的元素会处于较低堆叠元素的前面。但是，z-index的有一些注意点，接下来一一举例。
<div id="A">A<div id="a">a</div></div>
<div id="B">B<div id="b">b</div></div>
div A和div B中各有一个div a和div b的子元素
#A,#B {
                                    CSS当中的z-index属性看起来足够简单，但是如果你真的想了解它是如何工作的话，在这简单的表面之下，又有许多值得探究的内容。 在这篇教程中，通过探究层叠上下文和一系列实际的例子，我们将会阐明z-index的内在机理。
CSS为盒模型的布局提供了三种不同的定位方案：
常规文档流浮动绝对定位
其中最后一种定位方案将一个元素从常规流中移除，完全依赖开发者来确定元素显示的位置。
通过赋予t
                                    本篇文章来给大家介绍一下CSS中z-index属性的用法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。写css z-index的时候经常会出现很多莫名其妙的问题，下面对z-index属性做彻底的剖析，本文参考了《一个css中z-index的用法》，并做了很多demo，方便了解z-index的用法.一、z-index是什么z-index属性决定了一个HTML元素的层叠级别。元素层...