html 面试

1div的垂直水平居中

1.设置margin

父：设置高度，设置 overflow: hidden;  子：设置垂直居中margin是父盒子的高度减去子盒子的高度再除以2，水平居中设置auto。

代码：.container{ height: 800px; background-color: black;  overflow: hidden; }

.son {width: 300px;height: 300px;background-color: blue;margin: 250px auto; }

2.利用绝对定位和相对定位

父容器设置相对定位；子容器设置绝对定位，然后left:0;right:0;top:0;bottom:0;

3.子元素绝对定位父元素相对定位

父容器相对定位，子容器设置绝对定位，top和left设置为50%，margin的值是子容器的宽度或高度的一半的负值

代码：.son{width:300px;height:300px;position:absolute;top:50%;margin-top:-150px;left:50%;margin-left:-150px;}

4.使用定位和css3位置移动

父容器相对定位，子容器设置绝对定位，top和left设置为50%，设置水平和垂直移动-50%

代码：.son{width:300px;height:300px;position:absolute;top:50%;transform:translate(-50%,-50%);}

5.使用flex布局  justify-content  align-items

父容器display:flex;justify-content:center;align-items:center;

6.使用绝对定位、相对定位加上 calc 计算

代码：.container{ height: 800px; background-color: black;  overflow: hidden; }

.son {width: 300px;height: 300px;background-color: blue;left:calc(800px - 500px)/2;top:calc(800px - 500px)/2; }

里面的div的宽高不确定的建议使用4和5

https://www.cnblogs.com/jmbt/p/16607985.html

2、回答完后会继续问当里面div的框高不固定时，怎么水平垂直居中 宽度高度不固定的div 如何水平居中以及垂直居中_CSS教程_CSS_网页制作_脚本之家

前端面试官：你能实现多少种水平垂直居中的布局（定宽高和不定宽高） - 知乎

1.1垂直居中几种方式？

单行文本: line-height = height
图片: vertical-align: middle;
absolute 定位: top: 50%;left: 50%;transform: translate(-50%, -50%);
flex: display:flex;margin:auto

2 介绍一下 CSS 的盒子模型？

 cSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

分两种模型：W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)
区 别： IE 的 content 部分把 border 和 padding 计算了进去;

（CSS的盒子模型区别：
    标准盒子模型：margin、border、padding、content
    IE盒子模型 ：margin、content（ border +  padding  + content ））

通过CSS如何转换盒子模型：
    box-sizing: content-box;    /*标准盒子模型*/
    box-sizing: border-box;      /*IE盒子模型*/

前端面试之盒子模型（标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性_慕课手记

3  css 选择器优先级？

优先级比较：!important > 内联样式 > id > class > 标签 > 通配

CSS权重计算：
第一：内联样式（style）  权重值:1000
第二：id选择器                   权重值:100
第三：类选择器                   权重值:10
第四：标签&伪元素选择器   权重值:1
第五：通配、>、+         权重值:0

!important>行内样式>ID选择器>Class选择器>标签>通配符 相同级别： （1）同一级别中后写的会覆盖先写的样式 （2）选择器约分 CSS优先级：是由四个级别和各级别出现次数决定的 四个级别：行内样式，ID选择器，Class选择器，标签 每个规则对应一个初始值0,0,0,0 若是 行内选择符，则加1、0、0、0 若是 ID选择符，则加0、1、0、0 若是 类选择符/属性选择符/伪类选择符，则分别加0、0、1、0 若是 元素选择符/伪元素选择符，则分别加0、0、0、1 算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。 注意： ①、!important的优先级是最高的，但出现冲突时则需比较”四位数“; ②、优先级相同时，则采用就近原则，选择最后出现的样式; ③、继承得来的属性，其优先级最低; !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化。

4 简明说一下 CSS link 与 @import 的区别和用法？

1link是一个html标签，所以是 HTML方式， @import属于CSS 范畴，是CSS方式。

2 @import是 CSS2.1 才出现的语法，所以某些浏览器老版本是有局限的，而link标签作为 HTML 元素，是不存在兼容性问题的。

3加载页面时，link标签引入的 CSS 可以被同时加载;@import引入的 CSS 只会在页面加载完毕后被加载。

4 link支持使用iavascript 控制DOM去改变样式，而@import不支持。
这点是说，我们可以通过 JS 操作DOM，灵活插入link标签来改变样式因为我们刚说过link是一个html标签，插入节点这个操作不陌生吧;而@import是不支持这么做的。支持。

5面试题：img标签的title和alt有什么区别？

区别一：
    title ： 鼠标移入到图片显示的值
    alt   ： 图片无法加载时显示的值
区别二：
    在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。

6 面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？

png:无损压缩，尺寸体积要比jpg/jpeg的大，适合做小图标。
jpg:采用压缩算法，有一点失真，比png体积要小，适合做中大图片。
gif:一般是做动图的。
webp：同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好。

• 什么是webp
  webp是谷歌开发的一种新图片格式，它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用webp格式的最大优点是在相同质量的文件下，它拥有更小的文件体积，因此它非常适合于网络图片的传输，因为图片体积的减少，意味着请求时间的减少，这样会提高用户的体验。这是谷歌开发的一种新的图片格式。
• 浏览器如何判断是否支持webp格式图片？
  通过创建Image对象，将其src属性设置为webp格式的图片，然后在onload事件中获取图片的宽高，如果能够获取就说明浏览器支持webp格式图片，如果不能获取或者触发了onerror函数，那么就说明浏览器不支持webp格式的图片。

7 面试题：line-height和heigh区别

line-height是每一行文字的高，如果文字换行则整个盒子高度会增大（行数*行高）。
height是一个死值，就是这个盒子的高度。

8  面试题：用CSS画一个三角形

如何使用 CSS 绘制三角形 - 简书

 纯 CSS 实现三角形的 3 种方式 - 知乎

9display: none;与visibility: hidden;的区别

1. 占用位置的区别
display: none;                 是不占用位置的
visibility: hidden;   虽然隐藏了，但是占用位置

2. 重绘和回流的问题

visibility: hidden; 、 display: none;  产生重绘
display: none;     还会产生一次回流

产生回流一定会造成重绘，但是重绘不一定会造成回流。

产生回流的情况：改变元素的位置(left、top...)、显示隐藏元素....
产生重绘的情况：样式改变、换皮肤

10 面试题：opacity 和 rgba区别

共同性：实现透明效果
​
1. opacity 取值范围0到1之间，0表示完全透明，1表示不透明
2. rgba   R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间
​
区别：继承的区别
opacity会继承父元素的opacity属性，而RGBA设置的元素的后代元素不会继承不透明属性。

11 position有哪些值？分别是根据什么定位的？

static [默认]  没有定位
fixed  固定定位，相对于浏览器窗口进行定位。
relative  相对于自身定位，不脱离文档流。
absolute    相对于第一个有relative的父元素，脱离文档流。
​
​
relative和absolute区别
1. relative不脱离文档流 、absolute脱离文档流
2. relative相对于自身 、 absolute相对于第一个有relative的父元素
3. relative如果有left、right、top、bottom ==》left、top
     absolute如果有left、right、top、bottom ==》left、right、top、bottom

12margin的嵌套塌陷问题 *

父级节点和子级节点都设置了 上外边距会塌陷，里面盒子的外边距会传递给外面的盒子，并且两个外边距选大的值起效果。解决办法：在外层设置 overflow:hidden，触发了BFC

13清除浮动的方式

浮动定位将元素排除在普通流之外，即元素讲脱离文档流，不占据空间。浮动元素碰到包 含它的边框或者浮动元素的边框停留

为什么需要清除浮动

1、父元素的高度无法被撑开，影响与父元素同级的元素；

2、与浮动元素同级的非浮动元素（内联元素）会跟随其后；

3、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解 决方法

清除浮动 ：clear：both

清除浮动的几种方法：1.隔墙法也称额外标签法;2.overflow: hidden  / scroll / auto;3.after伪类;4.双伪元素;5.为父元素设置高度

清除浮动的常用方法_归途风景111的博客-CSDN博客

14项目中多张小图片的优化问题 *

1.可以使用精灵图，将 很多张小图拼接为一张大图.优势：减少url请求;缺点：a.颜色不能调，b.大小不能放大，图片会虚掉，c.给大图添加其他的小图标太麻烦，d.布局相对来讲麻烦，需要移动背景位置

2.可以使用字体图标，优点：轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求， 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等，兼容性：几乎支持所有的浏览器，请放心使用。 阿里巴巴字体图标库：http://www.iconfont.cn/  

15em rem px的区别

em和rem的区别
相同点: 都是css中的相对长度单位

区别:
rem是相对于根元素字体大小进行计算的，任意浏览器的默认字体高都是
16px，所以一般1rem=16px。

em是相对于当前元素的字体大小计算的。

但是为什么我们经常说相对于父元素呢其实很好理解，因为font-size字体大小这个属性是可以被继承的，所以父元素的字体大小势必会影响到它的子元素字体大小，也就是说子元素如果没有自己的font-size，那它的font-size就会继承于父元素，那此时1em的值就可以认为是相对于父元素字体大小来计算的。

P 另外，rem是css3新增的一个相对单位，r就是root根的缩写，它的出现是为了解决em的缺点，em我们刚说是相对于父元素或当前元素的字体大小进行换算的，当当前元素或父元素字体大小改变时，就又得重新计算，那么层级较多的时候，换算也就会越复杂。而rem只相对于HTML根目录，有了rem这个单位，我们只需要调整根元素html的font-size就能达到所有元素的动态适配，避免了一些复杂的层级关系。

rem为什么能够自适应所有的移动端屏幕:

因为 引入了 flexible.js ，而在这个js中 获取了屏幕宽度，根据屏幕宽度的不同设置了html的 font-size值的大小，导致不同屏幕的1rem  等于不同的 px值，这样就可以自适应所有的手机屏幕了。

15.1rem、1em、1vh、1px各自代表的含义？

rem
rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

em
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size

vw/vh
全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。

px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{19201024}等不同的分辨率
19201024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素
 

16 简述一下你对 HTML 语义化的理解？

用正确的标签做正确的事情。
html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;

搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
 

17 Chrome支持12px的文字

当需要小于 12px 字体的时候，有以下几个方法可以使用。

• -webkit-text-size-adjust:none; 这个属性在高版本的 Chrome 中已经被废除。
• 使用 transform: scale(0.5, 0.5)，但使用 transform 需要注意下面几点：
• transform 对行内元素无效，因此要么使用 display: block; 要么使用 display: inline-block;
• transform 即使进行了缩放，原来元素还是会占据对应的位置。因此需要做调整，最好是在外面再包一层元素，以免影响其他元素。
• 使用图片

最好的办法还是进行切图，或者就不要使用小于 12px 的字体。

18css行内样式为什么尽量不要使用

css行内样式是直接将样式属性写在开始标签style属性中，多个元素难以共享样式，不利于代码复用；

且HTML和CSS代码混杂，结构样式没有分离，不利于程序员和搜索引擎阅读，不利于后期维护。

19 BFC

定义：

• BFC（Block Format Context）块级格式化上下文，是页面盒模型中的一种CSS渲染方式，相当于一个独立的容器，里面的元素和外部元素相互不影响。

• 官方文档解释如下：A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.（一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素。）

---

只要元素满足下面任一条件即可触发 BFC 特性

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

---

BFC主要作用：

• 清除浮动，比如元素内有浮动子元素导致高度塌陷，给这个元素添加 overflow：hidden 可以实现包裹浮动子元素。（因为创建了 BFC，不允许孩子超出自己的边界）
• 防止同一BFC容器中的相邻元素间外边距重叠问题，父子块级元素如果没有设置边框和padding，外边距会产生折叠。给父元素添加 overflow：hidden 后会阻止父子元素外边距折叠。

 https://www.cnblogs.com/chloe56/p/16202055.html

20 页面中图片大小自适应问题，避免留白

第一种：div 包着 img

img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

第二种：背景图片

style="background-image: url(${user.headimgurl});background-size: cover; "

background-size 的各个属性 ：

第三种：div 设置flex布局，img设置width： 100%
相当于宽度固定，图片宽度全部撑开，高度自适应，避免留白

 21画一条0.5px的直线？

height: 1px;
transform: scale(0.5);

22 常见兼容性问题？

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
 

23 Css3 h5 新特性

H5新增新特性

1、拖拽释放(Drap and drop) API ondrop

拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在HTML5中，拖放是标准的一部分，任何元素都能够拖放。

2、自定义属性data-id

3、语义化更好的内容标签(header,nav,footer ,aside, article, section)

4、音频，视频(audio, video)

如果浏览器不支持自动播放怎么办?在属性中添加autoplay

5、画布Canvas

5.1)getContext()方法返回一个用于在画布上绘图的环境

Canvas.getContext(contextID)参数contextID指定了您想要在画布上绘制的类型。当前唯一的合法值是“2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API。

5.2)cxt.stroke()如果没有这一步线条是不会显示在画布上的

5.3)canvas和image在处理图片的时候有什么区别?

image是通过对象的形式描述图片的，canvas通过专门的API将图片绘制在画布上。

6、地理(Geolocation)API

7、本地离线存储localStorage长期存储数据浏览器关闭后数据不丢失

8、sessionStorage 的数据在浏览器关闭后自动删除

9、表单控件calendar,date,time,email,url,search,tel,file,number。

10、新的技术webworker, websocket , Geolocation
 

CSS3新增新特性

1、颜色: 新增RGBA, HSLA模式

2、文字阴影(text-shadow)

3、边框: 圆角(border-radius) 边框阴影 : box-shadow

4、盒子模型: box-sizing

5、背景:background-size background-origin background-clip

6、渐变: linear-gradient, radial-gradient

7、过渡: transition可实现动画

8、自定义动画 animate @keyfrom

9、媒体查询多栏布局 @media screen and (width:800px) {…} 10、border-image

11、2D转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

12、3D转换

13、字体图标font-face

14、弹性布局flex

24 transform

1、移动 translate(x, y)

2、缩放 scale(x, y)

3、旋转 rotate(deg)

CSS 变形(CSS3) transform_css transform_快乐de馒头的博客-CSDN博客

25 CSS 选择器有哪些?哪些属性可以继承?

CSS 选择器：

1、id 选择器（ # myid）

2、类选择器（.myclassname）

3、标签选择器（div, h1, p）

4、相邻选择器（h1 + p）

5、子选择器（ul > li）

6、后代选择器（li a）

7、通配符选择器（ * ）

8、属性选择器（a[rel = "external"]）

9、伪类选择器（a:hover, li:nth-child）

继承问题：

可继承的样式： font-size font-family color, UL LI DL DD DT;

不可继承的样式：border padding margin width height ;

26 block和inline的区别？

• **block：**独占一行，可设置宽高、margin、padding
• **inline：**不独占一行，不可设置宽高，可设置水平margin、padding但不能设置垂直方向margin、padding

常见的inline内联元素：
span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block））

常见的block块级元素：
div、p、h1…h6、ol、ul、dl、table、address、blockquote、form

常见的inline-block内联块元素：
img、input
 

27、transition和animation的区别

• **transition：**过度样式，需要被动触发
• **animation：**动画样式，不需要被动触发，可以自动触发，可结合@keyframe进行多个关键帧的动画

28伪元素和伪类

• **伪元素：**顾名思义，假的元素，只会显示其内容，但是并不会在dom树中找到他

p::before {content:"林三心";}
p::after {content:"林三心";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
复制代码

• **伪类：**将一些效果加到节点上，例如鼠标点击，悬浮等

a:hover {color: #FF00FF}
p:first-child {color: red}

29 为何使用less、sass

他们是css预处理器，使用他们的变量、继承、运算、函数等功能，大大提高样式编写效率，大多数打包工具最后都会将他们解析为原始css样式代码

30 单行、多行溢出省略号

• 单行

overflow: hidden; 
text-overflow: ellipsis;
white-space: nowrap;
复制代码

• 多行

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

31、两栏布局

两栏布局指的是，左边固定右边自适应

• float浮动

.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  background: tomato;
}
.right {
  margin-left: 200px;
  width: auto;
  background: gold;
}
复制代码

• flex布局

.outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  flex: 1;
  background: gold;
}
复制代码

32、三栏布局

三栏布局指的是左右固定，中间自适应

直接用flex布局

.outer {
  display: flex;
  height: 100px;
}
​
.left {
  width: 100px;
  background: tomato;
}
​
.right {
  width: 100px;
  background: gold;
}
​
.center {
  flex: 1;
  background: lightgreen;
}
复制代码

33、双飞翼（圣杯）布局

直接用flex布局

.outer {
  display: flex;
  height: 100px;
}
​
.left {
  width: 100px;
  background: tomato;
}
​
.right {
  width: 100px;
  background: gold;
}
​
.center {
  flex: 1;
  background: lightgreen;
}

34 说一下弹性布局

Q1：什么是弹性盒布局？

• 特点：让元素对不同屏幕尺寸和不同显示设备做好适应。在响应式网站表现较好。

一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。
我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式

35 rem适配方案

.1 rem适配方案

1、让一些不能等比例自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

2、使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比例缩放的适配。

高效简洁的rem适配方案flexible.js

神器，vscode  px转换rem插件cssrem,从此就不用less计算rem了。写完像素值会弹出提示转为rem选择然后回车就可以了。这个插件默认的html文字大小是16px;所以要修改默认插件的html文字大小，改为设计稿的大小除以10后的大小。

十、rem适配方案_快乐de馒头的博客-CSDN博客

36 如何解决 margin“塌陷”？

外边距塌陷共有两种情况：

第一种情况：两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给 margin-top，那么他们两个的间距会重叠，以大的那个计算。解决这种情况 的方法为：两个外边距不同时出现 第二种情况：两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生 上边距，父子元素会进行粘连，决绝这种情况的方法为：父级添加一个 css 属性，overflow： hidden，禁止超出 外边距重叠就是 margin-collapse

解决方案：

1、为父盒子设置 border，为外层添加 border 后父子盒子就不是真正意义上的贴合（可 以设置成透明：border：1px solid transparent）；

2、为父盒子添加 overflow：hidden；

3、为父盒子设定 padding 值；

4、为父盒子添加 position：fixed；

5、为父盒子添加 display：table；

6、利用伪元素给父元素的前面添加一个空元素

.father::before { content:''; display:table; }

37 雪碧图 （ 精灵图 ）