前端基础知识汇总（一）

本系列文章将介绍开发基础知识，函给了前端、后端、算法、运维、中间件五大类。希望能给奋斗中的小伙伴们带来或多或少的帮助。

 

一、HTML/CSS相关问题

1. 什么是盒模型？如何在 CSS 中改变盒模型？

盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。在 CSS 中可以通过 box-sizing 属性设置盒模型，content-box 为标准盒模型，border-box 为 IE 盒模型。

2. display: none 与 visibility: hidden 的区别？

display: none 将元素从文档流中移除，不占据空间；visibility: hidden 元素不可见，但仍然占据原来的空间。

3. 如何实现水平垂直居中？

多种方式可实现居中，如 flex 布局：

.parent {

    display: flex;

    justify-content: center;

    align-items: center;

}

4. 解释 CSS 选择器的优先级规则。

优先级从高到低依次是：!important > 内联样式 > ID 选择器 > 类、伪类和属性选择器 > 标签选择器 > 通配符选择器 > 继承的样式。

5. position: absolute 和 position: fixed 的区别？

absolute 相对于最近的定位父元素进行定位；fixed 相对于视口进行定位，不随页面滚动。

6. 什么是 BFC (Block Formatting Context)？

BFC 是一种布局机