【持续..】WEB前端面试知识梳理 - CSS部分-优快云博客

本文深入解析前端面试中常考的CSS盒模型、BFC、定位方式及link与@import的区别，帮助开发者巩固基础知识，提升面试竞争力。

传送门：

最近在看大厂的一些面试题，发现很多问题都是平时没有在意的，很多知识都是知道一点但又很模糊说不出个所以然来，反思自己这几年来貌似只是为了工作而工作，忽略了很多本该了解的基础知识，基础知识不牢固导致进步很慢，借这次机会空闲的时候恶补一下，慢慢梳理并记录下来。

=================================================

盒模型

概念

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不支持。