paddingme / front-end-web-development-interview-question Goto Github PK

我试了一下,是起作用的.我使用IE和chrome,以及firefox都试了一下.试的浏览器都不是低版本的,基本是最新的

CSS部分(1.md)
15.Q:#example位置如何变化：

<p id="example">Hello</p>
#example {margin-bottom: -5px;}

A: 向上移动5px。
答案应该是后一个元素向上移动5px吧

https://github.com/qdleader/qdleader

在线电子书:
react模式
nodejs基础教程
前端常见面试题汇总

微信小程序在线阅读，扫码阅读：

题目中认为：
如果img设置了display:none，在页面载入时，图片会被下载；
如果img设置了visibility:hidden，在页面载入时，图片不会被下载。

而实际经过测试，无论设置什么属性，图片都是会被加载的。

1. Q:#example位置如何变化：

<p id="example">Hello</p>

#example {margin-bottom: -5px;}

A: 向上移动5px。

A: 我测试为啥位置不变，不过设置 margin-top 倒是都会变╮(╯_╰)╭

#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 伪类选择器本身不增加选择器的特异性。

算法、大数据、Java、Android、前端工程师，产品经理招聘！！！坐标北京

内推请发简历到： [email protected]

MetaApp简介
233乐园，**最大的小游戏平台。上线一年内，完美兼容两百万款原生游戏和应用，吸引众多著名游戏开发商入驻，已经成为国内休闲游戏领域最受欢迎的产品之一。233乐园目前MAU数千万，每日时长超过QQ游戏大厅、TapTap、小米游戏大厅和360游戏大厅的总和。

MetaApp目前D轮融资，估值20亿***，扁平化管理，硅谷极客风；一年内DAU增长十倍，团队规模增长5倍，亿级潜在用户规模的平台，给你足够丰富的成长、发挥空间；零食饮料不限量供应、营养三餐丰富、高额住房补助、健身房、及各种团建Party等；

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
}}
>

这个专题已经找不到了

CSS 部分问题与解答中

6. 在HTML文本中，伪类:root总是指向html元素？

这题的答案是正确的，这道题的前提是 “在HTML文本中”，HTML文本中的 root 总是指向 html 元素的。
在W3C中有明确的说明 ： 请戳这里查看 CSS3 :root 选择器

14. 如下代码中文本“Sausage”的颜色是?

<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。

18. mypic.jpg 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>

#test1 {
    display: none;
}
#test2 {
    background-image: url('mypic.jpg');
    visibility: hidden;
}

答案是 会被加载。这里考察的是CSS样式对背景图加载的影响，visibility: hidden 只是不显示，节点在文本流中仍然占有一席之位，背景图仍然会被加载。

RT：http://www.lucida.me/blog/lean-technical-resume/

答案是起作用
HTML 里的元素分为替换元素（replaced element）和非替换元素（non-replaced element）。
替换元素是指用作为其他内容占位符的一个元素。最典型的就是img，它只是指向一个图像文件。以及大多数表单元素也是替换，例如input等。
非替换元素是指内容包含在文档中的元素。例如，如果一个段落的文本内容都放在该元素本身之内，则这个段落就是一个非替换元素。
向行内非替换元素应用外边距对行高没有影响, 所以看上去是无效的, 对左右是有效果的。
向行内替换元素应用外边距会改变行高, 所以对于img input这样的替换元素, margin-top和margin-bottom是有效的

23.md的最全前端面试问题及答案总结页面无法访问，可以参考 https://github.com/allenGKC/Front-end-Interview-questions/blob/master/README.md

我自己手动写代码实验，select option 对于 checked 没有效果，请再次确定下？