Css部分

Css盒模型的理解：

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。

一共两种盒模型

标准盒模型：盒子总宽度/高度 = width/height + padding + border + margin

IE盒子模型：盒子总宽度/高度 = width/height + margin

       

外边距合并

只有 margin 上下的边距会合并，左右的边距不会合并

BFC(块级格式化上下文)

得分点

块级格式化上下文、独立的渲染区域、不会影响边界以外的元素、形成BFC条件、float、position、overflow、display

标准回答

BFC 块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。

BFC布局规则 -内部盒子会在垂直方向，一个接一个地放置。 -Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 -每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

-BFC的区域不会与float box重叠。 -BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 -计算BFC的高度时，浮动元素也参与计算。

BFC形成的条件 -`float `设置成 `left `或 `right` -`position `是`absolute`或者`fixed` -`overflow `

 BFC解决能的问题：清除浮动

加分回答

BFC的方式都能清除浮动，但是常使用的清除浮动的BFC方式只有`overflow:hidden`,原因是使用float或者position方式清除浮动，虽然父级盒子内部浮动被清除了，但是父级本身又脱离文档流了，会对父级后面的兄弟盒子的布局造成影响。如果设置父级为`display:flex`，内部的浮动就会失效。所以通常只是用`overflow: hidden`清除浮动。

IFC(行内格式化上下文)

IFC基本概念

IFC 原理(渲染规则|布局规则)：

(1)内部的 Box 会在水平方向，从含块的顶部开始一个接着一个地放置；

(2)这些 Box 之间的水平方向的 margin，border 和padding 都有效；

1. Box 垂直对齐方式：以它们的底部、顶部对齐，或以它们里面的文本的基线(baseline)对齐(默认，文本与图片对齐)，例：line-heigth 与 vertical-align。

设定的宽度不包括边框和padding如何操作：

正常设置宽度就不包括border和padding

追问：那怎么才能包括呢

border:none 和border:0 的区别

性能差异

border:0;浏览器对border-width、border-color进行渲染，占用内存。

border:none;浏览器不进行渲染，不占用内存。

样式优先级的规则是什么？

得分点

 `!important`、行内样式、嵌入样式、外链样式、id选择器、类选择器、标签选择器、复合选择器、通配符、继承样式

标准回答

CSS样式的优先级应该分成四大类

-第一类`!important`，无论引入方式是什么，选择器是什么，它的优先级都是最高的。

-第二类 引入方式，行内样式的优先级要高于嵌入和外链，嵌入和外链如果使用的选择器相同就看他们在页面中插入的顺序，在后面插入的会覆盖前面的。

-第三类选择器，选择器优先级：id选择器>（类选择器 | 伪类选择器 | 属性选择器 ）> （后代选择器 | 伪元素选择器 ）> （子选择器 | 相邻选择器） > 通配符选择器 。

-第四类继承样式，是所有样式中优先级比较低的。

-第五类浏览器默认样式优先级最低。

加分回答

使用!important要谨慎 - 一定要优先考虑使用样式规则的优先级来解决问题而不是 `!important` - 只有在需要覆盖全站或外部 CSS 的特定页面中使用 `!important` - 不要在你的插件中使用 `!important` - 永远不要在全站范围的 CSS 代码中使用 `!important` 优先级的比较指的是相同的样式属性，不同样式属性优先级比较失效，比如：在设置`max-width`时注意，已经给元素的`max-width`设置了`!important`但是还不生效，很有可能就是被width覆盖了

举例：`div`最终的宽度还是`200px` div { max-width: 400px !important; height: 200px;background-color: tomato; width: 200px; }