共计 21705 个字符，预计需要花费 55 分钟才能阅读完成。
1. 设施像素、css 像素、设施独立像素、dpr、ppi 之间的区别？
设施像素指的是物理像素，个别手机的分辨率指的就是设施像素，一个设施的设施像素是不可变的。css 像素和设施独立像素是等价的，不论在何种分辨率的设施上，css 像素的大小应该是统一的，css 像素是一个绝对单位，它是相
对于设施像素的，一个 css 像素的大小取决于页面缩放水平和 dpr 的大小。dpr 指的是设施像素和设施独立像素的比值，个别的 pc 屏幕，dpr=1。在 iphone4 时，苹果推出了 retina 屏幕，它的 dpr
为 2。屏幕的缩放会扭转 dpr 的值。ppi 指的是每英寸的物理像素的密度，ppi 越大，屏幕的分辨率越大。详细资料能够参考：《什么是物理像素、虚构像素、逻辑像素、设施像素，什么又是 PPI,DPI,DPR 和 DIP》《前端工程师须要明确的「像素」》《CSS 像素、物理像素、逻辑像素、设施像素比、PPI、Viewport》《前端开发中像素的概念》
2、layout viewport、visual viewport 和 ideal viewport 的区别？
相干知识点：
如果把挪动设施上浏览器的可视区域设为 viewport 的话，某些网站就会因为 viewport 太窄而显示错乱，所以这些浏览器就决定
默认状况下把 viewport 设为一个较宽的值，比方 980px，这样的话即便是那些为桌面设计的网站也能在挪动浏览器上失常显示了。ppk 把这个浏览器默认的 viewport 叫做 layout viewport。layout viewport 的宽度是大于浏览器可视区域的宽度的，所以咱们还须要一个 viewport 来代表浏览器可视区域的大小，ppk 把
这个 viewport 叫做 visual viewport。ideal viewport 是最适宜挪动设施的 viewport，ideal viewport 的宽度等于挪动设施的屏幕宽度，只有在 css 中把某一元
素的宽度设为 ideal viewport 的宽度（单位用 px），那么这个元素的宽度就是设施屏幕的宽度了，也就是宽度为 100% 的成果。i
deal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对 ideal viewport 而设计的网站，不须要用户手动缩放，也
不须要呈现横向滚动条，都能够完满的出现给用户。答复：
挪动端一共须要了解三个 viewport 的概念的了解。第一个视口是布局视口，在挪动端显示网页时，因为挪动端的屏幕尺寸比拟小，如果网页应用挪动端的屏幕尺寸进行布局的话，那么整
个页面的布局都会显示错乱。所以挪动端浏览器提供了一个 layout viewport 布局视口的概念，应用这个视口来对页面进行布局展
示，个别 layout viewport 的大小为 980px，因而页面布局不会有太大的变动，咱们能够通过拖动和缩放来查看到这个页面。第二个视口指的是视觉视口，visual viewport 指的是挪动设施上咱们可见的区域的视口大小，个别为屏幕的分辨率的大小。visu
al viewport 和 layout viewport 的关系，就像是咱们通过窗户看里面的风光，视觉视口就是窗户，而里面的风光就是布局视口
中的网页内容。第三个视口是现实视口，因为 layout viewport 个别比 visual viewport 要大，所以想要看到整个页面必须通过拖动和缩放才
能实现。所以又提出了 ideal viewport 的概念，ideal viewport 下用户不必缩放和滚动条就可能查看到整个页面，并且页面在
不同分辨率下显示的内容大小雷同。ideal viewport 其实就是通过批改 layout viewport 的大小，让它等于设施的宽度，这个
宽度能够了解为是设施独立像素，因而依据 ideal viewport 设计的页面，在不同分辨率的屏幕下，显示应该雷同。详细资料能够参考：《挪动前端开发之 viewport 的深刻了解》《说说挪动前端中 viewport（视口）》《挪动端适配常识你到底知多少》
3、position:fixed; 在 android 下有效怎么解决？
因为挪动端浏览器默认的 viewport 叫做 layout viewport。在挪动端显示时，因为 layout viewport 的宽度大于挪动端屏幕
的宽度，所以页面会呈现滚动条左右挪动，fixed 的元素是绝对 layout viewport 来固定地位的，而不是挪动端屏幕来固定地位的，所以会呈现感觉 fixed 有效的状况。如果想实现 fixed 绝对于屏幕的固定成果，咱们须要扭转的是 viewport 的大小为 ideal viewport，能够如下设置：<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sca
le=1.0,user-scalable=no"/>4、如果须要手动写动画，你认为最小工夫距离是多久，为什么？（阿里）
少数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以实践上最小距离为 1 /60*1000ms=16.7ms5、如何让去除 inline-block 元素间间距？
移除空格、应用 margin 负值、应用 font-size:0、letter-spacing、word-spacing详细资料能够参考：《去除 inline-block 元素间间距的 N 种办法》
6、overflow:scroll 时不能平滑滚动的问题怎么解决？
以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling:touch; 是因为这行代码启用了硬件加速个性，所以滑动很流
畅。详细资料能够参考：《解决页面应用 overflow:scroll 在 iOS 上滑动卡顿的问题》
7、有一个高度自适应的 div，外面有两个 div，一个高度 100px，心愿另一个填满剩下的高度。
（1）外层 div 应用 position：relative；高度要求自适应的 div 应用 position:absolute;top:100px;bottom:0;
left:0;right:0;（2）应用 flex 布局，设置主轴为竖轴，第二个 div 的 flex-grow 为 1。详细资料能够参考：《有一个高度自适应的 div，外面有两个 div，一个高度 100px，心愿另一个填满剩下的高度 (三种计划)》
8、png、jpg、gif 这些图片格式解释一下，别离什么时候用。有没有理解过 webp？
相干知识点：
（1）BMP，是无损的、既反对索引色也反对间接色的、点阵图。这种图片格式简直没有对数据进行压缩，所以 BMP 格局的图片通常
具备较大的文件大小。（2）GIF 是无损的、采纳索引色的、点阵图。采纳 LZW 压缩算法进行编码。文件小，是 GIF 格局的长处，同时，GIF 格局还具
有反对动画以及通明的长处。但，GIF 格局仅反对 8bit 的索引色，所以 GIF 格局实用于对色调要求不高同时须要文件体积
较小的场景。（3）JPEG 是有损的、采纳间接色的、点阵图。JPEG 的图片的长处，是采纳了间接色，得益于更丰盛的色调，JPEG 非常适合用来
存储照片，与 GIF 相比，JPEG 不适宜用来存储企业 Logo、线框类的图。因为有损压缩会导致图片含糊，而间接色的选用，又会导致图片文件较 GIF 更大。（4）PNG- 8 是无损的、应用索引色的、点阵图。PNG 是一种比拟新的图片格式，PNG- 8 是十分好的 GIF 格局替代者，在可能的
状况下，应该尽可能的应用 PNG- 8 而不是 GIF，因为在雷同的图片成果下，PNG- 8 具备更小的文件体积。除此之外，PNG-8
还反对透明度的调节，而 GIF 并不反对。当初，除非须要动画的反对，否则咱们没有理由应用 GIF 而不是 PNG-8。（5）PNG-24 是无损的、应用间接色的、点阵图。PNG-24 的长处在于，它压缩了图片的数据，使得同样成果的图片，PNG-24 格
式的文件大小要比 BMP 小得多。当然，PNG24 的图片还是要比 JPEG、GIF、PNG- 8 大得多。（6）SVG 是无损的、矢量图。SVG 是矢量图。这意味着 SVG 图片由直线和曲线以及绘制它们的办法组成。当你放大一个 SVG 图
片的时候，你看到的还是线和曲线，而不会呈现像素点。这意味着 SVG 图片在放大时，不会失真，所以它非常适合用来绘制企
业 Logo、Icon 等。（7）WebP 是谷歌开发的一种新图片格式，WebP 是同时反对有损和无损压缩的、应用间接色的、点阵图。从名字就可以看进去它是
为 Web 而生的，什么叫为 Web 而生呢？就是说雷同品质的图片，WebP 具备更小的文件体积。当初网站上充斥了大量的图片，如果可能升高每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而升高拜访提早，晋升拜访体验。•在无损压缩的状况下，雷同品质的 WebP 图片，文件大小要比 PNG 小 26%；•在有损压缩的状况下，具备雷同图片精度的 WebP 图片，文件大小要比 JPEG 小 25%~34%；•WebP 图片格式反对图片透明度，一个无损压缩的 WebP 图片，如果要反对透明度只须要 22% 的分外文件大小。然而目前只有 Chrome 浏览器和 Opera 浏览器反对 WebP 格局，兼容性不太好。答复：
我理解到的一共有七种常见的图片的格局。（1）第一种是 BMP 格局，它是无损压缩的，反对索引色和间接色的点阵图。因为它基本上没有进行压缩，因而它的文件体积个别比
较大。（2）第二种是 GIF 格局，它是无损压缩的应用索引色的点阵图。因为应用了 LZW 压缩办法，因而文件的体积很小。并且 GIF 还
反对动画和透明度。但因为它应用的是索引色，所以它实用于一些对色彩要求不高且须要文件体积小的场景。（3）第三种是 JPEG 格局，它是有损压缩的应用间接色的点阵图。因为应用了间接色，色调较为丰盛，个别实用于来存储照片。但
因为应用的是间接色，可能文件的体积绝对于 GIF 格局来说更大。（4）第四种是 PNG- 8 格局，它是无损压缩的应用索引色的点阵图。它是 GIF 的一种很好的代替格局，它也反对透明度的调整，并
且文件的体积绝对于 GIF 格局更小。一般来说如果不是须要动画的状况，咱们都能够应用 PNG- 8 格局代替 GIF 格局。（5）第五种是 PNG-24 格局，它是无损压缩的应用间接色的点阵图。PNG-24 的长处是它应用了压缩算法，所以它的体积比 BMP
格局的文件要小得多，然而绝对于其余的几种格局，还是要大一些。（6）第六种格局是 svg 格局，它是矢量图，它记录的图片的绘制形式，因而对矢量图进行放大和放大不会产生锯齿和失真。它个别
适宜于用来制作一些网站 logo 或者图标之类的图片。（7）第七种格局是 webp 格局，它是反对有损和无损两种压缩形式的应用间接色的点阵图。应用 webp 格局的最大的长处是，在相
同品质的文件下，它领有更小的文件体积。因而它非常适合于网络图片的传输，因为图片体积的缩小，意味着申请工夫的减小，这样会进步用户的体验。这是谷歌开发的一种新的图片格式，目前在兼容性上还不是太好。详细资料能够参考：《图片格式那么多，哪种更适宜你？》
9、浏览器如何判断是否反对 webp 格局图片
（1）宽高判断法。通过创立 image 对象，将其 src 属性设置为 webp 格局的图片，而后在 onload 事件中获取图片的宽高，如
果可能获取，则阐明浏览器反对 webp 格局图片。如果不能获取或者触发了 onerror 函数，那么就阐明浏览器不反对 webp 格
式的图片。（2）canvas 判断办法。咱们能够动静的创立一个 canvas 对象，通过 canvas 的 toDataURL 将设置为 webp 格局，而后判断
返回值中是否含有 image/webp 字段，如果蕴含则阐明反对 WebP，反之则不反对。详细资料能够参考：《判断浏览器是否反对 WebP 图片》《toDataURL()》
10、什么是 Cookie 隔离？（或者说：申请资源的时候不要让它带 cookie 怎么做）
网站向服务器申请的时候，会主动带上 cookie 这样减少表头信息量，使申请变慢。如果动态文件都放在主域名下，那动态文件申请的时候都带有的 cookie 的数据提交给 server 的，十分节约流量，所以不如隔离开，动态资源放 CDN。因为 cookie 有域的限度，因而不能跨域提交申请，故应用非次要域名的时候，申请头中就不会带有 cookie 数据，这样能够升高请
求头的大小，升高申请工夫，从而达到升高整体申请延时的目标。同时这种形式不会将 cookie 传入 WebServer，也缩小了 WebServer 对 cookie 的解决剖析环节，进步了 webserver 的
http 申请的解析速度。详细资料能够参考：《CDN 是什么？应用 CDN 有什么劣势？》
11、style 标签写在 body 后与 body 前有什么区别？
页面加载自上而下当然是先加载款式。写在 body 标签后因为浏览器以逐行形式对 HTML 文档进行解析，当解析到写在尾部的款式
表（外联或写在 style 标签）会导致浏览器进行之前的渲染，期待加载且解析样式表实现之后从新渲染，在 windows 的 IE 下可
能会呈现 FOUC 景象（即款式生效导致的页面闪动问题）12、什么是 CSS 预处理器 / 后处理器？
CSS 预处理器定义了一种新的语言，其根本思维是，用一种专门的编程语言，为 CSS 减少了一些编程的个性，将 CSS 作为指标生成
文件，而后开发者就只有应用这种语言进行编码工作。艰深的说，CSS 预处理器用一种专门的编程语言，进行 Web 页面款式设计，然
后再编译成失常的 CSS 文件。预处理器例如：LESS、Sass、Stylus，用来预编译 Sass 或 less csssprite，加强了 css 代码的复用性，还有层级、mixin、变量、循环、函数等，具备很不便的 UI 组件模块化开发能力，极大的进步工作效率。CSS 后处理器是对 CSS 进行解决，并最终生成 CSS 的预处理器，它属于狭义上的 CSS 预处理器。咱们很久以前就在用 CSS 后
处理器了，最典型的例子是 CSS 压缩工具（如 clean-css），只不过以前没独自拿出来说过。还有最近比拟火的 Autoprefixer，以 CanIUse 上的浏览器反对数据为根底，主动解决兼容性问题。后处理器例如：PostCSS，通常被视为在实现的样式表中依据 CSS 标准解决 CSS，让其更无效；目前最常做的是给 CSS 属性增加浏
览器公有前缀，实现跨浏览器兼容性的问题。详细资料能够参考：《CSS 预处理器和后处理器》
13、论述一下 CSSSprites
将一个页面波及到的所有图片都蕴含到一张大图中去，而后利用 CSS 的 background-image，background-repeat，background
-position 的组合进行背景定位。利用 CSSSprites 能很好地缩小网页的 http 申请，从而很好的进步页面的性能；CSSSprites
能缩小图片的字节。长处：缩小 HTTP 申请数，极大地提高页面加载速度
减少图片信息反复度，进步压缩比，缩小图片大小
更换格调不便，只需在一张或几张图片上批改色彩或款式即可实现
毛病：图片合并麻烦
保护麻烦，批改一个图片可能须要从新布局整个图片，款式 14、应用 rem 布局的优缺点？
长处：在屏幕分辨率千差万别的时代，只有将 rem 与屏幕分辨率关联起来就能够实现页面的整体缩放，使得在设施上的展示都对立起来了。而且当初浏览器根本都曾经反对 rem 了，兼容性也十分的好。毛病：（1）在奇葩的 dpr 设施上体现成果不太好，比方一些华为的高端机型用 rem 布局会呈现错乱。（2）应用 iframe 援用也会呈现问题。（3）rem 在多屏幕尺寸适配上与以后两大平台的设计哲学不统一。即大屏的呈现到底是为了看得又大又分明，还是为了看的更多的问
题。详细资料能够参考：《css3 的字体大小单位 rem 到底好在哪？》《VW: 是时候放弃 REM 布局了》《为什么设计稿是 750px》《应用 Flexible 实现手淘 H5 页面的终端适配》
15、transition 和 animation 的区别
transition 关注的是 CSS property 的变动，property 值和工夫的关系是一个三次贝塞尔曲线。animation 作用于元素自身而不是款式属性，能够应用关键帧的概念，应该说能够实现更自在的动画成果。详细资料能够参考：《CSSanimation 与 CSStransition 有何区别？》《CSS3Transition 和 Animation 区别及比拟》《CSS 动画简介》《CSS 动画：animation、transition、transform、translate》
16、什么是首选最小宽度？
“首选最小宽度”，指的是元素最适宜的最小宽度。东亚文字（如中文）最小宽度为每个汉字的宽度。东方文字最小宽度由特定的间断的英文字符单元决定。并不是所有的英文字符都会组成间断单元，个别会终止于空格（一般空格）、短
横线、问号以及其余非英文字符等。如果想让英文字符和中文一样，每一个字符都用最小宽度单元，能够试试应用 CSS 中的 word-break:break-all。17、为什么 height:100% 会有效？
对于一般文档流中的元素，百分比高度值要想起作用，其父级必须有一个能够失效的高度值。起因是如果蕴含块的高度没有显式指定（即高度由内容决定），并且该元素不是相对定位，则计算值为 auto，因为解释成了 auto，所以无奈参加计算。应用相对定位的元素会有计算值，即便先人元素的 height 计算为 auto 也是如此。18、min-width/max-width 和 min-height/max-height 属性间的笼罩规定？
（1）max-width 会笼罩 width，即便 width 是行类款式或者设置了!important。（2）min-width 会笼罩 max-width，此规定产生在 min-width 和 max-width 抵触的时候。19、内联盒模型基本概念
（1）内容区域（content area）。内容区域指一种围绕文字看不见的盒子，其大小仅受字符自身个性管制，实质上是一个字符盒子（character box）；然而有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因而，对于这些
元素，内容区域能够看成元素本身。（2）内联盒子（inline box）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”理论指的就是元素的“外在盒
子”，用来决定元素是内联还是块级。该盒子又能够细分为“内联盒子”和“匿名内联盒子”两类。（3）行框盒子（line box），每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。（4）蕴含块（containing box），由一行一行的“行框盒子”组成。20、什么是幽灵空白节点？
“幽灵空白节点”是内联盒模型中十分重要的一个概念，具体指的是：在 HTML5 文档申明中，内联元素的所有解析和渲染体现就如同
每个行框盒子的后面有一个“空白节点”一样。这个“空白节点”永远通明，不占据任何宽度，看不见也无奈通过脚本获取，就如同幽灵
一样，但又确确实实地存在，体现如同文本节点一样，因而，我称之为“幽灵空白节点”。21、什么是替换元素？
通过批改某个属性值出现的内容就能够被替换的元素就称为“替换元素”。因而，<img>、<object>、<video>、<iframe> 或者表
单元素 <textarea> 和 <input> 和 <select> 都是典型的替换元素。替换元素除了内容可替换这一个性以外，还有以下一些个性。（1）内容的外观不受页面上的 CSS 的影响。用业余的话讲就是在款式体现在 CSS 作用域之外。如何更改替换元素自身的外观须要
相似 appearance 属性，或者浏览器本身裸露的一些款式接口，（2）有本人的尺寸。在 Web 中，很多替换元素在没有明确尺寸设定的状况下，其默认的尺寸（不包含边框）是 300 像素×150 像
素，如 <video>、<iframe> 或者 <canvas> 等，也有少部分替换元素为 0 像素，如 <img> 图片，而表单元素的替换元素
的尺寸则和浏览器无关，没有显著的法则。（3）在很多 CSS 属性上有本人的一套体现规定。比拟具备代表性的就是 vertical-align 属性，对于替换元素和非替换元素，ve
rtical-align 属性值的解释是不一样的。比方说 vertical-align 的默认值的 baseline，很简略的属性值，基线之意，被定义为字符 x 的下边缘，而替换元素的基线却被硬生生定义成了元素的下边缘。（4）所有的替换元素都是内联程度元素，也就是替换元素和替换元素、替换元素和文字都是能够在一行显示的。然而，替换元素默认
的 display 值却是不一样的，有的是 inline，有的是 inline-block。22、替换元素的计算规定？
替换元素的尺寸从内而外分为 3 类：固有尺寸、HTML 尺寸和 CSS 尺寸。（1）固有尺寸指的是替换内容本来的尺寸。例如，图片、视频作为一个独立文件存在的时候，都是有着本人的宽度和高度的。（2）HTML 尺寸只能通过 HTML 原生属性扭转，这些 HTML 原生属性包含 <img> 的 width 和 height 属性、<input> 的 s
ize 属性、<textarea> 的 cols 和 rows 属性等。（3）CSS 尺寸特指能够通过 CSS 的 width 和 height 或者 max-width/min-width 和 max-height/min-height 设置的
尺寸，对应盒尺寸中的 content box。这 3 层构造的计算规定具体如下（1）如果没有 CSS 尺寸和 HTML 尺寸，则应用固有尺寸作为最终的宽高。（2）如果没有 CSS 尺寸，则应用 HTML 尺寸作为最终的宽高。（3）如果有 CSS 尺寸，则最终尺寸由 CSS 属性决定。（4）如果“固有尺寸”含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素仍然依照固有的宽高比例显示。（5）如果下面的条件都不合乎，则最终宽度体现为 300 像素，高度为 150 像素。（6）内联替换元素和块级替换元素应用下面同一套尺寸计算规定。23、content 与替换元素的关系？
content 属性生成的对象称为“匿名替换元素”。（1）咱们应用 content 生成的文本是无奈选中、无奈复制的，如同设置了 user select:none 申明个别，然而一般元素的文本
却能够被轻松选中。同时，content 生成的文本无奈被屏幕浏览设施读取，也无奈被搜索引擎抓取，因而，千万不要自以为是
地把重要的文本信息应用 content 属性生成，因为这对可拜访性和 SEO 都很不敌对。（2）content 生成的内容不能左右:empty 伪类。（3）content 动静生成值无奈获取。24、margin:auto 的填充规定？
margin 的 'auto' 可不是陈设，是具备强烈的计算象征的关键字，用来计算元素对应方向应该取得的残余间距大小。然而触发 mar
gin:auto 计算有一个前提条件，就是 width 或 height 为 auto 时，元素是具备对应方向的主动填充个性的。（1）如果一侧定值，一侧 auto，则 auto 为残余空间大小。（2）如果两侧均是 auto，则平分残余空间。25、margin 有效的情景
（1）display 计算值 inline 的非替换元素的垂直 margin 是有效的。对于内联替换元素，垂直 margin 无效，并且没有 ma
rgin 合并的问题。（2）表格中的 <tr> 和 <td> 元素或者设置 display 计算值是 table-cell 或 table-row 的元素的 margin 都是有效的。（3）相对定位元素非定位方位的 margin 值“有效”。（4）定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的定位“生效”。26、border 的特殊性？
（1）border-width 却不反对百分比。（2）border-style 的默认值是 none，有一部分人可能会误以为是 solid。这也是单纯设置 border-width 或 border-col
or 没有边框显示的起因。（3）border-style:double 的体现规定：双线宽度永远相等，两头距离±1。（4）border-color 默认色彩就是 color 色值。（5）默认 background 背景图片是绝对于 padding box 定位的。27、什么是基线和 x-height？
字母 x 的下边缘（线）就是咱们的基线。x-height 指的就是小写字母 x 的高度，术语形容就是基线和等分线（meanline）（也称作中线，midline）之间的间隔。在 C
SS 世界中，middle 指的是基线往上 1 /2x-height 高度。咱们能够近似了解为字母 x 交叉点那个地位。ex 是 CSS 中的一个绝对单位，指的是小写字母 x 的高度，没错，就是指 x -height。ex 的价值就在其副业上不受字体和字号影
响的内联元素的垂直居中对齐成果。内联元素默认是基线对齐的，而基线就是 x 的底部，而 1ex 就是一个 x 的高度。28、line-height 的特殊性？
（1）对于非替换元素的纯内联元素，其可视高度齐全由 line-height 决定。对于文本这样的纯内联元素，line-height 就是高
度计算的基石，用业余说法就是指定了用来计算行框盒子高度的根底高度。（2）内联元素的高度由固定高度和不固定高度组成，这个不固定的局部就是这里的“行距”。换句话说，line-height 之所以起作
用，就是通过扭转“行距”来实现的。在 CSS 中，“行距”扩散在以后文字的上方和下方，也就是即便是第一行文字，其上方也是
有“行距”的，只不过这个“行距”的高度仅仅是残缺“行距”高度的一半，因而，也被称为“半行距”。（3）行距 =line-height-font-size。（4）border 以及 line-height 等传统 CSS 属性并没有小数像素的概念。如果标注的是文字上边距，则向下取整；如果是文字下
边距，则向上取整。（5）对于纯文本元素，line-height 间接决定了最终的高度。然而，如果同时有替换元素，则 line-height 只能决定最小高度。（6）对于块级元素，line-height 对其自身是没有任何作用的，咱们平时扭转 line-height，块级元素的高度跟着变动实际上是
通过扭转块级元素外面内联级别元素占据的高度实现的。（7）line-height 的默认值是 normal，还反对数值、百分比值以及长度值。为数值类型时，其最终的计算值是和以后 font-si
ze 相乘后的值。为百分比值时，其最终的计算值是和以后 font-size 相乘后的值。为长度值时原意不变。（8）如果应用数值作为 line-height 的属性值，那么所有的子元素继承的都是这个值；然而，如果应用百分比值或者长度值作为
属性值，那么所有的子元素继承的是最终的计算值。（9）无论内联元素 line-height 如何设置，最终父级元素的高度都是由数值大的那个 line-height 决定的。（10）只有有“内联盒子”在，就肯定会有“行框盒子”，就是每一行内联元素里面包裹的一层看不见的盒子。而后，重点来了，在每个“行框盒子”后面有一个宽度为 0 的具备该元素的字体和行高属性的看不见的“幽灵空白节点”。29、vertical-align 的特殊性？
（1）vertical-align 的默认值是 baseline，即基线对齐，而基线的定义是字母 x 的下边缘。因而，内联元素默认都是沿着字
母 x 的下边缘对齐的。对于图片等替换元素，往往应用元素自身的下边缘作为基线。：一个 inline-block 元素，如果外面
没有内联元素，或者 overflow 不是 visible，则该元素的基线就是其 margin 底边缘；否则其基线就是元素外面最初一行
内联元素的基线。（2）vertical-align:top 就是垂直上边缘对齐，如果是内联元素，则和这一行地位最高的内联元素的顶部对齐；如果 display
计算值是 table-cell 的元素，咱们无妨脑补成 <td> 元素，则和 <tr> 元素上边缘对齐。（3）vertical-align:middle 是两头对齐，对于内联元素，元素的垂直中心点和行框盒子基线往上 1 /2x-height 处对齐。对
于 table-cell 元素，单元格填充盒子绝对于里面的表格行居中对齐。（4）vertical-align 反对数值属性，依据数值的不同，绝对于基线往上或往下偏移，如果是负值，往下偏移，如果是正值，往上
偏移。（5）vertical-align 属性的百分比值则是绝对于 line-height 的计算值计算的。（6）vertical-align 起作用是有前提条件的，这个前提条件就是：只能利用于内联元素以及 display 值为 table-cell 的元
素。（7）table-cell 元素设置 vertical-align 垂直对齐的是子元素，然而其作用的并不是子元素，而是 table-cell 元素本身。30、overflow 的特殊性？
（1）一个设置了 overflow:hidden 申明的元素，假如同时存在 border 属性和 padding 属性，则当子元素内容超出容器宽度
高度限制的时候，剪裁的边界是 border box 的内边缘，而非 padding box 的内边缘。（2）HTML 中有两个标签是默认能够产生滚动条的，一个是根元素 <html>，另一个是文本域 <textarea>。（3）滚动条会占用容器的可用宽度或高度。（4）元素设置了 overflow:hidden 申明，外面内容高度溢出的时候，滚动仍然存在，仅仅滚动条不存在！31、无依赖相对定位是什么？
没有设置 left/top/right/bottom 属性值的相对定位称为“无依赖相对定位”。无依赖相对定位其定位的地位和没有设置 position:absolute 时候的地位相干。32、absolute 与 overflow 的关系？
（1）如果 overflow 不是定位元素，同时相对定位元素和 overflow 容器之间也没有定位元素，则 overflow 无奈对 absolute
元素进行剪裁。（2）如果 overflow 的属性值不是 hidden 而是 auto 或者 scroll，即便相对定位元素高宽比 overflow 元素高宽还要大，也
都不会呈现滚动条。（3）overflow 元素本身 transform 的时候，Chrome 和 Opera 浏览器下的 overflow 剪裁是有效的。33、clip 裁剪是什么？
所谓“可拜访性暗藏”，指的是尽管内容肉眼看不见，然而其余辅助设施却可能进行辨认和拜访的暗藏。clip 剪裁被我称为“最佳可拜访性暗藏”的另外一个起因就是，它具备更强的广泛适应性，任何元素、任何场景都能够无障碍应用。34、relative 的特殊性？
（1）绝对定位元素的 left/top/right/bottom 的百分比值是绝对于蕴含块计算的，而不是本身。留神，尽管定位位移是绝对本身，然而百分比值的计算值不是。（2）top 和 bottom 这两个垂直方向的百分比值计算跟 height 的百分比值是一样的，都是相对高度计算的。同时，如果蕴含块的高度是 auto，那么计算值是 0，偏移有效，也就是说，如果父元素没有设定高度或者不是“格式化高度”，那么 relative 相似 top:20% 的代码等同于 top:0。（3）当绝对定位元素同时利用对抗方向定位值的时候，也就是 top/bottom 和 left/right 同时应用的时候，只有一个方向的定位属性会起作用。而谁起作用则是与文档流的程序无关的，默认的文档流是自上而下、从左往右，因而 top/bottom 同时应用的时候，bottom 生效；left/right 同时应用的时候，right 生效。35、什么是层叠上下文？
层叠上下文，英文称作 stacking context，是 HTML 中的一个三维的概念。如果一个元素含有层叠上下文，咱们能够了解为这个元
素在 z 轴上就“出人头地”。层叠上下文元素有如下个性：（1）层叠上下文的层叠程度要比一般元素高（起因前面会阐明）。（2）层叠上下文能够阻断元素的混合模式。（3）层叠上下文能够嵌套，外部层叠上下文及其所有子元素均受制于内部的“层叠上下文”。（4）每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变动或渲染的时候，只须要思考后辈元素。（5）每个层叠上下文是自成体系的，当元素产生层叠的时候，整个元素被认为是在父层叠上下文的层叠程序中。层叠上下文的创立：（1）页面根元素天生具备层叠上下文，称为根层叠上下文。根层叠上下文指的是页面根元素，能够看成是 <html> 元素。因而，页面中所有的元素肯定处于至多一个“层叠结界”中。（2）对于 position 值为 relative/absolute 以及 Firefox/IE 浏览器（不包含 Chrome 浏览器）下含有 position:fixed 申明的定位元素，当其 z -index 值不是 auto 的时候，会创立层叠上下文。Chrome 等 WebKit 内核浏览器下，position:fixed 元素人造层叠上下文元素，毋庸 z -index 为数值。依据我的测试，目前 IE 和 Firefox 仍是老套路。（3）其余一些 CSS3 属性，比方元素的 opacity 值不是 1。36、什么是层叠程度？
层叠程度，英文称作 stacking level，决定了同一个层叠上下文中元素在 z 轴上的显示程序。不言而喻，所有的元素都有层叠程度，包含层叠上下文元素，也包含一般元素。然而，对一般元素的层叠程度探讨只局限在以后层叠上
下文元素中。37、层叠准则？
（1）谁大谁上：当具备显著的层叠程度标识的时候，如失效的 z -index 属性值，在同一个层叠上下文畛域，层叠程度值大的那一个笼罩小的那一个。（2）青出于蓝：当元素的层叠程度统一、层叠程序雷同的时候，在 DOM 流中处于前面的元素会笼罩后面的元素。38、font-weight 的特殊性？
如果应用数值作为 font-weight 属性值，必须是 100～900 的整百数。因为这里的数值仅仅是表面长得像数值，实际上是一个具备特定含意的关键字，并且这里的数值关键字和字母关键字之间是有对应关系的。39、text-indent 的特殊性？
（1）text-indent 仅对第一行内联盒子内容无效。（2）非替换元素以外的 display 计算值为 inline 的内联元素设置 text-indent 值有效，如果计算值 inline-block/inli
ne-table 则会失效。（3）<input> 标签按钮 text-indent 值有效。（4）<button> 标签按钮 text-indent 值无效。（5）text-indent 的百分比值是绝对于以后元素的“蕴含块”计算的，而不是以后元素。40、letter-spacing 与字符间距？
letter-spacing 能够用来控制字符之间的间距，这里说的“字符”包含英文字母、汉字以及空格等。letter-spacing 具备以下一些个性。（1）继承性。（2）默认值是 normal 而不是 0。尽管说失常状况下，normal 的计算值就是 0，但两者还是有差异的，在有些场景下，letter-spacing 会调整 normal 的计算值以实现更好的版面布局。（3）反对负值，且值足够大的时候，会让字符造成重叠，甚至反向排列。（4）和 text-indent 属性一样，无论值多大或多小，第一行肯定会保留至多一个字符。（5）反对小数值，即便 0.1px 也是反对的。（6）暂不反对百分比值。41、word-spacing 与单词间距？
letter-spacing 作用于所有字符，但 word-spacing 仅作用于空格字符。换句话说，word-spacing 的作用就是减少空格的间隙
宽度。42、white-space 与换行和空格的管制？
white-space 属性申明了如何解决元素内的空白字符，这类空白字符包含 Space（空格）键、Enter（回车）键、Tab（制表符）键产生的空白。因而，white-space 能够决定图文内容是否在一行显示（回车空格是否失效），是否显示大段间断空白（空格是否
失效）等。其属性值包含上面这些。•normal：合并空白字符和换行符。•pre：空白字符不合并，并且内容只在有换行符的中央换行。•nowrap：该值和 normal 一样会合并空白字符，但不容许文本盘绕。•pre-wrap：空白字符不合并，并且内容只在有换行符的中央换行，同时容许文本盘绕。•pre-line：合并空白字符，但只在有换行符的中央换行，容许文本盘绕。43、暗藏元素的 background-image 到底加不加载？
相干知识点：
依据测试，一个元素如果 display 计算值为 none，在 IE 浏览器下（IE8～IE11，更高版本不确定）仍然会发送图片申请，Fire
fox 浏览器不会，至于 Chrome 和 Safari 浏览器则仿佛更加智能一点：如果暗藏元素同时又设置了 background-image，则图片
仍然会去加载；如果是父元素的 display 计算值为 none，则背景图不会申请，此时浏览器或者释怀地认为这个背景图临时是不会使
用的。如果不是 background-image，而是 <img> 元素，则设置 display:none 在所有浏览器下仍旧都会申请图片资源。还须要留神的是如果设置的款式没有对应的元素，则 background-image 也不会加载。hover 状况下的 background-image，在触
发时加载。答复：
-（1）元素的背景图片
- 元素自身设置 display:none，会申请图片 - 父级元素设置 display:none，不会申请图片 - 款式没有元素应用，不会申请 -:hover 款式下，触发时申请
-（2）img 标签图片任何状况下都会申请图片 详细资料能够参考：《CSS 管制前端图片 HTTP 申请的各种状况示例》
44、如何实现单行/多行文本溢出的省略（…）？
/* 单行文本溢出 */
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 多行文本溢出 */
p {
position: relative;
line-height: 1.5em;
/* 高度为须要显示的行数 * 行高，比方这里咱们显示两行，则为 3 */
height: 3em;
overflow: hidden;
}
p:after {
content: '...';
position: absolute;
bottom: 0;
right: 0;
background-color: #fff;
}详细资料能够参考：《【CSS/JS】如何实现单行/多行文本溢出的省略》《CSS 多行文本溢出省略显示》
45、常见的元素暗藏形式？
-（1）应用 display:none; 暗藏元素，渲染树不会蕴含该渲染对象，因而该元素不会在页面中占据地位，也不会响应绑定的监听事件。-（2）应用 visibility:hidden; 暗藏元素。元素在页面中仍占据空间，然而不会响应绑定的监听事件。-（3）应用 opacity:0; 将元素的透明度设置为 0，以此来实现元素的暗藏。元素在页面中依然占据空间，并且可能响应元素绑定的监听事件。-（4）通过应用相对定位将元素移除可视区域内，以此来实现元素的暗藏。-（5）通过 z-index 负值，来使其余元素遮盖住该元素，以此来实现暗藏。-（6）通过 clip/clip-path 元素裁剪的办法来实现元素的暗藏，这种办法下，元素仍在页面中占据地位，然而不会响应绑定的监听事件。-（7）通过 transform:scale(0,0) 来将元素缩放为 0，以此来实现元素的暗藏。这种办法下，元素仍在页面中占据地位，然而不会响应绑定的监听事件。详细资料能够参考：《CSS 暗藏元素的八种办法》
46、css 实现高低固定两头自适应布局？
利用相对定位实现 body {
padding: 0;
margin: 0;
}
.header {
position: absolute;
top: 0;
width: 100%;
height: 100px;
background: red;
}
.container {
position: absolute;
top: 100px;
bottom: 100px;
width: 100%;
background: green;
}
.footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
利用 flex 布局实现 html,
body {height: 100%;}
body {
display: flex;
padding: 0;
margin: 0;
flex-direction: column;
}
.header {
height: 100px;
background: red;
}
.container {
flex-grow: 1;
background: green;
}
.footer {
height: 100px;
background: red;
}详细资料能够参考：《css 实现高低固定两头自适应布局》
47、css 两栏布局的实现？
相干材料：
/* 两栏布局个别指的是页面中一共两栏，右边固定，左边自适应的布局，一共有四种实现的形式。*/
/* 以右边宽度固定为 200px 为例 */
/*（1）利用浮动，将右边元素宽度设置为 200px，并且设置向左浮动。将左边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。*/
.outer {height: 100px;}
.left {
float: left;
height: 100px;
width: 200px;
background: tomato;
}
.right {
margin-left: 200px;
width: auto;
height: 100px;
background: gold;
}
/*（2）第二种是利用 flex 布局，将右边元素的放大和放大比例设置为 0，根底大小设置为 200px。将左边的元素的放大比例设置为 1，放大比例设置为 1，根底大小设置为 auto。*/
.outer {
display: flex;
height: 100px;
}
.left {
flex-shrink: 0;
flex-grow: 0;
flex-basis: 200px;
background: tomato;
}
.right {
flex: auto;
/*11auto*/
background: gold;
}
/*（3）第三种是利用相对定位布局的形式，将父级元素设置绝对定位。右边元素设置为 absolute 定位，并且宽度设置为
200px。将左边元素的 margin-left 的值设置为 200px。*/
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 200px;
height: 100px;
background: tomato;
}
.right {
margin-left: 200px;
height: 100px;
background: gold;
}
/*（4）第四种还是利用相对定位的形式，将父级元素设置为绝对定位。右边元素宽度设置为 200px，左边元素设置为相对定位，右边定位为 200px，其余方向定位为 0。*/
.outer {
position: relative;
height: 100px;
}
.left {
width: 200px;
height: 100px;
background: tomato;
}
.right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 200px;
background: gold;
}《两栏布局 demo 展现》
答复：
两栏布局个别指的是页面中一共两栏，右边固定，左边自适应的布局，一共有四种实现的形式。以右边宽度固定为 200px 为例
-（1）利用浮动，将右边元素宽度设置为 200px，并且设置向左浮动。将左边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。-（2）第二种是利用 flex 布局，将右边元素的放大和放大比例设置为 0，根底大小设置为 200px。将左边的元素的放大比例设置为 1，放大比例设置为 1，根底大小设置为 auto。-（3）第三种是利用相对定位布局的形式，将父级元素设置绝对定位。右边元素设置为 absolute 定位，并且宽度设置为 200px。将左边元素的 margin-left 的值设置为 200px。-（4）第四种还是利用相对定位的形式，将父级元素设置为绝对定位。右边元素宽度设置为 200px，左边元素设置为相对定位，右边定位为 200px，其余方向定位为 0。48、CSS 三栏布局的实现？
相干材料：
/* 三栏布局个别指的是页面中一共有三栏，左右两栏宽度固定，两头自适应的布局，一共有五种实现形式。这里以右边宽度固定为 100px，左边宽度固定为 200px 为例。*/
/*（1）利用相对定位的形式，左右两栏设置为相对定位，两头设置对应方向大小的 margin 的值。*/
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 100px;
height: 100px;
background: tomato;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100px;
background: gold;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
background: lightgreen;
}
/*（2）利用 flex 布局的形式，左右两栏的放大和放大比例都设置为 0，根底大小设置为固定的大小，两头一栏设置为 auto*/
.outer {
display: flex;
height: 100px;
}
.left {
flex: 00100px;
background: tomato;
}
.right {
flex: 00200px;
background: gold;
}
.center {
flex: auto;
background: lightgreen;
}
/*（3）利用浮动的形式，左右两栏设置固定大小，并设置对应方向的浮动。两头一栏设置左右两个方向的 margin 值，留神这种形式，两头一栏必须放到最初。*/
.outer {height: 100px;}
.left {
float: left;
width: 100px;
height: 100px;
background: tomato;
}
.right {
float: right;
width: 200px;
height: 100px;
background: gold;
}
.center {
height: 100px;
margin-left: 100px;
margin-right: 200px;
background: lightgreen;
}
/*（4）圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，两头一列放在最后面，宽度设置为父级元素的宽度，因而前面两列都被挤到了下一行，通过设置 margin 负值将其挪动到上一行，再利用绝对定位，定位到两边。*/
.outer {
height: 100px;
padding-left: 100px;
padding-right: 200px;
}
.left {
position: relative;
left: -100px;
float: left;
margin-left: -100%;
width: 100px;
height: 100px;
background: tomato;
}
.right {
position: relative;
left: 200px;
float: right;
margin-left: -200px;
width: 200px;
height: 100px;
background: gold;
}
.center {
float: left;
width: 100%;
height: 100px;
background: lightgreen;
}
/*（5）双飞翼布局，双飞翼布局绝对于圣杯布局来说，左右地位的保留是通过两头列的 margin 值来实现的，而不是通过父元
素的 padding 来实现的。实质上来说，也是通过浮动和外边距负值来实现的。*/
.outer {height: 100px;}
.left {
float: left;
margin-left: -100%;
width: 100px;
height: 100px;
background: tomato;
}
.right {
float: left;
margin-left: -200px;
width: 200px;
height: 100px;
background: gold;
}
.wrapper {
float: left;
width: 100%;
height: 100px;
background: lightgreen;
}
.center {
margin-left: 100px;
margin-right: 200px;
height: 100px;
}《三栏布局 demo 展现》
答复：
三栏布局个别指的是页面中一共有三栏，左右两栏宽度固定，两头自适应的布局，一共有五种实现形式。这里以右边宽度固定为 100px，左边宽度固定为 200px 为例。（1）利用相对定位的形式，左右两栏设置为相对定位，两头设置对应方向大小的 margin 的值。（2）利用 flex 布局的形式，左右两栏的放大和放大比例都设置为 0，根底大小设置为固定的大小，两头一栏设置为 auto。（3）利用浮动的形式，左右两栏设置固定大小，并设置对应方向的浮动。两头一栏设置左右两个方向的 margin 值，留神这种形式，两头一栏必须放到最初。（4）圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，两头一列放在最后面，宽度设置为父级元素的宽度，因而前面两列都被挤到了下一行，通过设置 margin 负值将其挪动到上一行，再利用绝对定位，定位到两边。双飞翼布局两头列的宽度不能小于两边任意列的宽度，而双飞翼布局则不存在这个问题。（5）双飞翼布局，双飞翼布局绝对于圣杯布局来说，左右地位的保留是通过两头列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。实质上来说，也是通过浮动和外边距负值来实现的。49、实现一个宽高自适应的正方形
/*1. 第一种形式是利用 vw 来实现 */
.square {
width: 10%;
height: 10vw;
background: tomato;
}
/*2. 第二种形式是利用元素的 margin/padding 百分比是绝对父元素 width 的性质来实现 */
.square {
width: 20%;
height: 0;
padding-top: 20%;
background: orange;
}
/*3. 第三种形式是利用子元素的 margin-top 的值来实现的 */
.square {
width: 30%;
overflow: hidden;
background: yellow;
}
.square::after {
content: '';
display: block;
margin-top: 100%;
}《自适应正方形 demo 展现》
50、实现一个三角形
/* 三角形的实现原理是利用了元素边框连接处的等分原理。*/
.triangle {
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: tomatotransparenttransparenttransparent;
}《三角形 demo 展现》
51、一个自适应矩形，程度垂直居中，且宽高比为 2:1
/* 实现原理参考自适应正方形和程度居中形式 */
.box {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
width: 10%;
height: 0;
padding-top: 20%;
background: tomato;
}52、你晓得 CSS 中不同属性设置为百分比 % 时对应的计算基准？
公式：以后元素某 CSS 属性值 = 基准 * 对应的百分比
元素的 position 为 relative 和 absolute 时，top 和 bottom、left 和 right 基准别离为蕴含块的 height、width
元素的 position 为 fixed 时，top 和 bottom、left 和 right 基准别离为初始蕴含块（也就是视口）的 height、width，挪动设施较为简单，基准为 Layout viewport 的 height、width
元素的 height 和 width 设置为百分比时，基准别离为蕴含块的 height 和 width
元素的 margin 和 padding 设置为百分比时，基准为蕴含块的 width（易错）元素的 border-width，不反对百分比
元素的 text-indent，基准为蕴含块的 width
元素的 border-radius，基准为别离为本身的 height、width
元素的 background-size，基准为别离为本身的 height、width
元素的 translateX、translateY，基准为别离为本身的 height、width
元素的 line-height，基准为本身的 font-size
元素的 font-size，基准为父元素字体
正文完
