位置: IT常识 - 正文

2023前端面试题集(含答案)之HTML+CSS篇(一)(2023前端面试题目)

编辑:rootadmin
2023前端面试题集(含答案)之HTML+CSS篇(一)

推荐整理分享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的区别2023前端面试题集(含答案)之HTML+CSS篇(一)(2023前端面试题目)

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

本文链接地址:https://www.jiuchutong.com/zhishi/300211.html 转载请保留说明!

上一篇:使用css3实现一个超浪漫的新年倒计时(css3题目)

下一篇:Word2Vec【附代码】(word2vec使用方法)

  • 微信营销推广方法12种(微信营销推广方案模板)

    微信营销推广方法12种(微信营销推广方案模板)

  • 支付宝收藏在哪里(支付宝里面的收藏在哪)

    支付宝收藏在哪里(支付宝里面的收藏在哪)

  • 微信视频号转发记录怎么查看(微信视频号转发到QQ)

    微信视频号转发记录怎么查看(微信视频号转发到QQ)

  • 漫步者耳机怎么适配苹果(漫步者耳机怎么查询真伪)

    漫步者耳机怎么适配苹果(漫步者耳机怎么查询真伪)

  • 快手怎么关掉自己的ID(快手怎么关掉自动刷视频)

    快手怎么关掉自己的ID(快手怎么关掉自动刷视频)

  • 如何设置无线路由器(如何设置无线路由器信号穿墙模式)

    如何设置无线路由器(如何设置无线路由器信号穿墙模式)

  • 喜马拉雅上传音频审核未通过怎么办

    喜马拉雅上传音频审核未通过怎么办

  • 荣耀30pro和华为p40pro区别(荣耀30Pro和华为P50那个好)

    荣耀30pro和华为p40pro区别(荣耀30Pro和华为P50那个好)

  • 短视频垂直度什么意思(视频垂直度是啥意思)

    短视频垂直度什么意思(视频垂直度是啥意思)

  • 微信上的共享位置可以自己设置吗(微信上的共享位置如何修改公司地址)

    微信上的共享位置可以自己设置吗(微信上的共享位置如何修改公司地址)

  • 微信登录设备管理为什么有人登录(微信登录设备管理显示登录过)

    微信登录设备管理为什么有人登录(微信登录设备管理显示登录过)

  • ios11怎么改手机铃声(苹果11修改)

    ios11怎么改手机铃声(苹果11修改)

  • 台式电脑频繁死机怎么办(台式电脑频繁死机画面卡住不动)

    台式电脑频繁死机怎么办(台式电脑频繁死机画面卡住不动)

  • 手机怎么拦截广告(手机怎么拦截广告弹窗vivo)

    手机怎么拦截广告(手机怎么拦截广告弹窗vivo)

  • 华为荣耀手机怎么分屏(华为荣耀手机怎么恢复出厂设置)

    华为荣耀手机怎么分屏(华为荣耀手机怎么恢复出厂设置)

  • 怎么把u盘文件编号(怎么把u盘文件夹的东西拖到根目录)

    怎么把u盘文件编号(怎么把u盘文件夹的东西拖到根目录)

  • 苹果x有nfc功能嘛(苹果x有NFC功能吗)

    苹果x有nfc功能嘛(苹果x有NFC功能吗)

  • plktl01是什么型号(荣耀7plk-ul00)

    plktl01是什么型号(荣耀7plk-ul00)

  • 抖音怎么看完整文字(抖音怎么看完整版电影)

    抖音怎么看完整文字(抖音怎么看完整版电影)

  • 淘宝怎么撤销投诉(淘宝怎么撤销投诉商家 手机淘宝举报投诉)

    淘宝怎么撤销投诉(淘宝怎么撤销投诉商家 手机淘宝举报投诉)

  • 饿了么如何送外卖(饿了么外卖怎么送)

    饿了么如何送外卖(饿了么外卖怎么送)

  • Win10再曝bug 使用Chrome浏览器访问特定路径立即蓝屏(windows 10 bug)

    Win10再曝bug 使用Chrome浏览器访问特定路径立即蓝屏(windows 10 bug)

  • 一文通俗讲解元学习(Meta-Learning)(元的解释是什么?)

    一文通俗讲解元学习(Meta-Learning)(元的解释是什么?)

  • 老项目增值税简易计税
  • 企业自产的产品转为自用
  • 基于法律行为的物权变动三要件
  • 建筑业老项目如何界定
  • 开票系统技术维护费怎么抵扣
  • 实收资本认缴怎么缴纳印花税
  • 进销存账需要合并吗
  • 税务申报我的待办是空的
  • 工资薪金所得和全年一次性奖金
  • 合伙企业对外长期股权投资收到分红 怎么处理
  • 所有逾期未抵扣进项税额
  • 未能及时取得成功的成语
  • 进出口公司如何避税
  • 租的办公室要交税么
  • 公司没有收入没开发票
  • 工业企业增值税缓交政策
  • 小规模定期定额计税依据
  • 产假期间工资如何发放
  • 卖房土地增值税税率
  • 企业所得税报表模板
  • 机构信用代码证是三证合一里的吗
  • 境外单位或者个人
  • 应收账款怎么样转入以前年度损益调整
  • 对公账户网银证书有效期多久
  • 外贸企业出口收入确定
  • 其他债券投资出售时交易费用
  • 可转换公司债券账务处理
  • 配股条件是什么意思
  • sharedprem.exe - sharedprem是什么进程 有什么作用
  • 在php中,字符串有哪些表示形式
  • 营改增会计分录
  • php简单实例
  • 安装prophet
  • 行政单位预算外资金收入上缴财政专户的方式不包括
  • ipad最长使用时间
  • 欧罗巴山国家公园旅游攻略
  • PHP:imageconvolution()的用法_GD库图像处理函数
  • php多级分类
  • 经营租入固定资产
  • 人工智能lisp
  • ntpd命令详解
  • 公司买东西了怎么做账
  • 一张专票可以开几项
  • 收取房屋租赁费的会计分录
  • 待处理财产损溢在资产负债表中填哪里
  • 结余资金包括结转资金吗?
  • 原值净值怎么算
  • 应税销售额什么意思
  • 建筑公司异地施工
  • 收到工程进度款怎么做分录
  • 会计做账的凭据是什么
  • 企业被列入经营异常名录可以注销吗
  • 可供出售金融资产包括哪些内容
  • 无发票的费用怎么处理
  • 水利建设基金怎么交
  • sql like多个
  • mysql远程用户登录
  • Sqlserver 2000/2005/2008 的收缩日志方法和清理日志方法
  • 在windows中在下列叙述中正确的是
  • mac怎么打开mac系统
  • linux文件系统管理命令
  • linux shell 常用命令大全
  • window8系统好用吗
  • win7系统怎么创建虚拟网络
  • windows8 defender
  • win8关机慢怎么办
  • win10 directx9
  • win8系统如何恢复出厂设置
  • unity 3d
  • shell脚本题
  • bash foreach
  • js日期操作
  • jQuery tagsinput在h5邮件客户端中应用详解
  • js使用类
  • 国企巡查都巡查哪些内容
  • 社保和税局关联后还要申报吗
  • 开专票必须要有规格型号吗
  • 国家税务总局16号文件
  • 税务函调回来几天可以退税
  • 集体产权房产证怎么办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设