2022常见前端基础面试题(含答案)一
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文件
更多关于前端培训的问题,欢迎咨询千锋教育在线名师,如果想要了解我们的师资、课程、项目实操的话可以点击咨询课程顾问,获取试听资格来试听我们的课程,在线零距离接触千锋教育大咖名师,让你轻松从入门到精通。