"前端面试题总结及常见知识点解析"

本文总结了一些常见的面试题，涵盖了HTML、CSS和JavaScript等方面的知识内容。 在一阶段网络中使用最多的图片格式有JPEG、PNG和GIF。JPEG格式适合储存复杂的图像，PNG格式适合储存透明的图像，GIF则适合储存动画图像。 CSS盒子模型是指HTML元素在页面中的布局模型。它包括内容(content)、填充(padding)、边框(border)和外边距(margin)四个部分。 HTML5 新增的内容包括语义化标签（如<header>、<nav>、<article>等）、多媒体标签（如<video>、<audio>）以及新的表单控件（如<input type="date">、<input type="email">）等。 清除浮动的方式有使用clear属性、使用after伪元素、给父元素添加overflow属性为hidden等。 常用的水平垂直居中的方式包括使用text-align和vertical-align属性、使用flex布局、使用position属性搭配top、bottom、left和right等。 Border-box和content-box是CSS中的两种盒模型。Border-box模型将边框和填充计入总宽度，而content-box模型只计入内容的宽度。 BFC（块级格式化上下文）是指页面中的一块独立的渲染区域，具有一定的布局规则。可以通过给元素设置overflow属性为auto或hidden来触发BFC。 在chrome浏览器中显示小于12px的文字，可以使用-webkit-text-size-adjust属性进行缩放。 常见的CSS选择器有标签选择器、类选择器、ID选择器、后代选择器等。可以继承的属性有color、font、text-related和line-related属性等。CSS选择器的优先级按照内联样式>内部样式表>外部样式表的顺序计算。 CSS3新增的伪类包括:first-child、:last-child、:nth-child等。 CSS选择器的权重按照内联样式>ID选择器>类选择器>标签选择器的顺序计算。 优化网页中大量图片加载很慢的方法包括使用图片懒加载、使用CSS精灵图、使用合适的图片格式等。 常见的行内元素有<span>、<a>、<img>等，块级元素有<div>、<p>、<h1>等。 浏览器的标准模式和怪异模式是指在解析HTML文档时遵循W3C标准和不遵循W3C标准的两种模式。标准模式下元素的渲染方式更接近标准规范。 Margin和padding分别用于设置元素外边距和内边距。 弹性盒子布局属性包括display、flex-direction、flex-wrap、flex-flow等，通过这些属性可以实现自适应的布局。 禁用标签可以通过给标签添加disabled属性实现。 Flex布局是一种弹性盒子布局，通过设置容器和子项的属性，可以快速实现各种复杂的布局效果。 px和rem都是长度单位，不同之处在于px是相对于屏幕分辨率的单位，而rem是相对于根元素字体大小的单位。 网页的三层结构一般包括头部(header)、内容区(content)和底部(footer)。 媒体查询通过媒体类型和媒体特性来判断输出设备的特性。可以使用@media关键字来定义媒体查询。 Rem的缺点是在一些老旧的浏览器中不被支持。 常见的兼容性问题包括不同浏览器对CSS属性和JavaScript方法的支持不同，不同设备的尺寸和分辨率不同等。 常见的垂直与水平居中方式包括使用绝对定位和负边距、使用表格布局、使用Flex布局等。 三栏布局方式包括使用浮动、使用绝对定位和使用Flex布局等。 两边固定中间自适应布局可以通过设置左右两侧宽度固定，中间宽度自适应的方式实现。 Doctype声明是指在HTML文档的开头标识文档类型和版本。它的作用是告诉浏览器使用哪种HTML规范来解析页面。 要实现一个三角形可以使用border和transparent等属性。 Rem的计算是相对于根元素字体大小的倍数进行计算。 JavaScript的基本数据类型包括undefined、null、boolean、number、string和object等。 判断数据类型可以使用typeof运算符、instanceof运算符和constructor属性等。 判断一个数据类型是否是数组可以使用Array.isArray方法。 以上是关于面试题的总结，涵盖了一些常见的知识点。希望对你有所帮助！