前端—每天5道面试题（1）
每天背5道前端面试题，希望我可以在远方的终点见到你
1、说一下CSS模型
- CSS模型简介:就是用来装页面上的元素的矩形区域。CSS 中的盒子模型包括IE 盒子模型和标准的W3C盒子模型。
- box-sizing(有3个值哦): border-box, padding-box, content-box.
标准盒子模型:
IE盒模型：
区别：
从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这是三部分的宽度，因此，使得在计算整个盒子的宽度时存在差异。
- 标准盒子模型的盒子宽度:左右border+左右padding+width。
- IE盒子模型的盒子宽度: width在CSS3中引入了box -sizing属性，box-sizing: content-box;表示标准的盒子模型，box-sizing:border-box表示的是IE 盒子模型。
- 最后，前面我们还提到了，box-sizing:padding -box,这个属性值的宽度包含了左右
padd ing+width。也很好理解性记忆，包含什么，width 就从什么开始算起。
2、说一下link 标签和import标签的区别
- link属于html标签，而@import 是css提供的
- 页面被加载时，link 会同时被加载，而@ import引用的css会等到页面加载结束后再加载。
- link是html标签，因此没有兼容性，而@import 只有IE5以上才能识别。
- link方式样式的权重高于@import的。
3、谈谈transition 和animation的区别
- Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而an
imati on不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from…to，而animation可以一帧一帧的。
4、谈谈双边距重叠的问题(外边距折叠)
- 多个相邻( 兄弟或者父子关系)普通流的块元素垂直方向marigin会重叠。
折叠的结果为:
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时， 折叠结果是两者的相加的和。
5、如何实现图片在某个容器中居中的?
- 父元素固定宽高，利用定位及设置子元素margin值为自身的一半。
- 父元素固定宽高，子元素设置position: absolute, margin: auto 平均分配margin
- css3属性transform.子元素设置position: absolute; left: 50%; top: 50%; transform: translate(-50%，-50%) ;即可。
- 将父元素设置成display: table, 子元素设置为单元格display: table-cell。
- 弹性布局display: flex. 设置align-i tems: center; justify-content: center。
