Css3 常见技术面试题（一）

1 标准的CSS盒子模型与IE的盒子模型有什么不同？

标准的css盒子模型宽高就是内容区宽高；
低端IE css盒子模型宽高 内容+内边距+边框。

2 link和@import的区别

2.1 从属关系

link是HTML提供的标签；
@import是css的语法规则，只能加载在style标签内和css文件中使用。

2.2 加载顺序

link在页面加载时同时加载，而@import在页面加载完成后加载。

2.3 兼容性

@import只能用于ie5以上，link不受兼容影响

2.4 DOM可控性

Link支持js控制dom改变样式，而@import不支持

2.5 注意

不推荐使用@import，原因如下：
1、影响浏览器的并行下载。
2、多个@import的使用会使浏览器下载紊乱。

3 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名组成）;
::befor是css3中伪元素的新语法，让插入的内容在其他内容之前，
:after是css1的语法，兼容性好，让插入的内容在其他内容之后。

4 Css优化、提高性能的方法

1、尽量将样式写在单独的css文件中，在head元素中引入，好处有以下几点：
（1）内容和样式分离，易于管理和维护
（2）减少页面体积
（3）css文件可以被缓存、重用、维护成本降低

2、尽量不使用@import（影响css文件加载速度）

3、避免使用复杂的选择器，层级越少越好
建议选择器的嵌套最好不要超过三层，例如.header .logo .text{}，
可以减少css文件大小、提高加载性能、浏览器解析时也会更加高效。

4、精简页面的样式文件，去掉不用的样式

5、利用CSS继承减少代码量

6、慎重使用高性能属性：浮动、定位；

5 CSS的实现方式有几种？那种CSS实现方式优势更突出？相对其他实现方式而言其优点有哪些？

三种：内联 内嵌 外联。
外联优势更突出，原因如下：
使用外联样式使内容和样式分离，易于管理和维护，减少页面体积，css文件可以被缓存、重用、维护成本低。

6 全屏滚动的原理以及用到的css属性

有点类似于轮播，整体的元素一直排列下去，
假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位
overflow：hidden；transition：all 1000ms ease

7 style标签写在body后与body前有什么区别

写在body前有利于浏览器逐步渲染
写在body后会导致浏览器停止渲染，并等到样式表解析完成后重新渲染

8 Css3新特性

颜色：新增RGBA、HSLA模式
文字阴影 text-shadow
边框：圆角border-radius 边框阴影border-shadow 图片边框border-image
盒子模型：box-sizing
背景：background-size设置背景图片的尺寸，background-origin设置背景图片的原点，background-clip设置背景图片的裁剪区域
渐变：linear-gradient、radial-gradient
过渡：transition可实现动画
自定义动画
多媒体查询、多栏布局
2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
3D转换
在CSS3中唯一引入的伪元素是::selection