1、解释一下CSS的盒子模型？

标准盒模型，IE盒模型。
标准盒模型宽高只是content的宽高。IE的是border外部，只抛去margin。

• margin
• border
• padding
• content

box-sizing : content-box|border-box|inherit; 属性可以设置模型类型。

默认模型为IE盒模型的几乎只有低版本浏览器，所以一般不考虑。

2、CSS选择器

3、CSS样式优先级是怎么算的

4、常见浏览器兼容性问题与解决方案？

github上找star数最多的那个样式清除文件。
necolas/normalize.css: A modern alternative to CSS resets (github.com)

5、如何居中div, 如何居中一个浮动元素? ！！待做，居中

6、如何清除浮动？（经典问题）

首先就不应该用浮动做布局，布局有flex，grid，position。为什么就偏偏用一个浮动！工作中我是不会用到去除浮动的，因为我根本不会用浮动来做布局。
好了，说怎么清除浮动
为什么浮动会导致父元素高度塌陷，因为浮动本来就不是做布局的，然后父元素又没有不是浮动的元素，所以高度没了。

• 方法一：给个高度，简单直接暴力
• 方法二：overflow:hidden。因为这个属性会让浏览器初始渲染的时候强制父元素框住所有子元素（父元素没高度的情况下）。所以父元素有了高度
• 方法三：clear:both。加一个空div
• 方法四：:after伪元素。原理等同于加空div。

div:after{
    content:"1";
    clear:both;
    height:0;
    display:block;
    visibility:hidden
    }

方法二实质上是利用了BFC（块格式化上下文）。

块格式化上下文（BFC）有下面几个特点：

• BFC是就像一道屏障，隔离出了BFC内部和外部，内部和外部区域的渲染相互之间不影响。BFC有自己的一套内部子元素渲染的规则，不影响外部渲染，也不受外部渲染影响。
• BFC的区域不会和外部浮动盒子的外边距区域发生叠加。也就是说，外部任何浮动元素区域和BFC区域是泾渭分明的，不可能重叠。
• BFC在计算高度的时候，内部浮动元素的高度也要计算在内。也就是说，即使BFC区域内只有一个浮动元素，BFC的高度也不会发生塌缩，高度是大于等于浮动元素的高度的。
• HTML结构中，当构建BFC区域的元素紧接着一个浮动盒子时，即，是该浮动盒子的兄弟节点，BFC区域会首先尝试在浮动盒子的旁边渲染，但若宽度不够，就在浮动元素的下方渲染。

所以只要有块格式化上下文，就行。不用overflow:hidden。用display:inline-block，display:flow-root。display:flex。float：left也可以。块格式化上下文 - Web 开发者指南 | MDN (mozilla.org)

6、block、inline和inline-block的细节对比

回去看css世界

7、你有哪些性能优化的方法？ 待定，这里回答的不好。

（这个回答的不好）
回答一：

（1）、减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2）、前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3）、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4）、当需要设置的样式很多时设置className而不是直接操作style。
（5）、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6）、避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7）、图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

回答二：

(1)、减少HTTP请求次数
(2)、使用CDN
(3)、避免空的src和href
(4)、为文件头指定Expires
(5)、使用gzip压缩内容
(6)、把CSS放到顶部
(7)、把JS放到底部
(8)、避 免使用CSS表达式
(9)、将CSS和JS放到外部文件中
(10)、避免跳转
(11)、可缓存的AJAX
(12)、使用GET来完成AJAX请求

8、谈谈你对CSS中刻度的认识？

绝对单位：em\ex\vw\vh\vmax\vmin\rem。
相对单位：px\pt]pc。除了px基本用不到

rem是相对于总的根元素，也就是html的font-size。
em是相对于 父元素的字体大小。

9、内联标签和块级标签的区别。

10、说说隐藏元素的方式有哪些？

display:none visibility:hidden hidden="hidden"

11、谈谈你对BFC与IFC的理解？(是什么，如何产生，作用)

(1)、什么是BFC与IFC
a、BFC（Block Formatting Context）即“块级格式化上下文”， IFC（Inline Formatting Context）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。

b、BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。

c、在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是 block ，或者是 inline ，但不能同时属于这两者。并且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 Inline Formatting Context(行内格式化上下文) 里格式化。

(2)、如何产生BFC
当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：
a、float的值不为none
b、overflow的值不为visible
c、display的值为table-cell, table-caption, inline-block中的任何一个
d、position的值不为relative和static
CSS3触发BFC方式则可以简单描述为：在元素定位非static，relative的情况下触发，float也是一种定位方式。

(3)、BFC的作用与特点
a、不和浮动元素重叠，清除外部浮动，阻止浮动元素覆盖

如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个重叠的现象。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态，当float不为none时，position为absolute、fixed时元素将脱离标准流。

12、说说你对页面中使用定位(position)的理解？

position：static | relative | absolute | fixed | center | page | sticky

13、常用的页面布局的方式有哪些？！！待定

页面布局的方式有哪些？前端校招面试题目合集牛客网 (nowcoder.com)

14、