位置: 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使用方法)

  • 什么是试算平衡?如何进行试算平衡
  • 印花税的计税依据怎么算公式
  • 滴滴的发票能不能作废
  • 模具费入什么会计科目
  • 银行承兑汇票到期日期怎么算
  • 尚未收到货款,填什么凭证
  • 无货源发货如何填写物流单
  • 以前年度损益调整会计分录
  • 股息红利税补缴什么意思
  • 企业所得税的征税对象包括
  • 企业网银电子商务收入是什么
  • 集团股份怎么分配
  • 营改增广告标牌制作的税务怎么处理
  • 房屋租赁违法
  • 什么时候需要计提税金及附加
  • 普票冲红需要收回全部联次吗
  • 试运营和正式运营间隔
  • 金蝶k3币别汇率类型设置
  • 个税更正申报需要逐月更正吗
  • 个体户网上报税流程视频
  • 质押股票是否缴印花税
  • 往年计提有误 跨年处理
  • 个人承包集体企业违法吗
  • 企业所得税季初人数
  • 销售费用占收入比例叫什么
  • 出租商品计入什么科目
  • 景区门票定价方法
  • 贴吧热门评论
  • 蟹爪兰的养殖方法和浇水
  • win7纯净版本
  • phpcms怎么用
  • wordpress添加css
  • 交易性金融资产的账务处理
  • blkid命令详解
  • Apache PHP MySql安装配置图文教程
  • 出口退税退运费的税吗
  • 开具红字发票资料清单
  • 可转债公允价值变动计入
  • PhoneGap was accuriqed by adobe
  • 新公司开账户需要多少钱
  • 买新车检测费
  • sql将一个表中的值赋给另一个表
  • 所得税申报表的营业成本包括哪些
  • 三证合一指的是什么意思
  • 清算中的资产损失
  • 申报要补税怎么办
  • 预留印鉴章是什么章
  • 房地产企业土地增值税预缴
  • 计提职工薪酬是什么意思
  • 社保下个月扣款
  • 转贴现占谁的授信
  • 规划设计费收费依据
  • 建筑企业开具增值税发票
  • 连接mysql服务命令
  • mysqldump导出csv文件
  • win8.1使用
  • linux运维常用命令汇总
  • mac在哪看
  • win8一直配置更新
  • 一个项目引多个项目
  • log4j 日志文件太大
  • python 编码声明
  • unity配置安卓sdk
  • opengl示例
  • 提高网页的效率的方法有
  • 安卓优化清理大师怎么样
  • pythonjam怎么用
  • math在java
  • nodejs回调函数例子 getdata check
  • js中的set
  • javascript中的函数
  • easyui formatter
  • javascript标签大全
  • listview添加数据
  • python3.9.1怎么用
  • 总局公告2011年第34号
  • 支付宝怎么样开通刷脸支付
  • 日照公交305发车时间表
  • 辽宁朝阳丧葬费标准2022
  • 企业所得税零申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设