前端面试题之界面与样式(持续更新)

Html 概念

DOCTYPE 的作用

告诉浏览器使用哪个版本的 HTML 规范来渲染文档。DOCTYPE 不存在或形式不正确会导致 HTML 文档以混杂模式呈现。
标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。

常见的行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素: a span img input select
块级元素: div h1 p ul ol li dl dt dd
空元素:

---

页面导入样式时, 使用 link 和@import 有什么区别？

相同的地方, 都是外部引用 CSS 方式, 区别:

link 是 xhtml 标签, 除了加载 css 外, 还可以定义 RSS 等其他事务；@import 属于 CSS 范畴, 只能加载 CSS
link 引用 CSS 时候, 页面载入时同时加载；@import 需要在页面完全加载以后加载, 而且@import 被引用的 CSS 会等到引用它的 CSS 文件被加载完才加载
link 是 xhtml 标签, 无兼容问题；@import 是在 css2.1 提出来的, 低版本的浏览器不支持
link 支持使用 javascript 控制去改变样式, 而@import 不支持
link 方式的样式的权重高于@import 的权重
import 在 html 使用时候需要<style type="text/css">标签

介绍一下你对浏览器内核的理解？

主要分成两部分: 渲染引擎(Layout Engine 或 Rendering Engine)和 JS 引擎。

渲染引擎: 负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等）, 以及计算网页的显示方式, 然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同, 所以渲染的效果也不相同。
JS 引擎: 解析和执行 javascript 来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确, 后来 JS 引擎越来越独立, 内核就倾向于只指渲染引擎。

常见的浏览器内核有哪些？

Trident( MSHTML ): IE MaxThon TT The World 360 搜狗浏览器
Geckos: Netscape6 及以上版本 FireFox Mozilla Suite/SeaMonkey
Presto: Opera7 及以上(Opera 内核原为: Presto, 现为: Blink)
Webkit: Safari Chrome

HTML5 有哪些新特性,移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5

新增加了图像、位置、存储、多任务等功能。

新增元素:

• canvas
• 用于媒介回放的 video 和 audio 元素
• 本地离线存储。localStorage 长期存储数据, 浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除
• 语意化更好的内容元素, 比如 article footer header nav section
• 位置 API: Geolocation
• 表单控件, calendar date time email url search
• 新的技术: web worker(web worker 是运行在后台的 JavaScript, 独立于其他脚本, 不会影响页面的性能。您可以继续做任何愿意做的事情: 点击、选取内容等等, 而此时 web worker 在后台运行)
• web socket
• 拖放 API: drag、drop

移除的元素:

• 纯表现的元素: basefont big center font s strike tt u
• 性能较差元素: frame frameset noframes

区分:

DOCTYPE 声明的方式是区分重要因素
根据新增加的结构、功能来区分

对 HTML 语义化的理解？

• 去掉或丢失样式的时候能够让页面呈现出清晰的结构。
• 有利于 SEO 和搜索引擎建立良好沟通, 有助于爬虫抓取更多的信息, 爬虫依赖于标签来确定上下文和各个关键字的权重。
• 方便其它设备解析。
• 便于团队开发和维护, 语义化根据可读性。

cookies, sessionStorage 和 localStorage 的区别？

共同点: 都是保存在浏览器端, 且是同源的。

区别:

• cookies 是为了标识用户身份而存储在用户本地终端上的数据, 始终在同源 http 请求中携带, 即 cookies 在浏览器和服务器间来回传递, 而 sessionstorage 和 localstorage 不会自动把数据发给服务器, 仅在本地保存。
• 存储大小的限制不同。cookie 保存的数据很小, 不能超过 4k, 而 sessionstorage 和 localstorage 保存的数据大, 可达到 5M。
• 数据的有效期不同。cookie 在设置的 cookie 过期时间之前一直有效, 即使窗口或者浏览器关闭。sessionstorage 仅在浏览器窗口关闭之前有效。localstorage 始终有效, 窗口和浏览器关闭也一直保存, 用作长久数据保存。
• 作用域不同。cookie 在所有的同源窗口都是共享；sessionstorage 不在不同的浏览器共享, 即使同一页面；localstorage 在所有同源窗口都是共享

iframe 框架有那些优缺点？

优点:

• iframe 能够原封不动的把嵌入的网页展现出来。
• 如果有多个网页引用 iframe, 那么你只需要修改 iframe 的内容, 就可以实现调用的每一个页面内容的更改, 方便快捷。
• 网页如果为了统一风格, 头部和版本都是一样的, 就可以写成一个页面, 用 iframe 来嵌套, 可以增加代码的可重用。
• 如果遇到加载缓慢的第三方内容如图标和广告, 这些问题可以由 iframe 来解决。

缺点:

• 搜索引擎的爬虫程序无法解读这种页面
• 框架结构中出现各种滚动条
• 使用框架结构时, 保证设置正确的导航链接。
• iframe 页面会增加服务器的 http 请求

HTML5 的 form 如何关闭自动完成功能？

HTML 的输入框可以拥有自动完成的功能, 当你往输入框输入内容的时候, 浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面, 这样就不用全部输入进去了, 直接选择列表中的项目就可以了。但有时候我们希望关闭输入框的自动完成功能, 例如当用户输入内容的时候, 我们希望使用 AJAX 技术从数据库搜索并列举而不是在用户的历史记录中搜索。

方法:

• 在 IE 的 internet 选项菜单中里的自动完成里面设置
• 设置 form 输入框的 autocomplete 为 on 或者 off 来来开启输入框的自动完成功能

如何实现浏览器内多个标签页之间的通信?

• WebSocket SharedWorker
• 也可以调用 localstorge、cookies 等本地存储方式。 localstorge 在另一个浏览上下文里被添加、修改或删除时, 它都会触发一个事件, 我们通过监听事件, 控制它的值来进行页面信息通信。
  注意: Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常

元素的 alt 和 title 有什么异同？

在 alt 和 title 同时设置的时候, alt 作为图片的替代文字出现, title 是图片的解释文字。

CSS 概念

盒模型概念

盒模型分为标准盒模型与怪异盒模型( 也称为 IE 盒模型 )

标准盒模型下 width 和 height 为内容的宽高, 怪异盒模型下 width 和 height 为内容的宽高加上 border 的宽高, 再加上 padding 的宽高。

.box {
  /* Chrome 默认标准盒模型 */
  box-sizing: "content-box"; /* 标准盒模型 */
}
.box {
  box-sizing: "border-box"; /* 怪异盒模型 */
}

大部分的开源组件库, 例如 ant-design 都使用怪异盒模型, 不会造成布局破坏。

常见的垂直水平居中方法

通过样式处理

.parent {
  position: relative;
  width: 500px;
  height: 500px;
}
.child {
  width: 100px;
  height: 100px;
  background: red;
}
/* 方法一, 子级知道宽高 */
.child {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
  background: red;
}
/* 方法二, 使用 margin: auto */
.child {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: red;
}
/* 方法三, 子级不知道宽高, 使用 transform  */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: red;
}
/* 方法四, 使用 flex 布局 */
.parent {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
}
/* 方法六, 利用 table-cell 布局 */
.parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

通过 js 处理样式, 本质与 css 处理一致

// 方法五 js
let parentWidth = document.getElementById("parent").clientWidth,
  parentHeight = document.getElementById("parent").clientHeight,
  childWidth = document.getElementById("child").clientWidth,
  childHeight = document.getElementById("child").clientHeight;

document.getElementById("parent").style.position = "relative";
document.getElementById("child").style.position = "absolute";
console.log((parentWidth - childWidth) / 2);
document.getElementById("child").style.left =
  (parentWidth - childWidth) / 2 + "px";
document.getElementById("child").style.top =
  (parentHeight - childHeight) / 2 + "px";

px, em, rem 概念

• px 像素。绝对单位, 像素 px 是相对于显示器屏幕分辨率而言的, 是一个虚拟单位。是计算机系统的数字化图像长度单位, 如果 px 要换算成物理长度, 需要指定精度 DPI。

• em 是相对长度单位, 相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置, 则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小, 因此并不是一个固定的值。

• rem 是 CSS3 新增的一个相对单位(root em,根 em),使用 rem 为元素设定字体大小事, 仍然是相对大小但相对的只是 HTML 根元素。

  区别: IE 无法调用那些使用 px 作为单位的字体大小, 而 em 和 rem 可以缩放, rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身, 通过它既可以做到只修改根元素就成比例地调整所有字体大小, 又可以避免字体大小逐层复合的连锁反应。目前, 除了 IE8 及更早版本外, 所有浏览器已支持 rem。

CSS3 新特性

• 颜色: 新增 RGBA, HSLA 模式
• 文字阴影(text-shadow)
• 边框: 圆角（border-radius）边框阴影: box-shadow
• 盒子模型: box-sizing
• 背景: background-size 设置背景图片的尺寸, background-origin 设置背景图片的原点, background-clip 设置背景图片的裁剪区域, 以“, ”分隔可以设置多背景, 用于自适应布局
• 渐变: linear-gradient, radial-gradient
• 过渡: transition 可实现动画
• 自定义动画
• 在 CSS3 中唯一引入的伪元素是 ::selection
• 多媒体查询, 多栏布局
• border-image
• 2D 转换: transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
• 3D 转换

display:none; 与 visibility:hidden 的区别是什么?

display:none; 使用该属性后, HTML 元素（对象）的宽高, 高度等各种属性值都将“丢失”；
visibility:hidden; 使用该属性后, HTML 元素（对象）仅仅是在视觉上看不见（完全透明）, 而它所占据的空间位置仍然存在, 也即是说它仍然具有高度, 宽度等属性值。

css 选择符有哪些？优先级算法如何计算？内联和 !important 哪个优先级高？

css 选择符有: 类选择器、标签选择器、ID 选择器、后代选择器（派生选择器）、群组选择器
:link、:visited、:hover、:active 按照 LVHA（LoVe HAte）顺序定义

等级	标签内选择符	ID 选择符	Class 选择符/属性选择符/伪类选择符	元素选择符
示例	<span style="color:red;">	#text{color:red;}	.text{color:red;} [type=“text”]{color:red}	span{color:red;}
标记位	x,0,0,0	0,x,0,0	0,0,x,0	0,0,0,x

特点:

• 每个等级的初始值为 0,
• 每个等级的叠加为选择器出现的次数相加
• 不可进位, 比如 0,99,99,99
• 依次表示为: 0,0,0,0
• 每个等级计数之间没关联
• 等级判断从左向右, 如果某一位数值相同, 则判断下一位数值
• 如果两个优先级相同, 则最后出现的优先级高, !important 也适用
• 通配符选择器的特殊性值为: 0,0,0,0
• 继承样式优先级最低, 通配符样式优先级高于继承样式

!important 优先级最高。

FLEX 布局概念

flex 容器的属性

• flex-direction 属性决定主轴的方向（即项目的排列方向）。
• flex-wrap 定义如何换行
• flex-flow 是 flex-direction flex-wrap 的缩写
• justify-content 定义主轴的对齐方式
• align-items 定义交叉轴上的对齐方式
• align-content 定义多个轴的对齐方式

flex item 的属性

• order 定义项目的排序, 越小越靠前
• flex-grow 定义 item 放大比例, 默认为 0
• flex-shrink 定义 item 缩小比例, 默认为 1
• flex-basis 定义了在分配多余空间之前, 项目占据的主轴空间（main size）。
• flex 是 flex-grow, flex-shrink 和 flex-basis 的简写, 默认值为 0 1 auto。
• align-self 允许单个项目有与其他项目不一样的对齐方式, 可覆盖 align-items 属性。

BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域, 只有 Block-level box 参与, 它规定了内部的 Block-level Box 如何布局,

并且与这个区域外部毫不相干。

BFC 布局规则:

• 内部的 Box 会在垂直方向, 一个接一个地放置。
• Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
• 每个元素的 margin box 的左边, 与包含块 border box 的左边相接触(对于从左往右的格式化, 否则相反)。即使存在浮动也是如此。
• BFC 的区域不会与 float box 重叠。
• BFC 就是页面上的一个隔离的独立容器, 容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算 BFC 的高度时, 浮动元素也参与计算

css 鼠标禁用事件

.div {
  pointer-envets: none;
}

---

---

• ← 上一篇
• 下一篇 →