html表格边框大小怎么设置_表格边框宽度怎么设置

前端—HTML&CSS&DOM相关知识 　　HTML部分 　　对 HTML 语义化的理解 　　语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。语义化的优点如下： ● 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于 SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录； ● 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。 　　DOCTYPE(⽂档类型) 的作⽤ 　　DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html 或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对CSS 代码甚⾄JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。浏览器渲染页面的两种模式（可通过 document.compatMode ，比如，语雀官网的文档类型是 CSS1Compat）： ● CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。 ● BackCompat：怪异模式（混杂模式）（Quick mode），浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。 　　script 标签中 defer 和 async 的区别 　　如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。下图可以直观的看出三者之间的区别:

　　defer 和 async 属性都是去异步加载外部的JS 脚本文件，它们都不会阻塞页面的解析，其区别如下： ● 执行顺序：多个带 async 属性的标签，不能保证加载的顺序；多个带defer 属性的标签，按照加载顺序执行； ● 脚本是否并行执行：async 属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer 属性，加载后续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步)，js 脚本需要等到文档所有素解析完成之后才执行，DOMContentLoaded 事件触发执行之前。 　　行内素有哪些？块级素有哪些？空(void)素有那些？ 　　行内素有：a、b、span、img、input、select、strong；块级素有：div、ul、ol、li、dl、dt、dd、h1 ~ h6、p；空素：即没有内容的 HTML 素。空素是在开始标签中关闭的，也就是空素没有闭合标签常见的有：br、hr、img、input、link、meta；鲜见的有：area、base、col、colgroup、command、embed、keygen、param、source、track、wbr； 　　浏览器是如何对 HTML5 的离线储存资源进行管理和加载？ 　　在线的情况下，浏览器发现 html 头部有manifest 属性，它会请求manifest 文件，如果是第一次访问页面，那么浏览器就会根据manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest 文件与旧的manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。离线的情况下，浏览器会直接使用离线存储的资源。 　　Canvas 和 SVG 的区别 　　（1）SVG：SVG 可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言 XML 描述的 2D 图形的语言，SVG 基于XML 就意味着SVGDOM中的每个素都是可用的，可以为某个素附加Javascript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。其特点如下： ● 不依赖分辨率 ● 支持事件处理器 ● 最适合带有大型渲染区域的应用程序（比如谷歌地图） ● 复杂度高会减慢渲染速度（任何过度使用DOM 的应用都不快） ● 不适合游戏应用（2）Canvas：Canvas 是画布，通过 Javascript 来绘制2D 图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。其特点如下： ● 依赖分辨率 ● 不支持事件处理器 ● 弱的文本渲染能力 ● 能够以 .png 或 .jpg 格式保存结果图像 ● 最适合图像密集型的游戏，其中的许多对象会被频繁重绘注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。 　　说一下 HTML5 drag API 　　dragstart：事件主体是被拖放素，在开始拖放被拖放素时触发。darg：事件主体是被拖放素，在正在拖放被拖放素时触发。dragenter：事件主体是目标素，在被拖放素进入某素时触发。dragover：事件主体是目标素，在被拖放在某素内移动时触发。dragleave：事件主体是目标素，在被拖放素移出目标素是触发。drop：事件主体是目标素，在目标素完全接受被拖放素时触发。dragend：事件主体是被拖放素，在整个拖放操作结束时触发。 　　CSS 部分 　　display 的 block、inline 和 inline-block 的区别 　　（1）block：会独占一行，多个素会另起一行，可以设置width、height、margin 和 padding 属性；（2）inline：素不会独占一行，设置width、height 属性无效。但可以设置水平方向的 margin 和 padding 属性，不能设置垂直方向的 padding 和 margin； （3）inline-block：将对象设置为 inline 对象，但对象的内容作为block 对象呈现，之后的内联对象会被排列在同一行内。对于行内素和块级素，其特点如下： 行内素：1）设置宽高无效；2）可以设置水平方向的 margin 和 padding 属性，不能设置垂直方向的padding 和 margin；3）不会自动换行； 块级素：1）可以设置宽高；2）设置 margin 和 padding 都有效；3）可以自动换行；4）多个块状，默认排列从上到下； 　　link 和@import 的区别 　　两者都是外部引用 CSS 的方式，它们的区别如下： ● link 是 XHTML 标签，除了加载 CSS 外，还可以定义RSS 等其他事务；@import 属于 CSS 范畴，只能加载 CSS。 ● link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。 ● link 是 XHTML 标签，无兼容问题；@import 是在CSS2.1 提出的，低版本的浏览器不支持。 ● link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持。 　　CSS3 中有哪些新特性 　　新增各种 CSS 选择器 （: not(.input)：所有class 不是“input”的节点）圆角 （border-radius:8px）多列布局 （multi-column layout） 阴影和反射 （Shadoweflect） 文字特效 （text-shadow） 文字渲染 （Text-decoration） 线性渐变 （gradient） 旋转 （transform） 增加了旋转，缩放，定位，倾斜，动画，多背景 　　对 CSSSprites 的理解 　　CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用 CSS 的 background-image，background-repeat，background-position 属性的组合进行背景定位。优点： ● 利用 CSS Sprites 能很好地减少网页的http 请求，从而大大提高了页面的性能，这是 CSS Sprites 最大的优点； ● CSS Sprites 能减少图片的字节，把 3 张图片合并成1 张图片的字节总是小于这 3 张图片的字节总和。缺点： ● 在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂； ● CSSSprites 在开发的时候相对来说有点麻烦，需要借助photoshop或其他工具来对每个背景单测量其准确的位置。 维护方面：CSS Sprites 在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的 CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。 　　CSS 优化和提高性能的方法有哪些？ 　　加载性能：（1）css 压缩：将写好的 css 进行打包压缩，可以减小文件体积。（2）css 单一样式：当需要下边距和左边距的时候，很多时候会选择 使 用 margin:top 0 bottom 0 ；但margin-bottom:bottom;margin-left:left;执行效率会更高。（3）减少使用@import，建议使用 link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。选择器性能：（1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标素的部分）。CSS 选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子素来确定是否是指定的素等等； （2）如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。 （3）避免使用通配规则，如*{}计算次数惊人，只对需要用到的素进行选择。（4）尽量少的去对标签进行选择，而是用class。（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签素。（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。渲染性能：（1）慎重使用高性能属性：浮动、定位。（2）尽量减少页面重排、重绘。 （3）去除空规则：{}。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少 css 文档体积。（4）属性值为 0 时，不加单位。 （5）属性值为浮动小数 0.，可以省略小数点之前的0。（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。（7）不使用@import 前缀，它会影响 css 的加载速度。（8）选择器优化嵌套，尽量避免层级过深。（9）css 雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。 （10）正确使用 display 的属性，由于 display 的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。（11）不滥用 web 字体。对于中文网站来说WebFonts 可能很陌生，国外却很流行。web fonts 通常体积庞大，而且一些浏览器在下载webfonts 时会阻塞页面渲染损伤性能。可维护性、健壮性：（1）将具有相同属性的样式抽离出来，整合并通过class 在页面中进行使用，提高 css 的可维护性。 （2）样式与内容分离：将 css 代码定义到外部css 中。 　　对 CSS 工程化的理解 　　CSS 工程化是为了解决以下问题：1. 宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计？2. 编码优化：怎样写出更好的 CSS？ 3. 构建：如何处理我的 CSS，才能让它的打包结果最优？4. 可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？以下三个方向都是时下比较流行的、普适性非常好的CSS 工程化实践： ● 预处理器：Less、 Sass 等； ● Webpack loader 等 。 基于这三个方向，可以衍生出一些具有典型意义的子问题：（1）预处理器：为什么要用预处理器？它的出现是为了解决什么问题？预处理器，其实就是 CSS 世界的“轮子”。预处理器支持我们写一种类似 CSS、但实际并不是 CSS 的语言，然后把它编译成CSS代码：

　　前端工程中对 CSS 提出了以下的诉求：1. 宏观设计上：我们希望能优化 CSS 文件的目录结构，对现有的CSS文件实现复用；2. 编码优化上：我们希望能写出结构清晰、简明易懂的CSS，需要它具有一目了然的嵌套层级关系，而不是无差别的一铺到底写法；我们希望它具有变量特征、计算能力、循环能力等等更强的可编程性，这样我们可以少写一些无用的代码；3. 可维护性上：更强的可编程性意味着更优质的代码结构，实现复用意味着更简单的目录结构和更强的拓展能力，这两点如果能做到，自然会带来更强的可维护性。这三点是传统 CSS 所做不到的，也正是预处理器所解决掉的问题。预处理器普遍会具备这样的特性： ● 嵌套代码的能力，通过嵌套来反映不同css 属性之间的层级关系； ● 支持定义 css 变量； ● 提供计算函数； ● 允许对代码片段进行 extend 和 mixin； ● 支持循环语句的使用； ● 支持将 CSS 文件模块化，实现复用。（2）PostCss：PostCss 是如何工作的？我们在什么场景下会使用PostCss？PostCss 仍然是一个对 CSS 进行解析和处理的工具，它会对CSS做这样的事情：

　　它和预处理器的不同就在于，预处理器处理的是类CSS，而PostCss处理的就是 CSS 本身。Babel 可以将高版本的JS 代码转换为低版本的 JS 代码。PostCss 做的是类似的事情：它可以编译尚未被浏览器广泛支持的先进的 CSS 语法，还可以自动为一些需要额外兼容的语法增加前缀。更强的是，由于 PostCss 有着强大的插件机制，支持各种各样的扩展，极大地强化了 CSS 的能力。PostCss 在业务中的使用场景非常多：提高 CSS 代码的可读性：PostCss 其实可以做类似预处理器能做的工作； 当 我 们 的 CSS 代 码 需 要 适 配 低 版本浏览器时，PostCss的Autoprefixer 插件可以帮助我们自动增加浏览器前缀；允许我们编写面向未来的 CSS；PostCss 能够帮助我们编译CSSnext 代码；（3）Webpack 能处理 CSS 吗？如何实现？Webpack 能处理 CSS 吗： Webpack 在裸奔的状态下，是不能处理CSS 的，Webpack 本身是一个面向 JavaScript 且只能处理 JavaScript 代码的模块化打包工具； Webpack 在 loader 的辅助下，是可以处理CSS 的。如何用 Webpack 实现对 CSS 的处理：Webpack 中操作 CSS 需要使用的两个关键的loader：css-loader和 style-loader。css-loader：导入 CSS 模块，对 CSS 代码进行编译处理；style-loader：创建 style 标签，把 CSS 内容写入标签。注意：在实际使用中，css-loader 的执行顺序一定要安排在style-loader的前面。因为只有完成了编译过程，才可以对css 代码进行插入；若提前插入了未编译的代码，那么 webpack 是无法理解这坨东西的，它会无情报错。 　　常见的 CSS 布局单位 　　常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。（1）像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素： ● CSS 像素：为 web 开发者提供，在 CSS 中使用的一个抽象单位； ● 物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。（2）百分比（%）当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子素的百分比相对于直接父素。（3）em 和 rem 相对于 px 更具灵活性，它们都是相对长度单位，它们之间的区别：em 相对于父素，rem 相对于根素。 ● em： 文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认 16px)。(相对父素的字体大小倍数)。 ● rem： rem 是 CSS3 新增的一个相对单位，相对于根素（html素）的 font-size 的倍数。作用：利用 rem 可以实现简单的响应式布局，可以利用 html 素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让素也随之变化。（4）vw/vh 是与视图窗口有关的单位，vw 表示相对于视图窗口的宽度，vh 表示相对于视图窗口高度，除了 vw 和vh 外，还有vmin 和vmax两个相关的单位。 ● vw：相对于视窗的宽度，视窗宽度是 100vw； ● vh：相对于视窗的高度，视窗高度是 100vh； ● vmin：vw 和 vh 中的较小值； ● vmax：vw 和 vh 中的较大值； ● vw/vh：和百分比很类似，两者的区别； ● 百分比（%）：大部分相对于祖先素，也有相对于自身的情况比如（border-radius、translate 等) ● vw/vm：相对于视窗的尺寸； 　　如何理解浮动？和绝对定位的区别是什么？ 　　浮动（Float）：浮动是一种素定位的技术，通过设置素的float属性为left或right，使其脱离正常的文档流，向左或向右浮动。浮动素会尽可能地靠近容器的左侧或右侧，并允许其他素在其周围进行布局。浮动素的特点包括：（1）浮动素在文档流中脱离，导致其他素环绕其周围。（2）浮动素的宽度默认由其内容决定，可以使用width属性进行控制。（3）浮动素的高度由内容和内边距决定，不会自动撑开父容器。定位(position)：定位是一种素布局的技术，通过设置素的position属性，可以将素相对于其正常位置进行定位。常用的定位属性包括relative、absolute和fixed。定位素的特点包括：（1）相对定位(relative)：素相对于其原始位置进行定位，偏移量由top、right、bottom和left属性控制。（2）绝对定位(absolute)：素相对于最近的具有定位(非static)的祖先素进行定位，或者相对于整个视口进行定位，偏移量由top、right、bottom和left属性控制。（3）固定定位(fixed)：素相对于视口进行定位，始终保持在同一位置，偏移量由top、right、bottom和left属性控制。区别比较： ● 浮动主要用于实现页面的自适应布局、多列布局和图像环绕文字等效果，而定位用于实现素的精确定位和重叠效果。● 浮动素脱离文档流后，周围的素会自动环绕其周围;而定位素仍然占据原来的位置，不会影响其他素的布局。● 浮动素默认宽度由内容决定，高度由内容和内边距决定;而定位素的尺寸可以使用width和height属性进行显式设置。● 定位属性可以通过偏移量来精确地控制素的位置，包括相对定位、绝对定位和固定定位;而浮动素的相对位置只能通过左侧或右侧浮动来控制。● 定位素的父级容器需要具有特定的定位属性(非static)，以便对定位素进行定位;而浮动素的父级容器不需要特定的属性。总结：综上所述，浮动和定位是两种不同的布局技术，各自具有不同的应用场景和特点。根据具体的需求和布局要求，可以选择合适的技术来实现所需的布局效果。 　　水平垂直居中的实现 　　利用绝对定位，先将素的左上角通过 top:50%和left:50%定位到页面的中心，然后再通过 translate 来调整素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。 　　利用绝对定位，设置四个方向的值都为 0，并将margin 设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况： 　　利用绝对定位，先将素的左上角通过 top:50%和left:50%定位到页面的中心，然后再通过 margin 负值来调整素的中心点到页面的中心。该方法适用于盒子宽高已知的情况 　　使 用 flex 布 局 ， 通 过 align-items: center 和 justify-content: center 设置容器的垂直和水平方向上为居中对齐，然后它的子素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多： 　　对 BFC 的理解，如何创建 BFC 　　先来看两个相关的概念： Box: Box 是 CSS 布局的对象和基本单位，⼀个⻚⾯是由很多个Box组成的，这个 Box 就是我们所说的盒模型。Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦素将如何定位，以及和其他素的关系和相互作⽤。块格式化上下文（Block Formatting Context，BFC）是Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动素与其他素的交互限定区域。 　　通俗来讲：BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个素符合触发 BFC 的条件，则BFC 中的素布局不受外部影响。创建 BFC 的条件： ● 根素：body； ● 素设置浮动：float 除 none 以外的值； ● 素设置绝对定位：position (absolute、fixed)； ● display 值为：inline-block、table-cell、table-caption、flex等； ● overflow 值为：hidden、auto、scroll；BFC 的特点： ● 垂直方向上，自上而下排列，和文档流的排列方式一致。 ● 在 BFC 中上下相邻的两个容器的 margin 会重叠 ● 计算 BFC 的高度时，需要计算浮动素的高度 ● BFC 区域不会与浮动的容器发生重叠 ● BFC 是独立的容器，容器内部素不会影响外部素 ● 每个素的左 margin 值和容器的左 border 相接触BFC 的作用： ● 解决 margin 的重叠问题：由于 BFC 是一个独立的区域，内部的素和外部的素互不影响，将两个素变为两个BFC，就解决了margin重叠的问题。 ● 解决高度塌陷的问题：在对子素设置浮动后，父素会发生高度塌陷，也就是父素的高度变为 0。解决这个问题，只需要把父素变成一个 BFC。常用的办法是给父素设置overflow:hidden。 ● 创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。 　　左侧设置 float:left，右侧设置 overflow: hidden。这样右边就触发了 BFC，BFC 的区域不会与浮动素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。 　　什么是层叠上下⽂？ 　　英文称作”stacking context”，HTML页面的三维空间排布的一个构想。在这个三位空间里，x轴水平指向右，y轴水平指向下，z轴垂直屏幕指向外，在z轴上越往外靠的素离用户越近。简而言之：层叠上下文就是对这些 HTML 素的一个三维构想。

　　产生层叠上下文的条件：某些素的渲染顺序是由其 z-index 的值影响的。这是因为这些素具有能够使他们形成一个层叠上下文的特殊属性。文档中的层叠上下文由满足以下任意一个条件的素形成：（1）HTML中的根素<html></html>本身j就具有层叠上下文，称为“根层叠上下文”。（2）普通素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。（3）css3属性：flex、transform、opacity、filter、will-change、-webkit-overflow-scrolling 　　层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。每个层叠上下文都完全独立于它的兄弟素：当处理层叠时只考虑子素。每个层叠上下文都是自包含的：当一个素的内容发生层叠后，该素将被作为整体在父级层叠上下文中按顺序进行层叠。 　　层叠等级在同一个层叠上下文中，它描述定义的是该层叠上下文中的层叠上下文素在上的上下顺序。在其他普通素中，它描述定义的是这些普通素在上的上下顺序。普通素的层叠等级优先由其所在的层叠上下文决定。层叠等级的比较只有在当前层叠上下文素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。通过设置z-index可以对层叠等级进行设置。而z-index只对Position属性且属性值不为static的素有效果。 　　层叠顺序

　　总结：1.当素发生层叠时，首先判断这两个素是否处于同一层叠上下文，如果是则判断层叠等级，谁的层叠等级大，谁就在上面。2.如果不是处于同一层叠上下文，再比较他们的所在的层叠上下文的层叠等级。谁所处的层叠上下文的层叠等级高，谁就再上面。3.如果两个素层叠等级相同，层叠顺序相同时，在DOM结构中后面的素显示在上面。 　　素的层叠顺序 　　层叠顺序，英文称作 stacking order，表示素发生层叠时有着特定的垂直显示顺序。下面是盒模型的层叠规则：

　　对于上图，由上到下分别是：（1）背景和边框：建立当前层叠上下文素的背景和边框。（2）负的 z-index：当前层叠上下文中，z-index 属性值为负的素。（3）块级盒：文档流内非行内级非定位后代素。（4）浮动盒：非定位浮动素。 （5）行内盒：文档流内行内级非定位后代素。（6）z-index: 0：层叠级数为 0 的定位素。（7）正 z-index：z-index 属性值为正的定位素。注意：当定位素 z-index:auto，生成盒在当前层叠上下文中的层级为 0，不会建立新的层叠上下文，除非是根素。 　　如何解决 1px 问题？ 　　1px 问题指的是：在一些 Retina 屏幕 的机型上，移动端页面的1px会变得很粗，呈现出不止 1px 的效果。原因很简单——CSS 中的1px并不能和移动设备上的 1px 划等号。它们之间的比例关系有一个专门的属性来描述： 　　打开 Chrome 浏览器，启动移动端调试模式，在控制台去输出这个devicePixelRatio 的值。这里选中 iPhone6/7/8 这系列的机型，输出的结果就是 2；这就意味着设置的 1px CSS 像素，在这个设备上实际会用2 个物理像素单来进行渲染，所以实际看到的一定会比1px 粗一些。 　　思路： 　　（一）直接写 0.5px 如果之前 1px 的样式这样写： 　　可以先在 JS 中拿到 window.devicePixelRatio 的值，然后把这个值通过 JSX 或者模板语法给到 CSS 的data 里，达到这样的效果（这里用 JSX 语法做示范）： 　　然后就可以在 CSS 中用属性选择器来命中devicePixelRatio为某一值的情况，比如说这里尝试命中 devicePixelRatio 为2 的情况： 　　直接把 1px 改成 1/devicePixelRatio 后的值，这是目前为止最简单的一种方法。这种方法的缺陷在于兼容性不行，IOS 系统需要8及以上的版本，安卓系统则直接不兼容。 　　（二）：伪素先放大后缩小 这个方法的可行性会更高，兼容性也更好。唯一的缺点是代码会变多。思路是先放大、后缩小：在目标素的后面追加一个::after伪素，让这个素布局为 absolute 之后、整个伸展开铺在目标素上，然后把它的宽和高都设置为目标素的两倍，border 值设为1px。接着借助 CSS 动画特效中的放缩能力，把整个伪素缩小为原来的50%。此时，伪素的宽高刚好可以和原有的目标素对齐，而border也缩小为了 1px 的二分之一，间接地实现了0.5px 的效果。 　　解决 1px 问题有以下几种方法： 　　（1）伪素+transform（常用）：构建1个伪素,border为1px, 再以transform缩放到50%。对于一些比较老的项目，伪类+transform是比较完美的方法。其原理是把原先素的border去掉，然后利用:before或者:after重做border，并将transform的scale缩小一半，原先的素相对定位，新做的border绝对定位。优点：可以满足所有场景，且修改灵活。缺点：对于已使用伪类的素（例如clearfix）要多层嵌套。 　　最好在使用前也判断一下，结合代码，判断是否屏： 　　（2）viewport + rem 实现（常用）：同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。这种兼容方案相对比较完美，适合新的项目，老的项目修改成本过大。优点： ● 所有场景都能满足； ● 一套代码，可以兼容基本所有布局缺点： ● 老项目修改代价过大，只适用于新项目在 devicePixelRatio = 2 时，输出viewport： 　　在 devicePixelRatio = 3 时，输出viewport： 　　（3）使用border-image实现：准备一张符合你要求的 border-image：把 border 设置在边框的底部，所以使用的图片是2px高，上部的1px颜色为透明，下部的1px使用视觉规定的 border 的颜色。优点： ● 可以设置单条、多条表框。缺点： ● 更换颜色和样式麻烦，需要更改图片； ● 某些设备上会模糊。 　　（4）使用background-image实现： 　　与 background-image 方案类似，只是将图片替换为css3渐变。设置1px的渐变背景，50%有颜色，50%透明。 样式设置：优点： ● 可以实现单条、多条边框； ● 边框的颜色随意设置缺点： ● 代码量多 ● 没法实现圆角 ● 多背景图片有兼容性问题 　　（6）使用box-shadow模拟边框： 　　利用css对阴影处理的方式实现0.5px的效果 样式设置：优点： ● 代码少，兼容性好。缺点： ● 边框有阴影，颜色变浅。 　　DOM 　　什么是 DOM 和 BOM？ 　　DOM 指的是文档对象模型，它指的是把文档当做一个对象，这个对象主要定义了处理网页内容的方法和接口。BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的法和接口。BOM 的核心是window，而 window 对象具有双重角色，它既是通过js 访问浏览器窗口的一个接口，又是一个 Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者方法存在。window 对象含有 location 对象、navigator 对象、screen对象等子对象，并且 DOM 的最根本的对象document 对象也是BOM的 window 对象的子对象。 　　移动端 300ms 延迟是指什么？ 如何解决移动端300ms延迟？ 　　移动端浏览器在派发事件的时候，通常会出现300ms左右的延迟。 　　如何解决：（一）禁止缩放（在meta标签中设置） Chorm和Firfox支持，Safari比较麻烦他还有双击缩放还有双击滚动操作。页面不可缩放，这样双击缩放功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的延迟。缺点：必须完全禁用缩放来达到目的，但是通常情况下，我们还是希望能通过双指来进行缩放的。 　　（二）更改默认的视口宽度（在meta标签中设置） Chorm和Firfox支持，Safari比较麻烦他还有双击缩放还有双击滚动操作。如果能识别出一个网站是响应式的网站，那么移动端浏览器就可以自动禁止双击缩放行为并去掉300ms的延迟。设置meta标签，那么浏览器就可以认为网站已经对移动端做过适配优化，就无需双击操作。优点：没有完全禁用缩放，而是禁用浏览器默认的双击缩放行为，但用户仍然可以通过双指缩放操作来缩放页面。缺点：需要浏览器的支持 　　（三）css touch-action： IE支持，指定相应的素上能够触发的用户代理（浏览器）的默认行为。将该属性值设置为touch-action：none，那么表示在该素上操作不会触发用户代理的任何默认行为。就无需进行300ms的延迟判断了。缺点：新属性，可能存在浏览器兼容问题（四）tap事件：zepto的tap事件, 利用touchstart和touchend来模拟click事件。缺点：穿透（五）FastClick 专门为解决移动端浏览器300ms延迟问题发开的一个轻量级的库。原理：在检测到 touchend 事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉缺点：脚本相对较大使用方法： 　　调用require(‘fastclick’)会返回FastClick.attach函数。使用needsclick过滤特定的素如果页面上有一些特定的素不需要使用fastclick来立刻触发事件，可以在素的class上添加needsclick: 　　穿透问题？穿透的解决办法 　　穿透：设置B盒子在A盒子的上方,给B盒子绑定touchstart事件,给A盒子设置click事件.B盒子触发touchstart事件(使B盒子,overflow:hidden),同时也会触发A盒子的click事件.这个就是穿透.(主要是click事件不是立马 执行，而是有300ms的延迟)。代码如下（示例）： 　　解决办法：（一）阻止默认事件：触摸结束时touchend 事件触发时，preventDefault()。看上去好像没有什么问题，但是，很遗憾的是不是所有的浏览器都支持。 　　（二）让消失素的底部素 在 300ms 左右暂时失去click监听功能 　　（三）让要消失的素延迟 300ms 左右消失