paddingme / front-end-web-development-interview-question Goto Github PK
View Code? Open in Web Editor NEW前端开发面试题大收集,前端面试集锦 :heart: :gift_heart: :cupid:
Home Page: https://fe.padding.me
前端开发面试题大收集,前端面试集锦 :heart: :gift_heart: :cupid:
Home Page: https://fe.padding.me
算法、大数据、Java、Android、前端工程师,产品经理招聘!!!坐标北京
内推请发简历到: [email protected]
MetaApp简介
233乐园,**最大的小游戏平台。上线一年内,完美兼容两百万款原生游戏和应用,吸引众多著名游戏开发商入驻,已经成为国内休闲游戏领域最受欢迎的产品之一。233乐园目前MAU数千万,每日时长超过QQ游戏大厅、TapTap、小米游戏大厅和360游戏大厅的总和。
MetaApp目前D轮融资,估值20亿***,扁平化管理,硅谷极客风;一年内DAU增长十倍,团队规模增长5倍,亿级潜在用户规模的平台,给你足够丰富的成长、发挥空间;零食饮料不限量供应、营养三餐丰富、高额住房补助、健身房、及各种团建Party等;
CSS部分(1.md)
15.Q:#example位置如何变化:
<p id="example">Hello</p>
#example {margin-bottom: -5px;}
A: 向上移动5px。
答案应该是后一个元素向上移动5px吧
这题的答案是正确的,这道题的前提是 “在HTML文本中”,HTML文本中的 root
总是指向 html 元素的。
在W3C中有明确的说明 : 请戳这里查看 CSS3 :root 选择器
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
#awesome .favorite:not(#awesome) .highlight {
color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
color: blue;
}
这里考察的是对CSS选择器优先级的掌握,答案应该是 red。
<div id="test1">
<span id="test2"></span>
</div>
#test1 {
display: none;
}
#test2 {
background-image: url('mypic.jpg');
visibility: hidden;
}
答案是 会被加载。这里考察的是CSS样式对背景图加载的影响,visibility: hidden
只是不显示,节点在文本流中仍然占有一席之位,背景图仍然会被加载。
#awesome .favorite:not(#awesome) .highlight
的特异性为 0, 2, 2, 0
#awesome .highlight:nth-of-type(1):nth-last-of-type(1)
的特异性为 0, 1, 3, 0
注意::not(X)
伪类选择器的特异性为其参数 X
的特异性,:not
伪类选择器本身不增加选择器的特异性。
我试了一下,是起作用的.我使用IE和chrome,以及firefox都试了一下.试的浏览器都不是低版本的,基本是最新的
题目中认为:
如果img设置了display:none,在页面载入时,图片会被下载;
如果img设置了visibility:hidden,在页面载入时,图片不会被下载。
而实际经过测试,无论设置什么属性,图片都是会被加载的。
23.md的最全前端面试问题及答案总结页面无法访问,可以参考 https://github.com/allenGKC/Front-end-Interview-questions/blob/master/README.md
我自己手动写代码实验,select option 对于 checked 没有效果,请再次确定下?
<p id="example">Hello</p>
#example {margin-bottom: -5px;}
A: 向上移动5px。
A: 我测试为啥位置不变,不过设置 margin-top 倒是都会变╮(╯_╰)╭
在线电子书:
react模式
nodejs基础教程
前端常见面试题汇总
答案是起作用
HTML 里的元素分为替换元素(replaced element)和非替换元素(non-replaced element)。
替换元素是指用作为其他内容占位符的一个元素。最典型的就是img,它只是指向一个图像文件。以及大多数表单元素也是替换,例如input等。
非替换元素是指内容包含在文档中的元素。例如,如果一个段落的文本内容都放在该元素本身之内,则这个段落就是一个非替换元素。
向行内非替换元素应用外边距对行高没有影响, 所以看上去是无效的, 对左右是有效果的。
向行内替换元素应用外边距会改变行高, 所以对于img input这样的替换元素, margin-top和margin-bottom是有效的
import React, { Component } from "react";
import { Switch, Route, Link, BrowserRouter as Router } from "react-router-dom";
import AddProduct from './components/AddProduct';
import Cart from './components/Cart';
import Login from './components/Login';
import ProductList from './components/ProductList';
import Context from "./Context";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
user: null,
cart: {},
products: []
};
this.routerRef = React.createRef();
}
render() {
return (
<Context.Provider
value={{
...this.state,
removeFromCart: this.removeFromCart,
addToCart: this.addToCart,
login: this.login,
addProduct: this.addProduct,
clearCart: this.clearCart,
checkout: this.checkout
}}
>
navbar-menu ${ this.state.showMenu ? "is-active" : "" }
}>A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.