七道可能你也不太会的css基础题？

七道大牛分享的css面试题，试着自己答一下，当然不会的我就百度了顺便巩固基础。
1. CSS 盒子模型，绝对定位和相对定位
2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
3. 如何保持浮层水平垂直居中
4. position 和 display 的取值和各自的意思和用法
5. 样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块怎么写，说出思路，有无实践经验
6. CSS3动画效果属性，canvas、svg的区别
7. px和em的区别

1.在网页中，一个元素占用空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）。这四个部分占用的空间中，由的部分显示相应的内容，而有的部分只用来隔离相邻的区域。四个部分一起构成了css中元素的盒模型。
2.绝对定位：position:absolute;特点：绝对定位脱离了标准的文档流，设置绝对定位后，会使行级元素变块级元素，会自适应内容的大小；绝对定位相对于最近的已经定位的祖先元素，即有position：absolute，或者position：relative，或者position：fixed；绝对定位多与z-index使用，来处理层级关系。相对定位：position：relative；相对定位仍然处在标准文档流里，依旧占位；相对自己原来的位置进行偏移。
3.浮动的元素影响了其他的元素的正常布局时需要清除浮动。清除浮动的方法：给父级一个高度height；给父级盒子一个overflow：hidden或者overflow：auto属性；添加一个伪类（应该是目前最常用的），如clearfix：：after{content: “”;display: block;visibility: hidden;clear: both;},还可以加个兼容。.clearfix{*zoom:1};在浮动元素的后面添加一个空的div盒子设置clear属性为both；给父级也设置浮动，这种好像效果不怎么好，影响太多，还有几种方法，不常用，就不写了。
3.关于垂直水平居中，方法也很多，跟清除浮动差不多，网上总结出来的大概有7,8种。如css3的偏移，display：box的方法，弹性布局，表格布局都可以，写个常用的吧巩固一下，用定位的。{position：absolute，left：50%，top：50%，margin-left:(-0.5*width)px; margin-top:(-0.5*height)px}；
4.position已经说了，来谈谈display。display有三种取值，inline或者block或者inline-block；这是行级元素和块级元素转换的时候用到的属性，display：inline，转换为行级元素，就具有行级元素的特点，那么行级元素有那么特点了，行级元素不独立成行，在一行显示，margin和padding都上下无效，左右有效。常见的行级元素有a，b，span，img，input，strong，label , em , textarea 等！display：block，转换为块级元素，具有块级元素的特点，独立成行，margin和padding都有效，具有div的全部特点，浮动后内容自适应等，常见的h1-h6,p,div,ul,li,dl,dt,dd,ol,blockquote等。display：inline-block 转换为行类块，既具有行级元素的特点也具有块级元素的特点，多用于自适应导航ul。
5.样式的层级关系遵循就近原则：行内样式>内部样式>外链，至于如何导入样式就不写了。选择器的优先级：id选择器>class选择器>标签选择器； 当然行内样式要比这几个选择器权重高，还有一个最高的！important，伪类选择器同样可以增加权重。样式冲突发生的情况，1.有不同的选择器对于同一个对象进行属性指定时；2.两个选择器同时具有相同的属性赋予不同的值得时候。提高选择器的权重。对于抽离样式模块，我想就是html结构模块化，样式模块化，哪里可以赋予调哪里吧，当然还有通用样式，前端自动化的sass和less，不太明白这一块，没有实际用自动化分离这个过，小白！
6.css3的动画效果属性。animation是一个简写属性,用于设置6个动画属性。下面的当然都是copy人家总结的啦：
animation-timing-function：
定义动画的速度曲线
ease：动画以低速开始，然后加快，在结束前变慢。
linear：匀速
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束，相对于ease缓慢，速度更均匀
step-start：按keyframes设置逐帧显示，第一帧为keyframes设置的第一帧。
step-end：按keyframes设置逐帧显示，第一帧为样式的初始值。
steps([, [ start | end ] ]?)：把keyframes里设置的一帧等分为几帧，start为第一次显示第一帧，end第一次显示样式的初始值，例如：steps(4,start)
cubic-bezier(, , , )：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。贝兹曲线限制了首尾两控制点的位置，通过调整中间两控制点的位置可以灵活得到常用的动画效果

animation-iteration-count：
动画迭代次数，默认就1次，可以设置2次，3次，4次，…infinite表示无限

animation-duration：
指一个动画周期持续时间。单位秒s或毫秒ms.

animation-delay：
指动画延时执行时间。单位秒s或毫秒ms.

animation-direction：
指动画时间轴上帧前进的方向。
normal:默认值，表示一直向前，最后一帧结束后回到第一帧
reverse:与normal的运行方向相反
alternate:往前播放完了之后，然后再倒带，倒带到头了再往后播放
alternate-reverse:与alternate的运行方向相反

animation-fill-mode：
设置动画结束后的状态
none：默认值。不设置对象动画之外的状态，DOM未进行动画前状态
orwards：设置对象状态为动画结束时的状态，100%或to时，当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧
backwards：设置对象状态为动画开始时的状态,（测试显示DOM未进行动画前状态）
both：设置对象状态为动画结束或开始的状态，结束时状态优先

animation-play-state：
paused:设置该属性使动画暂停
running:设置该属性使动画继续播放
动画运行状态，暂停或继续播放，属性为：running（默认）以及paused. 这个什么时候有用的，使用animation实现视频播放效果的时候

对于canvas和svg，w3c给的总结：
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

7.px和em都是长度单位，px是固定的，指定多少就是多少，容易计算。em是相对的，会继承父级元素的字体的大小。浏览器的默认字体是16px，那么未经过调整的浏览器都符合：1px=1em；那么12px=0.75em，10px=0.6254em；还有一个rem单位，多用于移动端和自适应，也是一个相对，相对html的，通常都是62.5%的font-size，这样16*0.625=10；则1rem=10px；便于计算。