位置: IT常识 - 正文
2023前端面试题集（含答案）之HTML+CSS篇（一）(2023前端面试题目)
编辑：rootadmin推荐整理分享2023前端面试题集（含答案）之HTML+CSS篇（一）(2023前端面试题目)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:2023前端面试题总结,2023前端面试题百度云,2023前端面试题目,2023前端面试题手册,2023前端面试题总结,2023前端面试题目100及最佳答案,2023前端面试题目100及最佳答案,2023前端面试题目100及最佳答案,内容如对您有帮助，希望把文章链接给更多的朋友！
在又到了金三银四的招聘季，不管你是刚入行的小白，亦或是混迹职场的老鸟，还在为面试前端工程师时不知道面试官要问什么怎么回答而苦恼吗？为了帮助你获得面试官的青睐，顺利通过面试，跳槽进入大厂，走上人生巅峰，整理了一些前端面试，希望对在面试中或学习工作中的你有所帮助！
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(x，y)、旋转rotate(x，y)、翻转skew(x，y)、缩放scale(x，y)；
3D转换：translate3d(tx，ty，tz)、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；
新增获取用户地理位置定位API：Geolocation。
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 root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
默认定位static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index
上一篇：使用css3实现一个超浪漫的新年倒计时(css3题目)
下一篇：Word2Vec【附代码】(word2vec使用方法)
