2020-03-24

1.什么是外边距重叠？重叠的结果是什么？

外边距重叠就是margin-collapse

在css当中，相邻的两个盒子的外边距可以结合成一个单独的外边距，这种合并外边距的方式被称为折叠，合并的外边距称为折叠外边距

折叠结果遵循以下计算规则：

（1）两个相邻的外边距都是正数时，折叠结果是他们两者之间较大的值

（2）两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值

（3）两个外边距一正一负时，折叠结果是两者相加的和

2.rgba()和opacity的透明效果有什么不同？

（1）rgba()只作用于元素的颜色或其背景色（设置rgba()透明的元素的子元素不会继承透明效果）

（2）opacity作用于元素，以及元素内所有内容的透明度

3.css中可以让文字在垂直和水平方向上重叠的两个属性是什么

垂直方向 ：line-height 设置大小比字体大小 小，即可实现垂直方向上居中

水平方向：letter-spacing 设置成负值即可实现水平方向上重叠

letter-spacing可以用于消除inline-block元素箭的换行符空格间隙问题

4.px和em，rem的区别

px和em都是长度单位，区别是：

（1）px 像素，值是固定的，指定是多少就是多少，计算容易

（2）em的值是不固定的，并且em会继承父级元素的字体大小

（3）rem 相对于根元素字体大小的单位，使用rem为主要单位进行页面布局，很好的实现了在不同设备上页面等比例缩放（3g网易移动端）

5.知道什么是微格式吗？谈谈理解，在前段构建中应该考虑微格式吗？

微格式： 一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外 的提示（豆瓣）

6.描述一个“reset”的css文件并如何使用它？知道normalize.css吗？你了解他们的不同之处？

重置样式非常多，每个前端开发人员都会有一个常用的重置文件，因为不同的浏览器对一些元素有不同的默认样式，如果不处理，在不同的浏览器下会存在必要的风险

Normalize.css是一种CSS reset的替代方案。它在默认的HTML元素样式上提供了跨浏览器的高度一致性

不同：

（1）Normalize.css 保护了有价值的默认值

（2） Normalize.css 修复了浏览器的bug

（3）Normalize.css 不会让你的调试工具变的杂乱

（4）Normalize.css 是模块化的

（5） Normalize.css 拥有详细的文档

为什么要初始化样式？

由于浏览器兼容问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异

（初始化css会对搜索引擎优化造成影响）

7.sass和less是什么？为什么要使用他们？

他们是css预处理器，他们是是一种特殊的语法编译成css

less是一种动态样式语言，将css赋予动态语言的特性，例如继承，变量，运算，函数，可以在客户端运行，也可以在服务端运行

优点：

（1）结构清晰，便于扩展

（2）可以方便的屏蔽浏览器私有语法差异

（3）可以轻松实现多重继承

（4）完全兼容css代码，可以方便的应用到老项目中。less只是在css语法上做了扩展

8.display：none和visibility：hidden的区别

（1）diaplay:none  隐藏对应的元素但不挤占钙元素原来的空间

（2）visibility：hidden  隐藏对应的元素并且挤占该元素原来的空间

9.css中link和@important的区别是

（1）link属于html标签，不存在兼容性问题；在页面加载时，link会同时被加载

（2）@import是css中提供的，引用的css会在页面加载完成后才会加载引用的css，并且只有在ie5以上才可以被识别

Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）

10.简介盒子模型

css的盒子模型有两种：IE盒子模型、标准的W3C盒子模型，IE 的content部分包含了 border 和 pading

盒模型：内容（content） 内边距（padding） 外边距（margin，不计入盒子实际宽度） 边框（border）