前端面试题(一起总结一起成长，不定期更新)

html, css 面试题收集

HTML

理解 HTML 语义化

用正确的标签来做正确的事，表示段落用 p 标签、表示标题用 h1-h6 标签、表示文章就用 article 等，有了良好的结构和语义，可以提高搜索引擎的有效爬取，提高网站流量。

html5 标签

表示结构的标签 <header> <nav> <main> <article> <section> <aside> <footer>
<nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
<article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。​​
<section>元素表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。

表示文字形式 <data>  <time>  <mark> 

嵌入内容 <video> <audio> <canvas>

标签

meta viewport 是做什么用的

是为了在移动端不让用户缩放页面使用的。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale-1, minimum-scale=1">
with=device-width 将布局视窗（layout viewport）的宽度设置为设备屏幕分辨率的宽度 
initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度
 maximum-scale=1 指定用户能够放大的最大比例
 minimum-scale=1 指定用户能够缩小的最大比例

label 标签的作用

label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签 相关的表单控件上。

a 标签中 如何禁用 href 跳转页面 或 定位链接

	e.preventDefault();href="javascript:void(0);

canvas

canvas 标签的 width 和 height 是画布实际宽度和高度，绘制的图形都是在这个上面。而 style 的 width 和 height 是 canvas 在浏览器中被渲染的高度和宽度。如果 canvas 的 width 和 height 没指定或值不正确，就被设置成默认值

iframe 哪些优缺点

iframe 是一种框架，也是一种很常见的网页嵌入方
	iframe 的优点：
		1.iframe 能够原封不动的把嵌入的网页展现出来。
		2.如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个 页面内容的更改，方便快捷。
		3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌 套，可以增加代码的可重用。
	    4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。
	iframe 的缺点： 
		1.会产生很多页面，不容易管理。 
		2.iframe 框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动 条，会分散访问者的注意力，用户体验度差。 
		3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好 的处理 iframe 中的内容，所以使用 iframe 会不利于搜索引擎优化。 
		4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。 
		5.iframe 框架页面会增加服务器的 http 请求，对于大型网站是不可取的。 现在基本上都是用 Ajax 来代替 iframe，所以 iframe 已经渐渐的退出了前端开发。

HTML5 新特性

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; sessionStorage 的 数据在浏览器关闭后自动删除; 新的技术 webworker, websocket, Geolocation;

webworker
websocket
Geolocation

HTML5 离线储存

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户 机器上的缓存文件。 原理： HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制(不是存储技术)，通 过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后 当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。 如何使用： 页面头部像下面一样加入一个 manifest 的属性

manifest

浏览器是怎么对 HTML5 的离线储存资源进行管理和加载

 在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第 一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。 如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面， 然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做 任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 离线的情况下，浏览器就直接使用离线存储的资源

CSS

几种获得宽高的方式

dom.style.width/height 这种方式只能取到 dom 元素内联样式所设置的宽高，也就是说如果该节点的样式是在 style 标签中或外联的 CSS 文件中设置的话，通过这种方法是获取不到 dom 的宽高的。 
dom.currentStyle.width/height 这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取 到。但这种方式只有 IE 浏览器支持.
window.getComputedStyle(dom).width/height 这种方式的原理和 2 是一样的，这个可以兼容更多的浏览器，通用性好一些。
dom.getBoundingClientRect().width/height 这种方式是根据元素在视窗中的绝对位置来获取宽高的
dom.offsetWidth/offsetHeight 这个就没什么好说的了，最常用的，也是兼容最好的。

获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height/width 
获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight/availWidth
网页全文的高度和宽度： document.body.scrollHeight/Width 
滚动条卷上去的高度和向右卷的宽度： document.body.scrollTop/scrollLeft 
网页可见区域的高度和宽度（不加边线）： document.body.clientHeight/clientWidth 
网页可见 区域的高度和宽度（加边线）： document.body.offsetHeight/offsetWidth

居中方式

水平方向上
针对 inline, 内联块 inline-block, 内联表 inline-table, inline-flex 元素及 img,span,button 等元素

.text_div{ text-align:center; }

不定宽块状元素居中

.text_div{ margin:0 auto;//且需要设置父级宽度 }

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

.wrap{ float:left; position:relative; left:50%; clear:both; }
.wrap-center{position:relative;left:-50%;}

垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

.text_div{ height: 120px; line-height: 120px; }

利用表布局

.father { display: table; }
.children { display: table-cell; vertical-align: middle; text-align: center; }

flex 布局

.center-flex { display: flex;
 flex-direction: column;//上下排列 
 justify-content: center; }

绝对布局方式

/*已知高度*/
.parent { position: relative; }
.child { position: absolute; top: 50%; height: 100px; margin-top: -50px; } 
/*未知高度*/
.parent { position: relative; }
.child { position: absolute;top: 50%; transform: translateY(-50%); }

/*flex 方 式*/
 .parent { display: flex; justify-content: center; align-items: center; 
/*grid 方 式 */
.parent { height: 140px; display: grid; }
.child { margin: auto; }

水平居中

行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
垂直居中

设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;

还有居中很多方法

css 优先确定级

每个选择器都有权值，权值越大越优先 继承的样式优先级低于自身指定样式
 ！important 优先级最高 js 也无法修改 权值相同时，靠近元素的样式优先级高
 顺序为内联样式表（标签内部）> 内部样式表（当 前文件中）> 外部样式表（外部文件中）

如何清除浮动

不清除浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了 浮动后，父元素会发生高度塌陷）
万能清除法 after 伪类 清浮动（现在主流方法，推荐使用）

	 float_div:after{
	   content:"";
	   clear:both;
	   display:block; 
	   height:0;
	   overflow:hidden;
	   visibility:hidden;
	       }
	   .float_div{ zoom:1 }
	   .clearfix:after { 
	   /*生成内容作为最后一个元素*/ 
	   content: ""; 
	   /*使生成的元素以块级元素显示,占满剩余空间*/
	    display: block; 
	    /*避免生成内容破坏原有布局的高度*/ 
	    height: 0; 
	    /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/ 
	    visibility: hidden; 
	    /*清除浮动元素对当前元素的影响*/
	    clear: both;
	     }
	     .clearfix { /*用于兼容 IE, 触发 IE hasLayout*/ *zoom:1; }

清浮动

自适应布局

左侧浮动或者绝对定位，然后右侧 margin 撑开使用 div 包含，然后靠负 margin 形成 bfc 使用 flex，道理差不多，具体怎么做看什么布局

可以百度具体布局

画三角形

#item {
        width: 0; 
        height: 0;
        /* transparent 透明色*/
        border-left: 50px solid transparent; 
        border-right: 50px solid transparent;
        border-top: 50px solid transparent;
        border-bottom: 50px solid blue;
        background: white; 
        }

三角形

盒模型

盒模型的组成，由里向外content,padding,border,margin. 内容(content)、填充(padding)、边界(margin)、 边框(border).
在IE盒子模型中，width表示content+padding+border这三个部分的宽度
在标准的盒子模型中，width指content部分的宽度
box-sizing的使用
	box-sizing: content-box 是W3C盒子模型
 	box-sizing: border-box 是IE盒子模型
	box-sizing的默认属性是content-box

calc, support, media各自的含义及用法

@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
calc() 函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算；
@media 查询，你可以针对不同的媒体类型定义不同的样式。

link @import 引入css

1、链接式

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

2、导入式

<style type="text/css">
  @import url("css文件路径");
</style>

CSS 中 link 与@import 的区别
@import 是 CSS 提供的语法规则，只有导入样式表的作用；link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。 
加载页面时，link 引入的 CSS 被同时加载，@import 引入的 CSS 将在页面加载完毕后加载。 
link 标签作为 HTML 元素，不存在兼容性问题，而@import 是 CSS2.1 才有的语法，故老版本 浏览器（IE5 之前）不能识别。
可以通过 JS 操作 DOM，来插入 link 标签改变样式；由于 DOM 方法是基于文档的，无法使 用@import 方式插入样式。

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

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

em 子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
vw/vh
全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。

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

画一条0.5px的直线

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

transform解释
transform

display 相关

 block:div 等容器类型
 inline:img span 等行内类型 
 table 系列：将样式变成 table 类型 
 flex:重点把握，非常强大 
 grid:同上
inline-block:可设置宽度，两者间有一点间隙 
inherit:继承父级
[flex阮一峰](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
[grid阮一峰](http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html)

标签：面试题,不定期,浏览器,标签,元素,离线,height,一起,iframe
来源： https://blog.csdn.net/davico_tao/article/details/113929919