千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 2022常见前端基础面试题(含答案)一

2022常见前端基础面试题(含答案)一

来源:千锋教育
发布人:syq
时间: 2022-08-11 09:53:23 1660182803

  1.css选择器提取a标签中的href

常见前端基础面试题

  CSS 当中可以通过 attr() 来获取,比如显示所有链接的 href:

```css

a:after {

  content: " (" attr(href) ")";

}

``` 

#

  2.padding-top: 50%的效果,margin-top: 50%的效果

  - padding-top:50%;的效果是 基于父元素宽度的一半

  - margin-top:50%;的效果:在没有出现垂直外边距重合与溢出的情况下分为两种情况:

  - 情况一: 当是两个并列元素中添加margin-top:50%;是距离是浏览器宽度的一半

  - 情况二:当是嵌套元素中子元素添加了margin-top:50%; 是子元素距离父元素高度的一半

  3.table了解多少?

  在网页发展的初期,会用表格来实现网页布局,但这种布局方式会让网页出现很多问题,逐渐不再用于网页布局结构中,现在表格标签一般用于数据展示。而且在公司项目开发中,很多都不是直接使用table,而是使用ui组件库中封装了的表格,比如el-table。table表格中常用的标签有tr/td/th/caption等等。table布局作为基础的内容就类似于生活整的基础设施一样虽然使用频率低,但是不会被淘汰

  4.弹性盒有哪些属性是在父元素身上?那些在子元素身上?你知道flex-grow吗?

  - 添加在父级元素上的属性:

  - 1.flex-direction 设置弹性盒的主轴方向

  - 2.justify-content 设置主轴上的对齐方式

  - 3.align-items:设置侧轴上的对齐方式

  - 4.flex-wrap:设置弹性盒中默认换行

  - 5.justify-content:换行之间行与行之间的间距设置

  - 添加在子级元素上的属性

  - 1.align-self:设置单个元素在侧轴上的对齐方式

  - 2.order:设置元素的排序优先级

  - 3.flex:1 占据主轴上剩下空间

  5.精灵图和base64如何选择?

  精灵图,是网页处图图片的一种方式,它是把多张小图整合到一张,利用background-position属性定位某个图片的位置,来达到在大图片中引用某个小图片的效果,当页面访问时,可以减少向服务器的yg有求次数,提高页面的加载速度。

  base64,是网络上最常见的用于传输8Bit字节代码的编码方式之一,将原本二进制形式转成以64个字符基本单位,所组成的一串字符串。base64的图片会随着html或者css一起下载到浏览器,减少了请求,避免跨域问题,但是低版本的IE浏览器不兼容,体积比原来的图片大,不利于css的加载,所以如果是图比较大,就用精灵图合并为一张大图,使用base64直接把图片编码成字符串写入CSS文件

  更多关于前端培训的问题,欢迎咨询千锋教育在线名师,如果想要了解我们的师资、课程、项目实操的话可以点击咨询课程顾问,获取试听资格来试听我们的课程,在线零距离接触千锋教育大咖名师,让你轻松从入门到精通。

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT