共计 1714 个字符，预计需要花费 5 分钟才能阅读完成。
传送门：
基础知识梳理 – css 部分基础知识梳理 – JS 部分
最近在看大厂的一些面试题，学习巩固下这些基础知识。
=================================================
盒模型
概念
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，有 W3C 标准盒模型和 IE 怪异盒模型两种，由里到外分别包含：content(内容)，padding(内边距)，border(边框)，margin(外边距)
标准模型和怪异模型
区别：两种盒模型的内容计算方式不同
w3c 标准盒模型：总元素宽度 = content 部分的宽度 总元素高度 = content 部分的高度
IE（怪异）盒模型：总元素宽度 = content + padding + border 这三个部分的宽度 总元素高度 = content + padding + border 这三个部分的高度
开发中常用哪种模型？为什么？
常用 IE 盒模型，因为使用了 IE 盒模型的布局更可控。举例 1：因为如果想保持一个盒子的真实占有宽度不变，那么加 width 的时候就要相应的减少左右的 padding。加 padding 的时候就要相应的减少 width，不然就会导致盒子真实占有宽度增加，导致布局发生改变，比如同一行的盒子因为宽度超出被挤下去了。
举例 2：移动端布局采用百分比的情况很常见，如果有两个 div 宽度分别为 50%，横向排列，这时候如果给其中一个 div 加固定的 border 值（非百分比），还要保证两个 div 横向排列不掉下来，并且真实占有宽度不发生改变，这种情况下如果用 IE 盒模型就方便的多，不用过多调整，直接加 border 值就好。
改变容器的盒模型组成方式
借助 css3 的 box-sizing 属性
box-sizing: content-box; //W3C 盒模型
box-sizing: border-box; //IE 盒模型
BFC
BFC: 一个独立的渲染区域，它规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干，在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC 布局特点：
内部的 Box 会在垂直方向，一个接一个地放置。
Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
每个元素的最左边，与包含块的最左边相接触 (对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC 的区域不会与浮动盒子重叠。
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算 BFC 的高度时，浮动元素也参与计算
哪些元素会生成 BFC?
float 属性不为 none
position 为 absolute 或 fixed
display 为 inline-block, table-cell, table-caption, flex, inline-flex
overflow 不为 visible
应用
1. 自适应两栏布局 2. 清除内部浮动 3. 防止垂直 margin 重叠
关于定位
position 定位的几种方式以及主要区别？
static(静态定位)：默认值，不脱离文档流
relative(相对定位)：元素相对自身偏移某个位置定位，不脱离文档流，会引起
absolute(绝对定位)：相对于其最近的父级块元素定位，脱离文档流
fixed(固定定位)：相对于可视窗口定位，脱离文档流
relative 和 translate 都是基于自身的移动，有什么区别？
translate 不会引起页面的重排，但 relative 会引起重排
link 与 @import 的区别
扩展：文章传送门
从属关系区别：link 是 HTML 标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。@import 是 CSS 语法，只有导入样式表的作用；
加载顺序区别 link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载。
兼容性区别 link 标签作为 HTML 元素，不存在兼容性问题。@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；
DOM 可控性区别 通过 JavaScript 可以动态创建或者删除 <link> 标签，进而操作 CSS @import 不支持。
