html面试题

6块
78 阅读8分钟

html5新标签

1.canvas

2.新多媒体元素

image.png 3.新的语义和结构元素

image.png

水平居中的方式 (说出三种就够了)

1.弹性盒子的方式

通过给父元素设置
display:flex;
justify-content: center;’
align-items: center;就可以了

2.网格布局的方式

给父级设display:grid;
给子元素设align-self: center;justify-self: center;

3.table-cell来实现

     .box {
        width: 200px;
        height: 200px;
        border: 1px solid;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    
    p {
        background: red;
        display: inline-block;
    }

4.使用定位的方式

当已经知道了要进行水平垂直居中的元素的宽高时，就可以通过设置 position: absolute 来实现。 通过margin具体的值

         width: 50px;
        height: 50px;
        background-color: #7FFFD4;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -25px;
        margin-top: -25px;

或者clac计算的方式

.box {
        width: 200px;
        height: 200px;
        border: 1px solid;
        position: relative;
    }
    
    p {
        width: 50px;
        height: 50px;
        background-color: #7FFFD4;
        position: absolute;
        left: calc(50% - 25px);
        top: calc(50% - 25px);
    }

如果不知道元素的具体宽高可使用transform通过坐标位移来实现

        width: 50px;
        height: 50px;
        background-color: #7FFFD4;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

缺点：IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象. 5.#绝对定位的方式 absolute + [margin] auto 这个是需要将各个方向的距离都设0，再将margin设为auto 优点：兼容性也很好 缺点： 需要知道子元素的宽高

background: red;
/*必须要设置宽高*/
width: 100px;
height: 40px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

常见的行内元素、块级元素

1、块级元素（div,p,h1...h6,ol,ul,table）

每个块级元素都是独自占一行、元素的高度宽度都是可以设置的

2、行内元素（span,a,img,input,strong）

可以和其他元素处于一行上，元素的高度宽度顶部和底部边距不可设置

说一下盒子模型

盒模型由外向内：margin（外边距）border（边框）padding（内边距）content（元素）

image.png 标准盒子模型和怪异盒子模型（IE的盒模型）

在标准的盒模型中一个盒子的宽度是：margin(左右外边距)+padding(左右内边距)+border(左右边框)+内容的(width).

而在怪异盒模型中：一个快的宽度=内容的(width)+margin(左右)（这里的内容width包含了padding(左右内边距)+border(左右边框)）。

两种模式的转换 当设置box-sizing:content-box时，采用标准模式进行计算，默认就是这种模式；
当设置box-sizing:border-box时，采用怪异模式进行计算；

image.png

应用场景 [blog.csdn.net/COOL66BOY/a…]

浏览器运行机制

[blog.csdn.net/weixin_4455…]

浏览器内部构造

用户界面 1.浏览器引擎：在用户界面和传送引擎之间传送指令。

2.渲染引擎：负责显示请求的内

网络 用户界面后端：用于绘制基本的窗口小部件。 JavaScript解释器 数据存储：持久层，这是一个完整的浏览器内数据库。

1.渲染进程

浏览器GUI渲染线程：HTML转换成dom树、将CSS样式转换成style表、创建布局树、对布局树进行分层，为每个图层生成绘制列表、将图层分成图块，光栅化将图块转换成位图、合成线程发送绘制图块命令DrawQuad给浏览器进程，浏览器进程根据DrawQuad消息生成页面，并显示到显示器上。

渲染进程可能会涉及重排 和重绘 重排：当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排 。

重排特点：style后面所有流程都更新 。

重绘：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程 。

重绘特点：跳过布局和分层阶段 。

重排必重绘。

2.V8引擎如何运行代码

(1)生成AST语法树

(2)生成字节码

(3)执行代码

左边固定右边自适应布局

image.png （1）通过flex

  .wrapper-flex {
          display: flex;
          align-items: flex-start;
          border: 1px dashed #ff6c60;
      }
      
      .wrapper-flex .left {
          flex: 0 0 auto;
          border: 5px solid #ddd;
      }
      
      .wrapper-flex .right {
          flex: 1 1 auto;
          border: 5px solid #ddd;
      }

或者

 .wrapper-flex {
         display: flex;
         border: 1px dashed #ff6c60;
     }
     
     .wrapper-flex .left {
         width: 50px;
         border: 5px solid #ddd;
     }
     
     .wrapper-flex .right {
         flex: 1;
         border: 5px solid #ddd;
         /* min-width: 0; */右边内容超出的话，就会导致左边固定的宽度大小不起重要了，这时只需要加上min-width: 0;就可以了
     }

(2)float+margin-left方案

image.png (3)双inline block

width: calc(100% - 140px)来动态计算右侧盒子的宽度。需要知道右侧盒子距离左边的距离，以及左侧盒子具体的宽度(content+padding+border)，以此计算父容器宽度的100%需要减去的数值。同时，还需要知道右侧盒子的宽度是否包含border的宽度。

在这里，为了简单的计算右侧盒子准确的宽度，设置了子元素的box-sizing:border-box;以及父元素的box-sizing: content-box;。

同时，作为两个inline-block的盒子，必须设置vertical-align来使其顶端对齐。

另外，为了准确地应用计算出来的宽度，需要消除div之间的空格，需要通过设置父容器的font-size: 0;,或者用注释消除html中的空格等方法。

缺点 需要知道左侧盒子的宽度，两个盒子的距离，还要设置各个元素的box-sizing

需要消除空格字符的影响

需要设置vertical-align: top满足顶端对齐。

image.png （4）双float 本方案和双float方案原理相同，都是通过动态计算宽度来实现自适应。但是，由于浮动的block元素在有空间的情况下会依次紧贴，排列在一行，所以无需设置display: inline-block;，自然也就少了顶端对齐，空格字符占空间等问题 image.png （5）absolute+margin-left方法

(6)float+BFC

利用了左侧浮动，但是右侧盒子通过overflow: auto;形成了BFC，因此右侧盒子不会与浮动的元素重叠。

需要为左侧的浮动盒子设置margin-right，就可以实现两个盒子的距离了。而右侧盒子是block级别的，所以宽度能实现自适应。

缺点：父元素需要清除浮动

.wrapper-float-bfc {
           /* overflow: auto; */
           border: 1px dashed #ff6c60;
       }
       
       .wrapper-float-bfc .left {
           float: left;
           margin-right: 20px;
           border: 5px solid #ddd;
       }
       
       .wrapper-float-bfc .right {
           margin-left: 0;
           overflow: auto;
           border: 5px solid #ddd;
       }

具体可参考：blog.csdn.net/weixin_3463…

BFC

1.什么是BFC bfc 从字面意思来讲就是block formatting context (块级格式化上下文)，bfc 其实是页面中一个单独渲染区域，并且有自己的渲染规则，bfc 区域里的元素无论如何布局 都不会影响外层的元素排列

2.如何触发BFC

    float的值非none
    
    overflow的值非visible
    
    display 为block,list-item table,inline-block,    table-cell,flex inline-flex都会产生BFC （为inline 时触发 IFC）;
    
    position的值为:absoute、fixed

或者

多创建一个盒子，添加样式：clear: both;

  ul:after{
      content: '';
      display: block;
      clear: both;
  }

3.BFC 元素所具有的特性

    1. 在bfc 中盒子从顶端垂直排列 ；

    2. 盒子垂直方向的距离 由ma rgin 决定，在同属于一个bfc 时的margin 会发生重叠；

    3. 在bfc 中盒子的margin-left 会以 父类盒子的border-left 为起点

    4.bfc 的区域 不会与浮动盒子产生交集，而是紧贴浮动边缘

    5. 计算bfc 区域高度时，也会检测浮动盒子的高度

应用、

解决高度塌陷问题

1.父元素设置float:left 当我们父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷（造成父元素高度为 0）

像这样...... image.png

这是由于浮动元素脱离了文档流不占有原来位置从而导致父元素获取不到其内部浮动元素的高度而导致自身高度为0，我们常见做法是为父容器清除浮动，我们也可以通过使父容器成为一个BFC让其内部的浮动元素也可以被参与计算高度

image.png

2.解决外间距合并问题

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

两个盒子同属于一个BFC下，相邻两个盒子的垂直外边距会重叠，如果两个外边距不相等就只取最大的那个外边距。

image.png 解决方式

添加了一个盒子c，c通过设置overflow：hidden成为BFC盒子，然后让a和b两个盒子都处于c下让它们属于不同的两个BFC

image.png 3.处理文字环绕效果

image.png 文本所在的元素蓝色背景占据了一行，因为背景为红色的元素是浮动元素，所以脱离了标准文档流，而文本围绕着红色元素，这不是我们想要的效果，这时可以给第二个元素触发BFC将它们区分开来： image.png

伪类与伪元素

清除浮动的方式

重绘和回流

CSS属性哪些可以继承

CSS选择符及优先级

avatar
文章
阅读
粉丝