欢迎指出错误

1、background-size中的cover和contain的差别:

• 在不设置的情况下,以原图的尺寸显示并且平铺
  

• 在设置cover的情况下: 会使图片的短边拉伸至与元素想同大小(往大了拉).
  

• 在设置contain的情况下: 会使图片的短边与元素相同大小(往小了拉)
  

2、元素的优先级计算方式:

• 元素选择器: 0 0 0 0 1
  

• 类|伪类|属性选择器:   0 0 0 1 0
  

• ID选择器:   0 0 1 0 0
  

• 行内样式:    0 1 0 0 0  
  

• !important: 1 0 0 0 0
  

• 选择器之间进行累加比较大小,并且不进位
  

3、伪类选择器(css3):

• 选择是第一个子元素并且符合#ele的: #ele:first-child
  

• 选择是第n个子元素并且符合#ele的: #ele:nth-child(n)
  

• 选择在父元素下第n个为ele标签的元素:   ele:nth-of-type(n)
  

• 选择前三个元素: ele:nth-child(-n+3)
  

• 选择后三个元素: ele:nth-last-child(-n+3)
  

• 选择其父元素下为偶数个的元素: ele:nth-child(even) || ele:nth-child(2n)
  

• 选择其父元素下为奇数个的元素: ele:nth-child(odd) || ele:nth-child(2n+1)
  

• 在nth-child中使用(n)时,n的为(0,1,2,3....)代入,并且表达式内<0的数会直接忽略
  

4、清除浮动的方式:

• 1、使用overflow: hidden
  

• 2、使用伪元素:after--- 
    .clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
    }
  

• 3、使用伪元素:after和:before--- 			
    .clearfix::after,
    .clearfix::before {
            content: "";
            display: table;
    }
  
    .clearfix::after {
            clear: both;
    }
  

• 4、在当前元素内的添加一个last-child并且设置clear: both;
  

5、a标签的四大伪类:

• :link (默认状态下的样式为rgba(0, 0, 238))
  

• :visited (当标签被访问过之后的颜色)
  

• :hover (当鼠标move到标签上时的样式)
  

• :active (当鼠标click标签时的样式)
  

6、设置仅在一行显示,溢出显示小数点

• white-space: nowrap;
  

• overflow: hidden;
  

• text-overflow: ellipsis;
  

7、论述浏览器主要内核

• Chrome的Blink(2013年以前使用Webkit)
  

• Opera的Blink(2013年以前使用Presto)
  

• Safari的Webkit
  

• IE的trident(IE edge使用edgeHTML)
  

• 其他浏览器(QQ,百度等)使用trident+Chromium
  

8、论述盒模型

• W3C标准盒模型和怪异盒模型
  

• 通过设置box-sizing的border-box(怪异盒模型)和content-box(标准盒模型)
  

• 差异: 在标准盒模型下,width和height是不包含border和padding的.在怪异盒模型下,则是包含的
  

9、HTML文件顶部的的作用

• 作用: 告诉浏览器html使用的规范
  

• html4.0: 1、基于SGML(标准通用标记语言),
           2、有DTD(文档定义类型),
          3、拥有transition(过渡模式,可以使用废弃的标签)、frameset(框架模式)、strict(严格模式)
  

• xhtml: 也拥有上述的三种模式
  

• html5: 1、不基于SGML 2、没有DTD
  

10、src和href的区别:

• src表示引入:常用于js脚本、href表示引用:常用于css文件
  src会阻塞浏览器parse过程,可以设置async或者defer来异步执行
      defer会在DomcontentLoaded之前、页面解析渲染完毕之后执行
      async会在脚本被加载完成之后就执行
  href是异步引入的、不会阻塞浏览器的parse.(具体见下面)
      css和js会阻塞浏览器的渲染吗?
           脚本文件是会的,如果在浏览器parsehtml标签的时候,parse到了script,那么就会停止渲染去解析script,如果在脚本中获取到了标签的样式,那么就需要去解析css样式表,这时、css也阻塞了浏览器的渲染.
  

11、textContent和innerHTML和innerText的区别? (JS内容)

• innerHTML会解析被选中的所有内容,并且不会转义
  

• textContent会解析被选中的所有的nodeType为text的元素,并且会转义
  

• innerText会解析被选中的文本(去除换行),同时会忽略display为none的文本内容
  

12、当页面中有大量的图片时,如何提高加载速度?

• 1、使用懒加载技术,监听srcoll位置,对图片进行加载
  

• 2、使用iconfont、spirit精灵图、base64等压缩图片
  

• 3、可以在加载时使用模糊图片,在加载完成后使用清晰图片
  

13、列举css选择器

• 1、元素选择器
  2、类选择器
  3、ID选择器
  4、兄弟选择器
  5、后代选择器
  6、并集选择器
  7、伪类选择器
  8、伪元素选择器
  

14、css Hack?

• 针对不通过浏览器,或者相同浏览器的不同版本,相同的样式可能会存在差异,需要对这些差异进行css code
  

• 1、条件注释hack
  2、类前缀hack
  3、选择器前缀hack
  

15、块级元素和行内元素的区别?

• 1、块级元素独占一行,并且宽度默认为父元素的宽度
     行内元素由内容撑开,并且相邻的行内元素可以在同一行
     
  2、块级元素margin和padding都有效.
    行内元素margin左右有效 上下无效,padding左右有效,上下会影响background,但是不参与高度的计算,如图一
    
  3、块级元素可以嵌入行内元素或者块级元素.
     行内元素只能容纳行内元素或者行内块元素
  

图一 --

16、外边距合并问题?

• 1、相邻的元素(兄弟元素之间设置了相对方向,父子元素设置了相同方向的marginTop),会出现合并效果.
  

• 2、兄弟元素之间设置了相对方向的margin时,它们之间的margin会(margin同号时)取绝对值较大的那个,(margin异号时,取这两个margin相加的值)
  

• 3、设置了marginTop的父元素和第一个子元素并且设置了marginTop的也会产生合并
  

• 4、附加-- 被块级元素包裹的第一个子元素设置marginTop时,该属性会向上传递到父元素上 
  

• 5、解决外边距合并问题: 
     兄弟元素: 1、只是用一个margin,或者使用padding代替margin.
              2、给其中一个元素添加一个父元素,然后参照父子元素
              
     父子元素: 1、给父元素添加一个小的border-top或者padding-top,如图三
              2、设置overflow: hidden(产生BFC)
  

-- 图二

-- 图三

17、rgba() opacity visible: hidden display:none 的区别?

1、rgba()用于设置color或者background-color的颜色和透明度
2、opacity设置的是整个元素的透明度,并且当前元素可以触发事件
3、visible设置hidden时,透明度为0,但是当前元素不会触发事件
4、display: none不参与渲染,从render中摘除

18、css中设置垂直方向和水平方向重叠的属性

1、设置水平方向重叠的属性: leter-spacing(设置字符之间距离),word-spacing(设置文本、行内元素、行内块元素之间的水平距离),如图四
2、设置垂直方向重叠的属性: line-height = font-size + 行距,line-height会定义元素的之间的距离,当line-height < font-size时,字体会撑开line-height,与兄弟元素之间产生重叠,具体看这:[(https://blog.csdn.net/a2013126370/article/details/82786681)]

-- 图四

19、居中的方法?

• 1、块级元素的水平居中(margin: 0 auto)
     行内元素的水平居中(text-align: center)  父元素设置垂直居中(line-height = height).
        行内块元素垂直居中需要加上(vertical-align: middle)因为它是基线对齐
  

垂直水平居中:

• 2、flex布局 对父元素设置display: flex; jusitfy-content: center; align-items: center(css3,IE9不支持)
  

• 3、flex布局 对父元素设置display: grid; 子元素设置jusitfy-self: center; align-self: center(css3,IE9不支持)
  

• 4、定位布局: 父元素设置relative; 子元素设置absolute; 子元素设置top: 50%,left: 50%;
      4.1: 子元素设置 margin-left: -(一半自己的宽度), margin-top: -(一半自己的高度);
      4.2: 子元素设置 transform: translate3d(-50%,-50%, 0);(不用知道自己的宽高)
      4.3: 子元素设置 top:calc(50% - 一半自己的高度), left: calc(50% - 一半自己的宽度)
      4.4: 子元素设置 top: 0; left: 0; right: 0; bottom: 0; margin: auto;
  

• 5、子元素设置为inline-block,父元素设置text-align: center; font-size: 父元素的(60%的高度),这个font-size是由于line-height默认为normal,会被font-size撑开,同时设置的font-size决定了基线的位置是靠近line-height的高度的,所有显示被居中了.
  

• 6、父元素设置display: table-cell、text-align: center,vertical-align: middle(子元素为inline-block)
  

• 7、table表内的td设置 align: center v-align: middle;
  

• 8、双层inline-block居中: 如图五(改变字体方向从而实现居中)
  

补充: 部分方式主要是体现发散性思维和知识面的广度,在业务中不适用 图五:

20、px、em、rem、%、无单位的区别?

 1、px表示像素,是绝对单位
 2、em是相对单位,a(em) = a*(当前元素字体大小) (px)
 3、rem是相对单位,a(rem) = a * (根结点html上的字体大小)(px)
 4、%: 1、表示宽高时: %相对于父元素的宽高
        2、表示偏移时: %相对于父包含块(见下)
        3、表示margin和padding时: %相对于父元素的宽度
 5、不设置单位时,当前设置会被忽略

21、display:none和visibility:hidden的区别？你还知道什么办法可以让元素消失?

 1、display:none不会参与渲染,在进行布局时,会被忽略,
 2、visible依然参与渲染,并且在标准流中,只是透明度设置为0了.(区分opacity和visible见22)
 3、可以让元素的width和height设置为0,让元素消失

22、CSS link和@import的区别？

  1、link是html标签,@import是css提供的一种方式
  2、@import会在css加载完成后进行加载,link则是异步加载的
  3、dom可控性,可以通过 JS 操作 DOM ，插入`link`标签来改变样式；由于 DOM 方法是基于文档的，无法使用`@import`的方式插入样式。

23、论述什么是BFC?

  BFC(block formating context)表示块级格式化上下文,决定了与外部的位置关系和内部的排列方式
  1、BFC内的元素在垂直方向上排布
  2、相邻的元素之间由margin决定大小,margin之间会产生合并
  3、BFC区域不会和float元素重叠
  4、BFC大小的计算包含float
  5、BFC不会影响外部的元素,外部的元素也不会影响BFC区域的

• 产生BFC的方式:
   1、overflow不为visiblede
   2、设置float不为none
   3、设置position为absolute或者fixed
   4、设置display为inline-block、table-cell、table-caption
   5、html就是一个BFC
  

24、display中的值的作用?

   1、block: 常见标签: ul,ol,div,p、hx、li标签
               可以设置宽高,独占一行,margin、padding有效
   2、inline: 常见标签: span、a.
               宽高由内容撑开,margin和padding左右有效,padding上下只影响background
   3、inline-block: 常见标签: img,input、td
              拥有inline和block的特性、可以设置宽高、默认由内容撑开、相邻元素在同一行上

25、position中的值的作用?

    1、static: 默认postion、可用于消除absolute
    2、relative: 常用于作为absloute的包含块、并且可以进行偏移、偏移不会影响标准流
    3、absolute: 不在标准流上、可以进行偏移、偏移基于父包含块.
    4、fixed: 不在标准流上、可以进行偏移、偏移基于viewport,并且不随滚动条滚动
    补充: 在设置偏移时、top:0 和不设置top是有区别的,
         不设置时、默认在没有设置偏移时的位置、设置之后就会基于包含块偏移

26、描述“包含块”?

    包含块(context block css2.1)指的是要确定一个标签的位置和大小需要一个参照、这个参照就是包含块
    1、html根元素包含块: viewport视窗的大小
    2、position: static、relative的包含块为祖先的、最近的、块级盒子
    3、position: absolute的包含块为祖先的、最近的、position不为static的元素
    4、positon: fixed的包含块为html根元素包含块

27、为什么要清除浮动? 清除的方式?

    1、有些内容从后端获取到之后无法确定容纳content的盒子大小时,并且由使用了浮动、那么不清楚浮动就会使下面的内容上浮、影响布局
    方式: 见4

28、论述伪元素的使用方式?

    :after、::after等通过设置content和diplay来向选中标签中插入元素

29、meta标签的使用?

    meta表示元信息、不会被显示,主要用于向浏览器提供作者信息、网页信息、修改时间等
    可以设置viewport的scale等以及charset字符集、可以优化SEO

30、什么是media query?

    media query用于做响应式布局、偶尔做兼容
    可以通过link外链样式表、也可以用在内部样式表中
    常见的有@media screen and (max-width: xxx(px))等

31、box-sizing?

    x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 | 内外阴影
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2) inset;

32、flex布局?

flex- direction: 设置flex布局的主轴方向(默认为row)
flex-wrap: 确定flex布局的换行方式(默认为nowrap) (!!!换行的方式由主轴确定)
           设置wrap-reverse时,换行的方向会变为向上换行
flex-flow: flex-direction , flex-wrap
jusitify-content: 设置主轴排列方式, flex-start flex-end等
                  其中space-between表示两边紧贴,并且两边内的项目之间的距离相等
                  space-around表示所有项目之间的距离相等(包括第一个和最后一个项目)
                  所以第一个项目与左边框的距离+最后一个项目与右边框的距离=项目之间的距离
                  所以两边与边框的距离为中间项目之间的距离的一半
align-items: 设置副轴上的位置关系,默认为strech(表示会被拉升到父元素的尺寸)
align-content: 由于副轴上可能只有一个数据,也可能数据换行使副轴上有一个以上的数据
               该属性就是确定副轴上有多条交叉线时这些排列方式.
               默认为strech,这些轴线之间的距离等分排列
               所有它比align-items多space-around和space-between(align-items指定的是副轴上只有一条数据,所以不存在这两种排列方式)
order: 对flex-item指定,order大的会排在前面
flex-grow: 如果主轴上有多余的尺寸,确定每个item的等分尺寸(默认为0)
          等分方式为 (a+b+c)*a*剩余尺寸 = a在该行上的尺寸
flex-shrink: 当主轴上的尺寸容纳不下所有item的尺寸时,需要对item进行压缩(默认为1)
            仅当flex-wrap为nowrap时有效
flex-basis: 设置item,在flex布局代替width使用,默认为auto,flex-basis优先级是高于width的
           当同时设置flex-basis和width时,flex-basis会定义item的大小
flex: flex-grow, flex-shrink, flex-basis 默认为(0, 1, auto)

编程题:

33、画三角形?

34、css保持一个div长度比的1:1

35、写一个左中右布局、左右宽度200,中间自适应?

圣杯布局 双飞翼布局

h5+css3

36、H5的新特性?

1、新增标签: header(头部)、nav(导航栏)、section(主体内容)、aside(侧边栏)、article(文章)、footer(尾部)、
2、figure(图片内容)、figcaption(图片标题)、mark(高亮内容)、progress(过程条)、
3、input新增的表单元素: number、date、month、range等..
4、video以及radio
5、新增属性: autocomplete、required、min-length、max-length、placeholder、draggable、step、hidden等
6、drag and drop API、Canvas API(位图画布)、navigator API、localStorage、sessionStorage、webworker、websocket、history API、location API、fileReader API、webSQL(浏览器端的结构化数据库,noSQL键值对保存)

37、css3的新特性?

border-radius(边框圆角)、box-shadow(盒阴影)、text-shadow(文本阴影)、gradient(线性渐变)、
媒体查询、border-image、transform、transition、animation
新增伪类: :nth-of-type、:nth-first-type、:checked(checkbox被选中是的样式)、
          :disabled、:enabled
queryselect和queryselectAll API

38、 谈谈gradient?

通过设置background的-linear-gradient来设置颜色渐变(-webkit-gradient等是低版本的浏览器在做渐变时产生的,如果要兼容旧版本的浏览器就需要加上)
linear-gradient(方向(deg | left等)可选(默认是to bottom),(百分比) color,(百分比) color,(百分比) color),百分比表示在该方向上百分比时的bg-color
还有radial-gradient()等...  再问下去就摔门出去吧.😁

39、 谈谈boreder-radius?

border-radius是用来设置弧形角的、元素会找到四个角上距离四个角的斜45度并且以radius为两条底边的斜边(√2*radius)作为半价画弧、然后去掉多余的部分

40、cookie、localStorage、sessionStorage的区别?

cookie兼容性较好、但是大小只有4k、通常用于后端记录用户浏览状态,解决http协议的无状态缺陷(HTML篇不深入讲)
localStorage、sessionStorage通过setItem、removeItem、getItem、clear等获取
local...和session...区别在于localStorage会一直存在、sessionStorage在页面关闭时才会被清除
并且都具有同源限制(同源指的是同一端口、同一域名)

41、对语义话的理解?

语义话指的是使用更清晰的标签来表单当前html内容在全局的角色,对维护者更友好、同时对于SEO优化更有帮助

42、谈谈webWorker?

1、webWorker是一种浏览器后台技术、主要通过new Worker(url)来创建worker、通过onMessage和postMessage来发送和接受消息
2、由于浏览器是单线程的(blink和v8都在渲染进程的主线程上)、通过事件循环驱动,所以在执行脚本语句时会阻塞、这时就可以把耗时的任务交给worker去执行.
3、worker具有的特性: 不可以操作dom元素和window、全局对象不是主线程的window、可以使用setTimeout等、可以加载脚本(importScript)、可以使用XMLHttpRequest.

43、谈谈transition、transform、animation的区别?

1、transform用于做平移、缩放、旋转、倾斜等效果
2、transition用于做简单的动画过渡效果、无法对动画效果和关键帧等进行控制
3、animation可以用于做复杂的动画效果、可以设置动画的关键帧,产生暂停、变速等效果
4、transition能通过js或者hover等方式被动触发,animation可以主动触发

44、谈谈webSocket?

1、webSocket是一种支持双向通信的建立在TCP层之上的协议
2、webSocket兼容了http协议、通过upgrade实现了协议升级、默认使用80端口或者443端口
3、基于数据帧传输(http、tcp是基于数据流传输)、每一帧承载字符或者二进制数据
4、websocket是基于心跳机制保持长连接的(http长连接是基于简单的超时)(数据帧的9和A表示心跳ping和pong)
5、数据帧上有持续帧(保持前一帧:0)、非控制帧(文本:1,二进制:2,保留帧:3~7)、控制帧(8:关闭帧,9:ping,A:pong、B~F为控制帧保留)
6、如何证明握手被服务器所接受?
    在升级协议时,发送sec-websocket-key发送key、sec-websocket-accept进行hash加密(SHA1和BASE64)
    并把accept返回client证明连接成功
7、一条消息会被拆分成一个或者多个数据帧、代理服务器可以合并或者拆分消息
8、针对代理服务器的缓存污染攻击?
    恶意网页和恶意服务器建立websocket连接、然后伪造get请求(代理服务器误认为是两个http请求,但复用同一连接)
    get请求是针对被攻击服务器的、被缓存在代理服务器
    当正常页面在访问时、代理服务器直接返回恶意网页请求缓存的数据
    解决方法: client端发送一个frame-masking-key进行异或操作,让代理服务器不识别、从而无法缓存
9、梳理全过程:
    1、保持websocket处于open状态
    2、拆分消息为数据帧发送给server端
    3、client端发送必须基于掩码编码(防止缓存污染攻击)
    4、一旦发送或者接受关闭帧、连接处于CLOSING状态
        (接收到关闭帧: 不能接收任何消息,发送关闭帧: 不能发送任何消息)
        或者TCP连接意外断开
    5、当两端都接收到关闭帧、连接处于CLOSED状态
    6、TCP连接关闭后、websocket会被完全关闭