wstreet / blog

Site is published at https://wstreet.github.io/blog/

Hi there 👋

• 🔭 Blog: https://wstreet.github.io/blog
• 🌱 数据可视化学习: https://www.yuque.com/streetex/fbqzli
• 👯 前端进阶: https://www.yuque.com/streetex/msp6tb
• ✨ Github数据大屏: https://wstreet7.gitee.io/x-screen/#/
• 🚗 go-blog: https://github.com/wstreet/go-blog

技术栈

blog's Issues

Docker学习资料

Docker — 从入门到实践

面试题收藏

HTML

• front-end-interview-handbook/html
• front-end-interview-html

CSS

• front-end-interview-css
• 50道CSS基础面试题（附答案）
• 《50道CSS基础面试题（附答案）》中的答案真的就只是答案吗？
• CSS 面试题总结
• front-end-interview-handbook/css

JavaScript

• front-end-interview-js
• JS深入系列
• JS专题系列

React

• React
• React

webpack

• 前端面试之webpack面试常见问题
• webpack源码之loader机制
• 深入理解webpack

面试题

• 前端面试题及答案整理-Fcheng
• 前端面试题及答案整理(二)-Fcheng

浏览器

• 你真的了解回流和重绘吗？
• 浏览器相关

threejs学习资料

官方文档
Three.js 现学现卖
ThreeJS 学习笔记
WebGL three.js学习笔记
如何系统的学习three.js？

Nginx学习资料

Nginx开发从入门到精通
一文弄懂Nginx的location匹配
前端想要了解的Nginx

css面试题收集

1. 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

• 盒模型由content、padding、border、margin组成，
• 标准模型中盒模型的宽高只是内容（content）的宽高，
• IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高

2. box-sizing属性

• 用来控制元素的盒子模型的解析模式，默认为content-box
• context-box：W3C的标准盒模型，设置元素的 height/width 属性指的是content部分的高/宽
• border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

3. 解释一下BFC

定义： 块级格式化上下文，它是一个独立的渲染区域，规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
规则：

• 内部的Box会在垂直方向，一个接一个地放置
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

4. 那些元素会生成BFC
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

5. 解决垂直外边距合并的几种办法

1. 父容器：border：1px solid;（不能是0px）
2. 父容器：overflow: hidden;（或auto）
3. 父容器：padding：1px；（不能是0或auto，其他的任意数值都可以）
4. 父容器或子容器： float：left；（不能是auto）
5. 父容器或子容器：position：absolute；
6. 子容器：display：inline-block;(或是inline-table)
7. 相邻元素：任意一个添加float：left（不能是auto）