HTML/CSS

浏览器的重排、重绘、合成、回流

重排：

当元素的几何属性发生变化时（如位置、大小、边距、填充等），浏览器需要重新计算元素的布局，并重新排列元素的位置。这个过程称为重排。

重绘：

当元素的外观发生变化时（如颜色、背景、边框等），浏览器需要重新绘制元素。这个过程称为重绘。

合成：

当浏览器需要将多个图层组合成一个最终的图像时，需要进行合成操作。合成操作将图层按照一定的顺序进行组合，并将其绘制到屏幕上。

重排和回流：

回流是指浏览器重新计算所有受重排影响的元素的位置和大小。换句话说，回流是重排的結果。

因此，重排总是会导致回流，但回流不一定是由于重排引起的。例如，如果浏览器的窗口大小发生变化，这将导致回流，但不会导致重排。

BFC(Block Formatting Context)

BFC(Block Formatting Context)，定义了块级元素的布局规则，并影响了子元素的位置和行为。

BFC 的特性

BFC 是一个独立的布局区域，内部元素不会受到外部元素的影响。
BFC 内部的元素垂直排列，不会受到浮动元素的影响。
BFC 内部的元素不会与外边距重叠。
BFC 内部的元素可以有自己的背景色和边框。

如何创建 BFC

以下元素可以创建 BFC：

块级元素，如<div>、<h1>、<p>等。
浮动元素，如<img>、<a>等。
绝对定位元素，如<div style="position: absolute;">等。
flexbox 容器元素，如<div style="display: flex;">等。
grid 容器元素，如<div style="display: grid;">等。

BFC 的应用

BFC 在 CSS 布局中有很多应用，例如：

清除浮动：BFC 可以清除浮动元素的影响，使后面的元素不会受到浮动元素的影响。
创建多列布局：BFC 可以创建多列布局，使元素垂直排列，不会受到浮动元素的影响。
创建响应式布局：BFC 可以创建响应式布局，使元素在不同设备上都能正确显示。

BFC 的注意事项

在使用 BFC 时，需要注意以下几点：

BFC 内部的元素不会与外边距重叠，因此在设置 BFC 内部元素的外边距时，需要注意不要与 BFC 的边框重叠。
BFC 内部的元素可以有自己的背景色和边框，因此在设置 BFC 内部元素的背景色和边框时，需要注意不要与 BFC 的背景色和边框冲突。

设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别

设备像素 (px)：这是设备上单个物理像素的大小。它通常由设备制造商决定，并且在设备的生命周期内保持不变。
CSS 像素 (px)：这是 CSS 中使用的像素单位。它与设备像素不同，因为它可以根据设备的分辨率进行缩放。例如，在高分辨率设备上，1 个 CSS 像素可能等于多个设备像素，而在低分辨率设备上，1 个 CSS 像素可能等于单个设备像素。
设备独立像素 (dp)：这是 Android 中使用的像素单位。它与 CSS 像素类似，但它根据设备的密度进行缩放。这意味着在高密度设备上，1 个 dp 将等于多个设备像素，而在低密度设备上，1 个 dp 将等于单个设备像素。
dpr (设备像素比)：这是设备像素和 CSS 像素之间的比率。它通常由设备制造商决定，并且在设备的生命周期内保持不变。
ppi (每英寸像素)：这是设备上每英寸的像素数。它通常由设备制造商决定，并且在设备的生命周期内保持不变。

下表总结了设备像素、CSS 像素、设备独立像素、dpr 和 ppi 之间的区别：

特性	设备像素	CSS 像素	设备独立像素	dpr	ppi
定义	设备上单个物理像素的大小	CSS 中使用的像素单位	Android 中使用的像素单位	设备像素和 CSS 像素之间的比率	设备上每英寸的像素数
缩放	不缩放	根据设备的分辨率缩放	根据设备的密度缩放	不缩放	不缩放
决定因素	设备制造商	设备制造商	设备制造商	设备制造商	设备制造商
生命周期	设备的生命周期	设备的生命周期	设备的生命周期	设备的生命周期	设备的生命周期

css 中，有哪些方式可以隐藏页面元素？区别?

display: none;：这个属性将元素完全从文档流中移除，就像它从未存在过一样。它不占据任何空间，也不影响其它元素的布局。这意味着如果你有一个元素列表，其中一个元素设置了"display: none;"，那么其它元素会填补这个元素的位置。需要注意的是，display: none 的元素是不会被屏幕阅读器读取的。
visibility: hidden;：这个属性将元素隐藏，但不会从文档流中移除。也就是说，元素虽然不可见，但仍然占据空间，并影响布局。这与"display: none;"不同，后者会完全移除元素。与"display: none;"一样，visibility: hidden 的元素也不会被屏幕阅读器读取。
opacity: 0;：这个属性将元素的透明度设置为 0，使其完全透明。但是，元素仍然存在于文档流中，占据空间，并影响布局。此外，元素仍然可以接收事件，如点击或悬停。这与"visibility: hidden;"不同，后者会使元素无法接收事件。值得注意的是，opacity: 0 的元素会被屏幕阅读器读取。
position: absolute; left: -9999px;：这个方法将元素移出屏幕视口，使其对用户不可见。这种方法常用于创建屏幕阅读器可以读取但对视觉用户隐藏的内容。
设置 height、width 模型属性为 0：这种方法的效果类似于"display: none;"，因为它会使元素消失，且不占据任何空间。然而，这种方法的一大缺点是，如果元素有内边距（padding）或边框（border），那么即使宽度和高度设置为 0，这些部分仍然会显示。此外，这种方法可能不适用于某些替代内容，如图像。
clip-path：clip-path 属性可以创建一个剪切区域，区域之外的部分将被隐藏。如果你使用一个不包含任何区域的 clip-path（例如，clip-path: polygon(0 0, 0 0, 0 0);），那么元素将会被完全隐藏。这种方法的优点是它可以创建复杂的隐藏效果，但缺点是它在旧的或不支持 clip-path 的浏览器中可能无法工作。

元素水平垂直居中的方法

利用定位+margin:auto：这种方法适用于绝对定位的元素，将元素的top、right、bottom、left设置为 0，然后设置margin为auto，就可以实现水平垂直居中。
利用定位+margin:负值：这种方法适用于已知宽高的元素，将元素的top和left设置为 50%，然后通过设置margin的负值（通常为元素宽高的一半）来实现水平垂直居中。
利用定位+transform：这种方法适用于未知宽高的元素，将元素的top和left设置为 50%，然后通过transform: translate(-50%, -50%)来实现水平垂直居中。
table 布局：这种方法通过设置父元素为display: table，子元素为display: table-cell，然后设置vertical-align: middle和text-align: center来实现水平垂直居中。
flex 布局：这种方法通过设置父元素为display: flex，然后设置justify-content: center和align-items: center来实现水平垂直居中。
grid 布局：这种方法通过设置父元素为display: grid，然后设置justify-content: center和align-items: center来实现水平垂直居中。
利用 line-height 属性：当元素为单行文本时，可以设置line-height等于height来实现垂直居中。
利用 vertical-align 属性：当元素为 inline 或 inline-block 元素时，可以设置vertical-align: middle来实现垂直居中。
利用 CSS3 的 calc() 函数：可以使用calc()函数动态计算 top 或 left 的值，配合position: absolute来实现水平垂直居中。
利用 CSS3 的 vh、vw 单位：使用这两种单位可以相对于视口的高度和宽度来设置元素的位置，从而实现水平垂直居中。
利用 display:table-cell 和 vertical-align:middle：这种方法可以实现垂直居中，但需要注意的是，它需要一个额外的容器元素。
利用伪元素：通过创建一个伪元素，并使用vertical-align: middle属性，可以实现垂直居中。

flex 布局

弹性盒布局模型（Flexbox）是一种用于在页面上创建灵活的布局的 CSS3 工具。它允许我们在不同屏幕尺寸和设备上更容易地设计灵活的响应式布局。

Flexbox 布局基于两条轴，主轴和交叉轴，元素可以沿这两条轴进行布局。你可以使用各种属性来定义元素如何在这些轴上排列和对齐。

Flexbox 有两类重要的属性：容器属性和项目属性。

容器属性包括：

flex-direction：定义主轴的方向
flex-wrap：定义项目是否可以换行
flex-flow：flex-direction 和 flex-wrap 的简写形式
justify-content：定义项目在主轴上的对齐方式
align-items：定义项目在交叉轴上的对齐方式
align-content：定义多轴线的对齐方式

项目属性包括：

order：定义项目的排列顺序
flex-grow：定义项目的放大比例
flex-shrink：定义项目的缩小比例
flex-basis：定义项目的初始尺寸
flex：flex-grow, flex-shrink 和 flex-basis 的简写
align-self：允许单个项目有与其他项目不一样的对齐方式

Flexbox 的应用场景广泛，例如，它可以用于创建响应式的导航栏，卡片布局，网格系统，甚至是整个页面的布局。在移动端和小程序的开发中，Flexbox 的使用尤其广泛。

grid 布局

CSS Grid Layout（简称 Grid）是 CSS 的一个布局模型，允许开发者创建复杂的二维布局。与 Flexbox 不同，Grid 是为二维布局设计的，这意味着它可以同时处理行和列。

Grid 布局基于两种类型的组件：grid 容器和 grid 项。Grid 容器是用来定义 grid 布局的元素，而 grid 项则是在 grid 容器内部的子元素。

Grid 容器的主要属性包括：

grid-template-columns 和 grid-template-rows：定义网格的列和行的大小
grid-template-areas：定义网格的模板区域
grid-template：grid-template-rows, grid-template-columns 和 grid-template-areas 的简写形式
grid-column-gap 和 grid-row-gap：定义列和行之间的间距
grid-gap：grid-column-gap 和 grid-row-gap 的简写形式
justify-items，align-items，place-items：定义网格项在网格单元格内部的对齐方式
justify-content，align-content，place-content：定义网格在容器内部的对齐方式

Grid 项的主要属性包括：

grid-column-start，grid-column-end，grid-row-start 和 grid-row-end：定义网格项的大小和位置
grid-column，grid-row：grid-column-start/end 和 grid-row-start/end 的简写形式
grid-area：grid-row-start，grid-column-start，grid-row-end 和 grid-column-end 的简写形式
justify-self，align-self，place-self：定义网格项在其网格区域内部的对齐方式

与 Flexbox 类似，Grid 布局在创建复杂的响应式布局，如瀑布流布局，卡片布局，网格系统等方面非常有用。

iframe 的缺点：

性能问题：每个 <iframe> 都是一个独立的页面，需要进行单独的 HTTP 请求，这可能会影响页面加载速度和性能。
SEO 问题：搜索引擎可能无法正确解析 <iframe> 中的内容，这可能会影响网站的搜索引擎优化（SEO）。
布局问题：<iframe> 的布局可能会在不同的浏览器或设备上产生不一致的效果。
安全问题：<iframe> 可能会被用于执行跨站脚本攻击（XSS）或者点击劫持攻击。
可访问性问题：一些辅助技术（如屏幕阅读器）可能无法正确解析 <iframe> 中的内容。
跨域问题：如果 <iframe> 中嵌入的页面与当前页面不在同一域，可能会遇到跨域问题。
历史记录问题：<iframe> 的导航不会被添加到浏览器的历史记录中，这可能会影响用户的浏览体验。

javascript:void(0)

javascript:void(0) 是一种常见的 JavaScript 代码片段，经常在 HTML 中的 href 或 onclick 属性中看到。它的主要作用是防止页面跳转。

javascript: 是一个伪协议（pseudo-protocol），它告诉浏览器后面的内容是 JavaScript 代码。
void 是一个 JavaScript 操作符，用于计算一个表达式然后返回 undefined。
0 是这里的表达式，不过实际上可以是任何表达式。无论这个表达式是什么，void 都会让它返回 undefined。

所以，javascript:void(0) 的最终结果是 undefined。由于 href 或 onclick 的结果是 undefined，浏览器不会执行任何操作，也就不会发生页面跳转。

meta viewport 相关

HTML

<!DOCTYPE html>  <!--H5标准声明，使用 HTML5 doctype，不区分大小写-->
<head lang="en"> <!--标准的 lang 属性写法-->
<meta charset="utf-8">    <!--声明文档使用的字符编码-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>   <!--优先使用 IE 最新版本和 Chrome-->
<meta name="description" content="不超过150个字符"/>       <!--页面描述-->
<meta name="keywords" content=""/>     <!-- 页面关键词-->
<meta name="author" content="name, email@gmail.com"/>    <!--网页作者-->
<meta name="robots" content="index,follow"/>      <!--搜索引擎抓取-->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!--为移动设备添加 viewport-->
<meta name="apple-mobile-web-app-title" content="标题"> <!--iOS 设备 begin-->
<meta name="apple-mobile-web-app-capable" content="yes"/>  <!--添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏-->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!--添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）-->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telphone=no, email=no"/>  <!--设置苹果工具栏颜色-->
<meta name="renderer" content="webkit"> <!-- 启用360浏览器的极速模式(webkit)-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">     <!--避免IE使用兼容模式-->
<meta http-equiv="Cache-Control" content="no-siteapp" />    <!--不让百度转码-->
<meta name="HandheldFriendly" content="true">     <!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓-->
<meta name="MobileOptimized" content="320">   <!--微软的老式浏览器-->
<meta name="screen-orientation" content="portrait">   <!--uc强制竖屏-->
<meta name="x5-orientation" content="portrait">    <!--QQ强制竖屏-->
<meta name="full-screen" content="yes">              <!--UC强制全屏-->
<meta name="x5-fullscreen" content="true">       <!--QQ强制全屏-->
<meta name="browsermode" content="application">   <!--UC应用模式-->
<meta name="x5-page-mode" content="app">   <!-- QQ应用模式-->
<meta name="msapplication-tap-highlight" content="no">    <!--windows phone 点击无高亮
设置页面不缓存-->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

盒模型

IE 盒子模型、W3C 盒子模型
盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)
区别： IE 的 content 部分把 border 和 padding 计算了进去

渐进增强与优雅降级的区别

**渐进增强（Progressive Enhancement）和优雅降级（Graceful Degradation）**是两种处理网页设计中跨浏览器兼容性问题的策略。

渐进增强：这种策略主要针对低版本浏览器进行页面重构，保证在满足基本功能的情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。
优雅降级：这种策略从一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

两者的主要区别：

优雅降级是从复杂的现状开始，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始，并在此基础上不断扩充，以适应未来环境的需要。
降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。旧版的浏览器被认为仅能提供“简陋却无妨”的浏览体验。可以做一些小的调整来适应某个特定的浏览器，但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

相反，“渐进增强”观点则认为应关注于内容本身。内容是建立网站的诱因，有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例，也是它立即被 Yahoo 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

HTML5 特性有哪些？

多媒体，用于媒介回放的 video 和 audio 元素。
图像效果，用于绘画的 canvas 元素，svg 元素等。
离线&存储，对本地离线存储能够更好地支持，比如 localstorage,Cookies 等。
性能与集成特性，HTML5 会通过 XML HttpRequest2等技术，帮助您的 Web 应用和网站在多样化的环境中更快速地工作

Meta 标签，都有一些什么特性，有什么作用？

什么是 meta 标签：<meta> 标签提供关于 HTML 文档的元数据，它不会显示在页面上，但是对于机器是可读的，可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

meta 的作用：meta 里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的 HTTP 头部内容。

常用 meta 标签总结：

Charset：它是声明文档使用的字符编码，以防乱码，而且一定要写在第一行
Viewport：主要是影响移动端页面布局的。

前端需要注意哪些 SEO

合理的 title、 description、 keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同⻚⾯title 要有所不同；description 把⻚⾯内容高度概括，⻓度合适，不可过分堆砌关键词，不同⻚⾯ description 有所不同；keywords 列举出重要关键词即可。
语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网⻚
重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取⻓度有限制，保证重要内容⼀定会被抓取
重要内容不要用 js 输出：爬虫不会执⾏ js 获取内容
少用 iframe，搜索引擎不会抓取 iframe 中的内容
⾮装饰性图片必须加 alt
提高网站速度：网站速度是搜索引擎排序的⼀个重要指标

什么是渐进式渲染？

指打开页面先加载首屏显示的内容，之后再随着时间或者滚动页面才进行后面的加载。

CSS 单位

相对单位

em：相对于父元素的字体大小计算。
rem：相对于页面根元素（html）的字体大小计算。
ex：基于所用字体中小写字母 x 的高度计算。
ch：基于数字 0 的宽度计算。
vw：视窗宽度的百分比。
vh：视窗高度的百分比。
vmax：较大的 vh 和 vw。
vmin：较小的 vh 和 vw。

绝对单位

px：Pixels，像素，不严格等于显示器的像素，特别是在高清屏下。
pt：Point，点，用于软件设计和排版印刷行业。
pc：Picas，派卡，等于新四号铅字的尺寸，1 派卡等于 12 点。
cm：Centimeters，厘米。
mm：Millimeters，毫米。
in：Inches，英寸。

频率单位

Hz：hertz，频率单位，1Hz = 1 个周期/秒。
kHz：Kilohertz，频率单位，1kHz = 1000Hz。

时间单位

s：seconds，时间单位，1s = 1000ms。
ms：Milliseconds，时间单位，1ms = 0.001s。

分辨率单位

dpi：dots per inch，每英寸包含的点的数量。
dpcm：dots per centimeter，每厘米包含的点的数量。
dppx：dots per pixel，每像素（px）包含点的数量。

角度单位

deg：Degrees，度，一个圆总共 360 度。
grad：Gradians，梯度，一个圆总共 400 梯度。
rad：Radians，弧度，一个圆总共 2π 弧度。
turn：Turns，圈（转），一个圆总共一圈（转）。

百分比单位

百分比（%），所有接受长度值的属性都可以使用百分比单位，但需要有一个参照值。

文本换行

white-space:nowrap;//不换行
word-wrap:break-word;//长单词换行
word-break:break-all;//单词换行

单行文本显示省略号

CSS

width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行文本显示省略号

CSS

width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;//把块容器中的内容限制为指定的行数。
-webkit-box-orient: vertical;//设定文本的排列方式

transition 和 animation 的区别

transition 是过渡，animation 是动画，transition 只能从一种状态过渡到另一种状态，animation 可以定制复杂动画，可以定义动画的区间等
transition 必须通过一些行为才能触发（js 或伪类），animation 的直接就可以触发

多种方式实现上面 100px 下面自适应的布局

方法 1：Flexbox

css

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  height: 100px;
  background-color: #ccc;
}

.content {
  flex: 1;
}

方法 2：Grid

css

.container {
  display: grid;
  grid-template-rows: 100px auto;
  height: 100vh;
}

.header {
  grid-row: 1;
  background-color: #ccc;
}

.content {
  grid-row: 2;
}

方法 3：绝对定位

css

.container {
  position: relative;
  height: 100vh;
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #ccc;
}

.content {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  bottom: 0;
}

方法 4：浮动

css

.container {
  height: 100vh;
}

.header {
  float: left;
  width: 100%;
  height: 100px;
  background-color: #ccc;
}

.content {
  float: left;
  width: 100%;
  margin-top: 100px;
}

方法 5：定位和百分比高度

css

.container {
  position: relative;
  height: 100vh;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #ccc;
}

.content {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: calc(100vh - 100px);
}

css 实现斑马线的效果

1. 使用 box-shadow 属性

为元素设置多个与背景色一致的阴影，形成斑马线效果。

2. 使用 background 属性的 repeat-linear-gradient

设置一个重复的线性渐变背景，约束渐变的大小，通过 background-repeat 实现纵向平铺。

3. 使用 linear-gradient()

使用线性渐变实现背景图像，并通过 background-size 设置背景图像的范围，约束渐变的大小。

4. 使用 CSS 伪类选择器

通过 nth-child 选择器设置奇数子元素的背景色，实现斑马线效果。

HTML/CSS ​

浏览器的重排、重绘、合成、回流 ​

BFC(Block Formatting Context) ​

设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别 ​

css 中，有哪些方式可以隐藏页面元素？区别? ​

元素水平垂直居中的方法 ​

flex 布局 ​

grid 布局 ​

iframe 的缺点： ​

javascript:void(0) ​

meta viewport 相关 ​

盒模型 ​

渐进增强与优雅降级的区别 ​

HTML5 特性有哪些？ ​

Meta 标签，都有一些什么特性，有什么作用 ？ ​

前端需要注意哪些 SEO ​

什么是渐进式渲染 ？ ​

CSS 单位 ​

文本换行 ​

单行文本显示省略号 ​

多行文本显示省略号 ​

transition 和 animation 的区别 ​

多种方式实现上面 100px 下面自适应的布局 ​

css 实现斑马线的效果 ​