HTML和CSS篇章高频面试题【2023】
html篇章
-
什么是 HTML5？
html是一种超文本标记语言，html5它更侧重于语义化，对于seo、搜索引擎优化更好，可以大量应用在移动设备上。 -
HTML5有哪些的新特性？
新增布局标签：head、footer、nav、article、section、aside，其中article中可以包含多个section，article主要强调独立性，而section主要强调分段。
新增状态标签：meter可模拟电量，progress可模拟当前任务完成进度。
新增列表标签：datalist用于搜索提示，details用于对专有名词的解释，summary用于指定问题。
新增文章标签：ruby用于包裹要注意的文字，mark用于标记文本呈现搜索结果。
新增视频标签：video视频标签，audio音频标签，其中的属性controls控制视频音频是否播放。
新增全局属性：content editable元素是否可编辑，draggable元素是否可拖动，hidden是否隐藏元素… -
HTML5中input新增的type属性值？
type属性：邮箱、数值、url、搜索、电话、范围、颜色、日期、月份、时间 -
png、jpg、gif这些图片格式解释一下，分别什么时候用呢？
png格式为无损压缩，可以更高质量的保存图片，不支持动图，可做小图标。
jpg格式为有损压缩，有一点失真，不支持动图，可以做中大图标。
gif格式支持简单的透明度背景，支持动图，但是色彩呈现不完善。
webp格式由谷歌公司推出，同时支持无所压缩和有损压缩，但兼容性不是特别好。
bmp格式不进行压缩，对图片要求极高，一般用于中大型游戏中的图片。 -
浏览器如何实现不同标签页的通信？
浏览器不同标签通常是通过浏览器搜索引擎进行通信的，不同标签页之间的通信需要浏览器提供的跨端口机制实现，如：window对象：每个标签页都有一个独立的window对象，可以通过window对象来访问和操作该标签页的窗口和文档对象，window.postMessage()发送信息，window.addListener()监听事件等； -
HTML5应用程序缓存和HTML浏览器缓存有什么区别？
HTML5应用程序缓存主要针对Web应用程序；而HTML浏览器缓存则针对整个Web页面。
HTML5应用程序缓存使用AppCache机制，将缓存文件列表存储在浏览器中，浏览器会根据列表中的文件进行缓存；HTML浏览器缓存则使用HTTP缓存机制，根据HTTP响应头中的信息进行缓存。
HTML5应用程序缓存只针对当前Web应用程序，而HTML浏览器缓存则针对整个浏览器。 -
link和@import的区别？
属性关系不同，link是一个标签，而import是css提供的一种引入方式。
加载顺序不同，link引入css页面和样式同时加载，而import是在页面完全加载之后再加载css样式。
link是html元素不存在兼容性问题，而import是ie5以上才可以识别。
link可以控制js来操作dom进而改变样式，而import是一种css语法不可以操作dom。 -
ur地址输入之后发生了什么？
首先浏览器将URL转化为IP地址，也就是DNS解析，DNS解析是一个互联网协议，用于将人类可读的域名转化为计算机可读的IP地址；
其次浏览器与目标网站之间建立TCP连接，TCP是一种网络协议用于在计算机之间建立可靠的通信；
然后浏览器会向目标网站发送http请求，http是一种通信协议，用于浏览器和服务器之间的信息交换；
然后目标网站在收到HTTP请求后，会发送HTTP响应给浏览器，包括网页的HTML、CSS、JavaScript代码等；
然后浏览器对接收到的html代码进行解析，解析为dom，并且将css样式应用到dom树上，浏览器会计算出页面的布局和大小，然后将渲染树输出到屏幕上，显示出可视化图像；
那么如果页面包含动态内容，浏览器可能需要与服务器进行额外的交互来获取这些内容；
最后浏览器会加载页面所需要的其他资源，如图像、视频等。
三次握手：客户端向服务器发起连接请求，服务器确认收到客户端发送的连接请求并且向客户端再次发送连接请求，客户端确认收到服务器发送的连接请求。
四次挥手：客户端发出断开连接的请求，服务端确认收到请求，服务端发出断开连接的请求，客户端确认收到请求。 -
浏览器的内核分别是什么？
ie浏览器的内核为Trident内核，也称IE内核。
chrome浏览器的内核统称chrome内核，以前是webkit内核，现在是blink内核。
firefox浏览器的内核为Gecko内核，俗称firefox内核。
苹果Safari浏览器的内核为webkit内核，特点不受IE、Firefox等内核的约束，比较安全。
Opera浏览器最初是自己的presto内核，后来加入谷歌大军，从webkit又到blink内核。 -
HTML5兼容性问题处理？
引入 html5shiv.js 文件，可识别h5新标签，但是不可以识别多媒体标签。
使用meta中的属性让浏览器处于最优渲染方式。
针对于双核浏览器，优先使用webkit内核。 -
如何解决页面内容加载缓慢的问题，可以具体说说吗？
通过压缩HTML、CSS、JavaScript等文件大小，减少加载时间。
使用合适的图片格式，如JPEG、PNG格式等控制图片大小来避免图片过大导致加载时间过长。
通过webpack打包合并CSS和JavaScript文件，减少HTTP请求次数，提升加载速度。 -
如何解决首页内容加载缓慢的问题？
减少减少页面中的资源数量。
通过压缩HTML、CSS、JavaScript等文件大小，减少加载时间。
按需加载，只加载用户需要的内容，减少不必要的资源加载，提高首屏加载速度。
使用路由懒加载技术，在需要时才加载对应的资源，减少首屏加载时间。 -
localStorage、sessionStorage、cookie的区别？
localStorage、sessionStorage、cookie三者都是用来存储客户端临时信息的对象，但localStorage、sessionStorage只能存储字符串类型，遇到其他类型，需要转换成字符串类型进行存储，两者的大小都是不超过5M；那localStorage是持久化存储在浏览器中，除非手动删除：存 localStorage.setItem(‘键’，‘值’) ， 取 localStorage.getItem(‘键’，‘值’) ，删除：localStorage.removeItem(‘键’)； 而sessionStorage 是会话存储，浏览器关闭，数据就会被销毁，仅在当前浏览器窗口关闭之前有效。需要注意不同浏览器没办法共享localStorage或sessionStorage的数据信息。那 cookie 是浏览器本地化存储，用于客户端与服务器进行会话的使，并且可以设置过期时间在过期前有效。它需要在服务器环境才可以存储上，存储大小4kb左右的数据，目前的使用场景辨别用户身份，记录用户访问次数等。
css篇章
-
说一下css的盒模型，盒模型之间的转化？
盒模型分为标准盒模型和IE盒模型，标准盒模型由margin、border、padding、content组成，IE盒模型由margin和内容区域组成，而内容区域包含border、padding、content组成，标准盒模型转化为IE盒模型box-sizing：border-box，IE盒模型转化为标准盒模型box-sizing：content-box，实际项目中通常使用IE盒模型这样修改padding不会影响整体布局，但在ie盒模型中会有一种特殊情况，例如宽固定100px，padding为50px，border为5px，那么整体宽度为110px，因为padding的左右大小加起来已经为100px，所以呢需要加上左右两边边框的大小值，整体大小为110px。 -
css优先级（权重）算法如何计算？
!import > 内联样式> id > class > 标签 > 通配 > 继承的样式
css优先级的计算方式类似于8进制的写法（0，0，0），但它的第一位为id选择器的个数，第二位为类、伪类、属性选择器的个数，第三位为元素、伪元素选择器的个数，然后从左向右依次比较，然后计算出优先级，如果两个选择符的计算权重值相同，则采取“就近原则。 -
隐藏元素的方法有哪些，以及它们的区别？
display: none会隐藏元素，将元素从页面布局中删除，不占据任何空间，不会被子元素继承，因为该元素已经被删除因此无法触发绑定事件，过渡动画transition对于display 是无效的，display: none会产生重排和重绘。
visibility: hidden会隐藏元素，元素仍然占据页面空间，只是不可见，会被子元素继承，但是可通过设置子元素visibility:visible来显示子元素，visibility:hidden只会引起页面重绘。
opacity: 0会隐藏元素，元素仍然占据页面空间，会被子元素继承，但是不能将子元素设置为opacity:1 来重新显示。只是样式完全透明，元素上面绑定的事件是可以触发的，opacity:0只会引起页面重绘。
width: 0只适用于块级元素，通过将元素的宽度设置为0来隐藏元素。
height: 0只适用于块级元素，通过将元素的高度设置为0来隐藏元素。
overflow: hidden; 该方法将元素的溢出内容隐藏起来，包括内容超出尺寸的部分和滚动条等。 -
重绘和重排有什么区别以及如何避免重排和重绘？
重排也叫回流，当渲染树中的一部分或因为全部大小边距等问题发生改变而需要dom树重新计算的过程为重排。
重绘是当元素的一部分属性发生变化，如外观、背景、颜色发生变化并不会引起布局变化，只需要浏览器根据元素的新属性重新绘制，使得元素呈现新的外观的过程为重绘。
如何避免重排和重绘：避免频繁操作样式，例如修改元素的尺寸、颜色、位置等，会导致浏览器不断地重排和重绘，影响性能。避免使用table布局，因为一旦表格的某个部分发生变化，整个表格都需要重新计算，导致性能下降。尽可能减少DOM操作，例如通过一次性修改样式或属性，而不是频繁地修改。避免使用内联样式，会导致元素具有独特的样式，无法与其他元素共享，从而导致性能下降。优化图片大小，避免加载不必要的图片，以及使用适当的图片格式。使用CSS3的特性，例如动画、过渡、变换等，可以减少重排和重绘的次数。 -
一个元素水平垂直居中的方式有哪些？
margin居中方法：父元素设置宽高为400px，并且需要设置overflow: hidden，是为了解决margin高度塌陷的问题，子元素设置宽高200px，margin: 0 auto 来控制水平居中，margin-top: （父元素内容的高度 – 子元素总体的高度）/ 2 的值来控制垂直居中。
内联元素居中：子元素为行内元素时，父元素设置宽高400px，text-align: center, line-height: 400px，子元素由内容自动撑开即可。
弹性布局：父元素添加display: flex; justify-content: center; align-items: center；，控制子元素水平垂直位置居中。
transform+position绝对定位居中：父元素添加position: relative 相对于自己定位，子元素添加position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) 使得子元素上下垂直居中。
定位元素在包含块中居中：父元素设置宽高400px，position:relative，子元素设置宽高为100px，left:0 right:0 top:0 bottom:0 margin: auto。 -
css哪些属性可以继承，哪些不可继承？
可继承属性：文字相关属性：color、font-size、font-style… letter-spacing、text-align、line-height、word-spacing；背景相关属性：background-color、background-image、background-repeat…
不可继承属性：宽高、外内边距、float、position、display、过渡、动画等 -
css3新增了哪些新特性？
新增动态伪类、目标伪类
新增边框属性 border-radius
新增阴影属性 box-shadow
新增渐变 线性渐变background-image：liner- gradient()，径向渐变background-image：radial- gradient()
新增opacity属性控制透明度
新增背景相关属性，设置背景图的原点background - origin，对背景图进行修剪background-clip，调整背景图大小background-size
新增文本属性text-shadow与盒子阴影box-shadow 用法相同，text-shadow:none没有阴影，文本换行：white-space
新增文本修饰text-decoration：none去掉下划线
新增2d和3d变换，旋转，扭曲，缩放
新增动画与过度效果
新增长度单位 -
对伸缩盒模型的了解有哪些？
display:flex，主轴方向上从左到右flex-direction:row，右到左flex-direction:row-reverse，从上到下flex-direction:column，下到上flex-direction:column-reverse，主轴方向上换行flex-wrap:wrap，主轴对齐方式居中justify-content：center，子元素与子元素的距离是子元素与边框间距的二倍justify-content：space-around，子元素与子元素的距离相等并且子元素与边框之间没有距离justify-content：space-between，子元素与子元素的距离相等并且子元素与边框之间均匀分布justify-content：space-evenly。侧轴方向一行对齐，align-items:center垂直居中，侧轴多行对齐，align-content:center居中对齐，默认对齐方式，align-content：stretch。 -
flex:auto、flex:1、flex:none、flex:0 auto 分别代表什么意思？
flex-basis 设置主轴上的基准长度。
flex-grow 定义子元素的放大比例，默认为0，若所有子元素的flex-grow都为1，则等分剩余空间，若三个子元素flex-grow值分别为1，2，3，则分到的分别为1/6，2/6，3/6的空间
flex-shrink 定义子元素的宽度，计算分母，若盒子200，200，300，flex-shrink都为1，则分母为200 x 1+200 x 1+300 x 1=700，父元素收缩了300，计算每一个盒子收缩比 200 x 1 / 700，为盒子是200的收缩比，那就是收缩了(200 x 1/700) x 300(父元素收缩的像素)
flex:auto，可以拉伸，可以伸缩，不设置基准长度
flex:1，可以拉伸，可以伸缩，基准长度为0
flex：none，不能拉伸，不能压缩，不设置基准长度
flex：0 auto，不能拉伸 可以压缩 不设置基准长度 -
line-height和height的区别？
line-heigth是指定的每一行文字的高度，如果文字换行，则整个文字高度增大，height =（行数*行高），normal 浏览器根据文字大小决定的一个默认值，数字：font-size的倍数，百分比：与font-size百分比类似，行高过小，文字会重叠，且最小值为0不可以为负，行高可以继承，单行文本垂直居中，多行文字间距
height是指定盒子的总体高度，不会改变，如果文字过多会造成文字溢出 -
如何解决边界塌陷？
margin塌陷：父元素包裹子元素，给子元素设置margin-top，只想让子元素距离父元素边框有一段距离，父元素和子元素一起移动出现了塌陷。
解决边界塌陷：1.父元素加边框，2.父元素添加padding-top，3.父元素设置overflow:hidden，触发bfc机制，4.给父元素增加浮动，让其脱离标准流，但是会使得margin：0 auto 失效，需要给父元素使用相对定位以及transform：translate(-50%,0)来解决，5.将父元素转化为行内块元素。 -
内容溢出如何处理？
overflow:visible显示内容，默认值，overflow：hidden 隐藏滚动条，无论内容是否溢出，滚动条不显示，overflow：scroll 显示滚动条，不论内容是否溢出都会显示滚动条，overflow：auto自动显示滚动条，内容不溢出滚动条不显示，其中overflow-x，overflow-y不能一个显示hidden，一个显示visible，overflow常用的值是hidden和auto，该属性还可以解决其他问题 -
如何解决行内元素之间的空白问题？
行内块元素之间换行会被浏览器解析为一个空白字，可以符去掉换行，空格（不推荐）来解决元素空白问题，或者给父元素设置font-size：0，然后给需要的显示文字元素单独设置文字大小。 -
什么是浮动，浮动产生的问题以及如何清除浮动？
一开始浮动是为了设置文字环绕图片或文字环绕文字这种布局，而浮动后的元素会脱离文档流，默认宽高是被内容撑开的，且可以设置宽高，不会独占一行并且不会有外边距合并的问题等。浮动产生的影响对兄弟元素而言，后面的兄弟元素会占据浮动之前元素的位置，而对父元素而言撑不开父元素的高度会导致父元素高度塌陷。如果想解决父元素塌陷问题可以给父元素设置高度、给父元素也设置float:left让其父元素也一起浮动、给父元素添加overflow:hidden可以解决父元素塌陷的问题，但是以上的办法都不能解决最后一个盒子不浮动被隐藏的影响。因此可以通过伪元素:after，添加display: block;clear: both;来解决浮动带来的影响。 -
常见的几种定位？
默认值static；固定定位fixed；相对定位relative；绝对定位absolute；粘性定位sticky，五种定位方式，默认值没有进行定位，固定定位相对于浏览器视口定位，相对定位不脱离文档流且元素位置的变化不会对其他元素产生任何影响，绝对定位会脱离文档流且对后面的兄弟元素有影响，绝对定位和浮动不可以一起设置，如果同时设置会以定位为主，粘性定位不会脱离文档流，专门用于窗口滚动的新的定位方式，粘性定位和相对定位的特点一致，但粘性定位可以在元素达到某个位置时将其固定。 -
对cssom是如何理解的？
css对象模型，是对css样式表的对象化，同时还提供了相关api用来操作css样式。构建cssom树是依赖于dom树，那在构建cssom树时，对于任何一个元素的最终样式，浏览器会从该节点的最上层，通过递归方式不断向下合并更加具体的规则，最终得出完整结果。 -
什么是BFC，BFC触发的条件以及触发BFC解决了什么问题？
块级格式化上下文，是指浏览器中创建了一个独立的渲染区域，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。简单来说就是页面上的一个隔离容器，容器里面的子元素不会影响到外面元素。BFC产生条件有浮动元素、行内块元素、表格单元格display:table、flex布局、position属性为absolute或fixed、display:flow-root等，其中display:flow-root不支持ie浏览器，BFC所解决的问题可以防止外边距发生重叠、清除浮动、防止高度塌陷。 -
说说对渐进增强和优雅降级的理解？
渐进增强是先对低版本浏览器进行构建页面，完成基本功能开发，然后针对高版本浏览器进行效果，交互、追加功能达到更好的体验。
优雅降级先构建高版本的完整功能，然后在针对浏览器进行兼容，比如用css3构建一个应用，做完后逐步针对各大浏览器进行兼容，使其可以在低版本浏览器正常浏览。 -
如何让chrome浏览器支持小于12px的字体？
chrome浏览器默认字体大小16px，每个浏览器默认字体大小都可能不一样，假设设置字体10px，设置css缩放，使用transform进行缩放设置，display: inline-block; -webkit-transform: scale(0.8)。 -
说说em/px/rem/vh/vw区别?？
px为绝对像素，em是相对于当前元素font-size的倍数，如果自身元素上没有font-size就会去font-size去找，一层层找，没有则使用默认字体，rem是相对于html根元素大小进行设置，百分比是相对于父元素进行计算，vw为视口宽度的百分比，vh为视口高度的百分比。 -
如何实现左右两栏布局(左边固定，右边自适应) 两个盒子？
利用浮动左边盒子浮动，这时右边盒子会覆盖在左边盒子上，假设左边盒子给宽度200px，则右边盒子需要给左外边距200px。
利用BFC机制，左侧盒子进行浮动，右侧盒子设置overflow:hidden。
利用display:flex布局，左侧盒子设置固定的宽度，假设200px，右侧设置flex:1。
利用栅格布局，父元素设置display:grid; grid-template-columns: 100px auto。 -
如何实现上下两栏布局（上边固定，下边自适应）两个盒子？
利用浮动将左右两个盒子分别添加左浮动和右浮动，并且三个盒子高都为100vh，宽都为200px，则中间盒子外边距左右都为200px，右侧盒子margin-top为负的100vh 则可以实现左右两侧固定，中间自适应。
利用flex布局，父元素display：flex，左右两边元素固定宽度，中间元素flex：1，可实现左右固定，中间自适应的布局。
利用栅格布局三列布局 grid-template-columns制定三列，中间自适应为auto。 -
如何实现左中右三栏布局(左边右边固定，中间自适应) 三个盒子？
利用vh计算 上边盒子固定高度，下边盒子自适应。
利用display:grid; grid-template-rows 行布局进行实现 上边固定高度100px 下边auto自适应。
利用flex-direction换轴为列column，下边盒子设置 flex:1，上边盒子固定高度 -
如何实现上中下三栏布局(上边和下边固定，中间自适应) 三个盒子？
利用100vh减去上下盒子的高度为中间的盒子的高度。
利用flex-direction换轴为列column，中间盒子设置 flex:1 撑开，上下盒子固定高度。
利用网格 grid 布局 grid-template-rows 行轨道，设置上100px ，中间自适应auto，下100px。 -
左右布局沾满全屏，左右两块固定中间自适应，要求先加载中间块，写出结构以及样式？
双飞翼布局，程序从上往下执行，将中间子元素写在第一个，然后左边元素，右边元素，给所有子元素添加浮动，然后左边元素margin-left: -100%，中间盒子宽度百分百，右边元素需要给外边距负200px即可。 -
对响应式布局的和自适应布局的理解？
响应式布局可用于移动端，根据不同屏幕大小通过css3中的媒体查询技术动态的调整整个网页的布局和样式，给用户提供更高的体验，那响应式布局包含媒体查询、弹性布局、响应式图片、流式布局等。
自适应布局可以让网页自动适应不同屏幕尺寸和形状的布局技术，实现自适应布局如高度自适应、宽度自适应、利用float实现、利用margin、媒体查询修改样式等。 -
常见的适配方案有哪些？
百分比布局，但不同属性的百分比值相对参照物可能不同，因此很难统一。
rem+动态font-size适配，rem是相对于html根元素的font-size来设置的，通过媒体查询来设置不同尺寸的屏幕根元素的font-size尺寸，让js监听页面可视区宽度clientWidth的变化，重新设置font-size到html上。
flex的弹性布局方式可以进行适配一些布局。 -
css3动画有了解吗？
定义动画@keyframes move { from {} // 第一帧 to {} // 最后一帧 }，动画属性中设置动画方式animation-timing-function：linear，设置动画播放次数animation-iteration-count：3，设置动画方向animation-direction：alternate为往复运动、 reverse为从结束到开始、alternate-reverse为反方向交替运动，设置动画以外的状态animation-fill-mode：fowards是最后一帧停止在最右侧 、 backwards是归位，设置播放状态animation-play-state：running为运动、paused为暂停该属性一般写在hover中，动画复合属性：animation：moves 3s 0.5s linear 2 reverse forwards；
动画和过渡的区别：动画不需要触发条件，过渡需要触发条件；动画可以使用关键精细设置，过渡不可以，过渡关注点只是始末状态。 -
如果要做优化，CSS提高性能的方法有哪些？
允许浏览器在需要时动态地加载资源。
压缩CSS文件的大小，从而减少HTTP请求的数量。
缓存已经下载的CSS文件，减少再次下载和解析的时间。
注意复用样式，减少渲染上花的时间。
使用CSS媒体查询根据设备的屏幕尺寸、分辨率等条件来动态地改变样式。 -
如何实现单行、多行文本溢出的省略样式？
单行文本省略设置固定宽度，然后使用white-space禁止自动换行，并且使用属性text-overflow: ellipsis;可显示省略号来表示省略的文本。
多行文本省略设置了元素的宽度并使用了 -webkit-box 属性来限制显示的行数，当文本超出了元素的宽度时，overflow:hidden 属性就会发挥作用，隐藏被省略的文本。同时，使用 -webkit-line-clamp 属性来限制在一个块元素显示的文本的行数。 -
如何画一条0.5px的线？
使用border-width:0.5px可以进行绘制，
使用CSS Grid的网格线来模拟0.5像素的线条，
使用SVG的元素来绘制一条宽度为0.5像素的线，SVG标签的属性宽高分别设置100px，line标签的属性stroke-width设置为0.5可以达到效果。 -
CSS如何画一个三角形？原理是什么？
设置一个盒子，并将盒子四周设置为不同颜色的边框，然后将盒子宽高设置为0，仅保留边框宽度，从而得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明。那原理就是不同颜色的边框组成了一个三角形形状。 -
说说对css预编语言的理解？有哪些区别?
CSS预处理器是一种编程语言，可以用来编写CSS的自定义代码，然后通过解析器编译生成对应的CSS文件。在CSS预处理器中，可以声明变量，然后在代码中使用该变量，可以定义作用域，限制某些特定样式的作用范围，可以嵌套选择器，减少重复的代码。以上操作在css并不支持。