Css3 常见技术面试题（一）

缺乏、安全感 2023-07-18 12:44 9阅读 0赞

### Css3常见技术面试题 ###

*  1 标准的CSS盒子模型与IE的盒子模型有什么不同？
 *  2 link和@import的区别
 *   *  2.1 从属关系
     *  2.2 加载顺序
     *  2.3 兼容性
     *  2.4 DOM可控性
     *  2.5 注意
 *  3 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
 *  4 Css优化、提高性能的方法
 *  5 CSS的实现方式有几种？那种CSS实现方式优势更突出？相对其他实现方式而言其优点有哪些？
 *  6 全屏滚动的原理以及用到的css属性
 *  7 style标签写在body后与body前有什么区别
 *  8 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