seo诊断网站免费诊断平台,移动互联网应用程序信息服务管理规定,公司一个人做网站,海报设计的基本要素在又到了金三银四的招聘季#xff0c;不管你是刚入行的小白#xff0c;亦或是混迹职场的老鸟#xff0c;还在为面试前端工程师时不知道面试官要问什么怎么回答而苦恼吗#xff1f;为了帮助你获得面试官的青睐#xff0c;顺利通过面试#xff0c;跳槽进入大厂#xff0c;…在又到了金三银四的招聘季不管你是刚入行的小白亦或是混迹职场的老鸟还在为面试前端工程师时不知道面试官要问什么怎么回答而苦恼吗为了帮助你获得面试官的青睐顺利通过面试跳槽进入大厂走上人生巅峰整理了一些前端面试希望对在面试中或学习工作中的你有所帮助
01、CSS3的新特性
盒子阴影box-shadow
边框边框圆角 border-radius、边框背景图片 border-image
IE怪异盒模型box-sizing:border-box
背景背景图片尺寸background-size、规定背景图片的位置相对于什么位置来定位background-origin、背景的绘制区域background-clip
弹性布局flex
渐变线性渐变linear-gradient、径向渐变radial-gradient
过渡效果transition
2D转换transform移动translate(xy)、旋转rotate(xy)、翻转skew(xy)、缩放scale(xy)
3D转换translate3d(txtytz)、rotate3d(x, y, z, a)、scale3d(sx, sy, sz)、perspective(l)等
自定义动画animation
媒体查询media。
02、H5的新增特性
新增语义化标签header、nav、article、section、aside、footer
新增数据存储方法sessionStorage、localStorage
新增视频 video 标签和音频 audio 标签
新增绘画canvas和svg元素
新增input标签的type属性类型date、time、month、email、url、search、range、color、number
新增表单input元素验证required、pattern
新增获取用户地理位置定位APIGeolocation。
03、简述盒模型
盒模型分为两种标准盒模型W3C盒模型和怪异盒模型IE盒模型。
盒模型是依次由margin外边距 border边框 padding内边距 content内容组成的。
标准盒模型的width指的是内容content的宽度height指的是内容content的高度怪异盒模型IE盒模型的width指的是content内容 padding内边距 border边框的总宽度height也是同样。
在IE浏览器的IE6、IE7、IE8版本中会触发怪异模式IE盒模型在其它浏览器中默认为W3C标准模式。标准W3C盒模型的CSS属性为box-sizing: content-box怪异IE盒模型的CSS属性为box-sizing: border-box。
04、link标签和import的区别
link 属于 html 标签可以加载css文件还可以定义RSS、rel连接属性等而import 是 css 提供的是有导入样式的作用。
页面被加载时link 会同时被加载而import 引用的 css 会等到页面加载结束后加载。
link 是 html 标签因此没有兼容性而import 只有 IE5 以上才能识别。
link 方式样式的权重高于import 的。
link可以使用js动态创建并导入import则不行。
05、水平垂直居中的实现方式
CSS中实现元素水平垂直居中的几种方法总结总有一种适合你
06、CSS中的BFC
一文弄懂CSS中的BFC
07、块元素和行元素区别
行内元素会在一行上显示当此行上剩余的空间无法承载当前的行内元素时此行内元素才会在新的一行上显示每个元素是水平排列的每个块级元素各占据一行每个元素时竖直方向排列的。
块级元素可以包含行内元素和块级元素宽度默认100%即和浏览器同宽。行内元素不能包含块级元素。
行内元素与块级元素属性的不同主要是盒模型属性上。
常见的块元素有div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、header、section、article、footer等。
常见的行元素以及行内块元素有span、img、a、label、input、em、i、textarea、select、strong等。
转为块元素display: block;
转为行元素display: inline;
转为行内块元素display: inline-block。
08、高度塌陷和清除浮动
高度塌陷
标准的文档流在不给父元素设置高度的情况下父元素的高度是由子元素撑开的子元素多高父元素就多高但当子元素设置浮动后子元素会脱离标准文档流从而导致不占位置父元素的高度就会变为 0这种现象叫做高度塌陷。
高度塌陷大部分都是由子元素脱标不占位置导致的父元素高度的丢失一般在子元素浮动后会产生高度塌陷。所以解决的办法可以使用清除浮动的方式来解决。
清除浮动的方式
浮动的元素会脱离标准文档流脱离标准文档流的元素在文档流中不占位置。
给浮动元素的父元素设置高度 给父元素设置overflow: hidden属性 在父元素内部的最后面添加一个块级元素的空标签并给这个空标签设置clear: both 单伪元素:
.clearfix::after { content: ; clear: both; display: block; height: 0; visibility: hidden; zoom: 1;
}双伪元素(推荐使用)
.clearfix::before, .clearfix::after { content: ; clear: both; display: block; height: 0; visibility: hidden; zoom: 1;
}09、position的属性及作用
position 几个属性一般都要配合left、“top”、right以及 “bottom” 属性使用。
相对定位relative如果对一个元素进行相对定位它将出现在它所在的位置上。然后可以通过设置垂直或水平位置让这个元素“相对于”它的起点进行移动。在使用相对定位时无论是否进行移动元素仍然占据原来的空间。因此移动元素会导致它覆盖其它元素。
绝对定位absolute绝对定位的元素的位置相对于最近的已定位父元素如果元素没有已定位的父元素那么它的位置相对于。absolute 定位使元素的位置与文档流无关因此不占据空间。absolute 定位的元素和其他元素重叠。
固定定位fixed元素的位置相对于浏览器窗口是固定位置即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关因此不占据空间。Fixed 定位的元素和其他元素重叠。
粘性定位sticky元素先按照普通文档流定位然后相对于该元素在流中的 flow rootBFC和 containing block最近的块级祖先元素定位。而后元素定位表现为在跨越特定阈值前为相对定位之后为固定定位。
默认定位static默认值。没有定位元素出现在正常的流中忽略 top, bottom, left, right 或者 z-index 声明。
inherit规定应该从父元素继承 position 属性的值。
10、实现元素隐藏的方法
设置透明度为0opacity: 0 元素显示设为无display: none在网页中不占位置 隐藏元素visibility: hidden网页中依然占据位置 让元素缩小到0transform: scale(0) 设置元素的层级z-index: 9999元素需要设置position: absolute。
11、css reset的作用
重置浏览器的css默认属性因为各个品牌浏览器的默认样式不用使用css reset重置使在各个浏览器上样式统一。
12、css sprites(css精灵)的作用
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去这样一来当访问该页面时载入的图片就不会像以前那样一幅一幅地慢慢显示出来了减轻服务器对图片的请求数量。原理就是利用CSS的background-image、background- repeat、background-position的组合进行背景定位background-position可以用数字精确的定位出背景图片的位置。
13、css有哪些选择器优先级如何
主要的选择器有id、class、标签、伪元素、伪类、属性选择、通配符、继承等。
同一元素引用了多个样式时排在后面的样式属性的优先级高
样式选择器的类型不同时优先级顺序为id 选择器 class 选择器 标签选择器
标签之间存在层级包含关系时后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低至少比标签选择器的优先级低
带有!important 标记的样式属性的优先级最高
样式表的来源不同时优先级顺序为内联样式 内部样式 外部样式 浏览器用户
自定义样式 浏览器默认样式。
优先级important 行内样式 id class 标签/伪类/属性选择 伪元素 继承 通配符
14、transition和animation的区别
transition 是过渡效果只有两个状态起始状态和结束状态主要强调样式值的变化过程不可设置中间状态需要某个事件的触发例如鼠标经过、点击等。
animation 是动画也叫关键帧可以设置多个关键帧可以再任意一个中间帧设置状态不需要依附事件的触发就可以自动执行。
15、css去掉iPhone的默认按钮样式
input[typebutton],
input[typesubmit],
input[typereset] {-webkit-appearance: none;
}
textarea { -webkit-appearance: none;
}16、Doctype的作用
DOCTYPE标签是一种标准通用标记语言的文档类型声明它的目的是要告诉标准通用标记语言解析器它应该使用什么样的文档类型定义DTD来解析文档。只有确定了一个正确的文档类型超文本标记语言或可扩展超文本标记语言中的标签和层叠样式表才能生效甚至对JavaScript脚本都会有所影响。
标签完整格式为!DOCTYPE。
17、严格模式和混杂模式的区别
标准模式是指浏览器按照W3C的标准对文档进行解析和渲染怪异模式浏览器按照旧有的、非标准的实现方式对文档进行解析和渲染。浏览器解析时到底使用标准模式还是怪异模式与你网页中的文档类型定义DTD声明直接相关文档类型定义DTD声明定义了标准文档的类型标准模式解析文档类型会使浏览器使用相应的方式加载网页并显示忽略文档类型定义DTD声明,将使网页进入怪异模式。
为什么会产生这两种模式呢?
现代的浏览一般都有两种渲染模式标准模式Standard Mode和怪异模式Quirks Mode。在标准模式下浏览器按照HTML和CSS标准对文档进行解析和渲染而在怪异模式下浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染对于旧有的网页浏览器就会启动怪异模式能够使得旧网页正常显示。
触发严格模式:
!-- HTML 4.01 严格型 --!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd!-- XHTML 1.0 严格型 --!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd触发混杂模式
!-- HTML 4.01 过渡型 --!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//ENhttp://www.w3.org/TR/html4/loose.dtd!-- HTML 4.01 框架集型 --!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//ENhttp://www.w3.org/TR/html4/frameset.dtd!-- XHTML 1.0 过渡型 --!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd!-- XHTML 1.0 框架集型 --!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd18、双边距重叠问题(外边距折叠)
多个相邻兄弟或者父子关系普通流的块元素垂直方向 marigin 会重叠。
折叠的结果为
两个相邻的外边距都是正数时折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时折叠结果是两者绝对值的较大值。
两个外边距一正一负时折叠结果是两者的相加的和。
19、清除元素模式转化为行内块后出现的缝隙
元素的模式转换为行内块后行内块元素之间会产生缝隙往往是因为代码换行导致的。
给父元素设置 font-size:0;给行内块元素重新设置 font-size 大小推荐 给行内块元素设置左外边距或右外边距并将值设置为负值 使用 display:table;和 display:table-cell;属性代替 display:inline-block; 在父元素上设置 display:flex;属性推荐 手动删除行内块之间的换行。
20、rgba()和opacity的透明效果区别
rgba()和 opacity 都能实现透明效果但最大的不同是 opacity 作用于元素以及元素内的所有内容的透明度rgba() 只作用于元素的颜色或其背景色。设置 rgba 透明的元素的子元素不会继承透明效果
总结
感谢您的阅读本篇文章就先总结到这里近期会一直更新web前端的面试包括htmlcss、js、es6、vue等专题内容希望这些前端知识对您面试或者工作学习中有所帮助提升。想要文章您可以移步到wxgzh【前端胡说】的菜单栏【优质文章】中观看阅读。
原文链接2023前端面试题集含答案之HTMLCSS篇一
