HTML面试题

行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？

• 行内元素：span、img、input...
• 块级元素：div、footer、header、section、p、h1...h6...
• 空元素：br、hr...

CSS的盒子模型有哪些

标准盒子模型、IE盒子模型
CSS的盒子模型区别：
标准盒子模型：margin、border、padding、content
IE盒子模型 ：margin、content（ border + padding + content ）
通过CSS如何转换盒子模型：
box-sizing: content-box;标准盒子模型
box-sizing: border-box;IE盒子模型

对BFC规范(块级格式化上下文：block formatting context)的理解

BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

1. 了解BFC ： 块级格式化上下文。
2. BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。
3. 如何触发BFC：
   float的值非none
   overflow的值非visible
   display的值为：inline-block、table-cell...
   position的值为:absoute、fixed

页面导入样式时，使用link和@import有什么区别？

区别一：link先有，后有@import（兼容性link比@import兼容）；
区别二：加载顺序差别，浏览器先加载的标签link，后加载@import

css实现动画主要有3种方式

• transition实现过渡动画
• transform转变动画
• animation实现自定义动画

css动画使用margin和transform的区别

1.margin是属于布局属性，该属性的变化会导致页面的重排。 对布局属性进行动画，浏览器需要为每一帧进行重绘并上传到GPU中进行渲染

2.transform是合成属性，浏览器会为元素创建一个独立的复合层，当元素内容没有发生变化，该层不会被重绘，通过重新复合来创建动画帧