CSS经典面试题

CSS3新增的属性有哪些？

1. RGBA颜色和透明度： rgba() 函数使用红®、绿(G)、蓝(B)、透明度(A)
   a) 红色（R）0 到 255 间的整数，代表颜色中的红色成分
   b) 绿色（G）0 到 255 间的整数，代表颜色中的绿色成分
   c) 蓝色（B）0 到 255 间的整数，代表颜色中的蓝色成分
   d) 透明度（A）取值 0~1 之间， 代表透明度
2. Background属性
   a) background-image：设置元素的背景图像
   b) background-origin：规定背景图片的定位区域
   c) background-size：规定背景图片的尺寸
   d) background-repeat：设置是否及如何重复背景图像
3. border-color属性： 为边框添加颜色
4. border-image属性：使用图片来创建边框
5. border-radius属性： 添加圆角边框
6. text-shadow属性：为文本设置阴影，默认值为 none ，他携带三个属性值，以逗号隔开
   a) h-shadow： 必须，水平阴影的位置，允许负值
   b) v-shadow： 必须，垂直阴影的位置，允许负值
   c) blur： 可选，模糊的距离
   d) color: 可选，阴影的颜色。
7. box-shadow属性： 向方框添加阴影效果，它所携带的属性值跟文本阴影一样
8. word-wrap属性： 允许长的内容可以自动换行（所有主流浏览器都支持该属性）
   a) word-wrap： normal（默认值，只在允许的断字点换行）
   b) word-wrap： break-word（在长单词或URL地址内部进行换行）
9. transform属性：应用于元素的2D或3D转换，允许将元素旋转缩放，移动，倾斜等
10. animation属性：通过指定属性的初始状态和结束状态来实现动画效果
11. transition属性：通过css动作触发过度的功能，比如 :hover, :focus , :active等
12. rem单位
13. flex布局

怎么利用伪类选中奇数行和偶数行

1. 奇数：nth-child(odd)
2. 偶数：nth-child(even)

浮动的定义

在非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）

清除浮动有哪些方式？

1. clear：both; 在元素最后下加一个元素设置 clear: botn属性；缺点是会增加多余无用的HTML元素，例如：

<div class=”father”>
	<div>left浮动</div>
	<div>right浮动</div>
	<div style=”clear:both”></div>
</div>

2. 使用after伪元素（推荐使用）
   在父元素后添加伪元素，例如：

.father::after {  /*伪元素是行内元素 正常浏览器清楚浮动方法*/
	content: ‘ ’;
	display: block;
	clear: both;
	visibility:hidden;
}
.father {
	*zoom: 1;  /*IE6清楚浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

3. 给父元素设置明确的高度，缺点是并不是所有元素的高度都是固定的
4. 给父级元素设置overflow：hidden，缺点：不能和position配合使用（不推荐）

box-sizing常用的属性有哪些？分别有什么作用

1. content-box: 宽高是元素本身的宽高 不包含border+padding
2. border-box: 元素的宽高已经包含了border+padding
3. inherit: 从父元素继承box-sizing

offsetWidth offsetHeight clientWidth clientHeight 的区别

1. offsetWidth：content宽度 + padding宽度 + border宽度
2. offsetHeight：content高度 + padding高度 + border高度
3. clientWidth：content宽度 + padding宽度
4. clientHeight：content高度 + padding高度

为什么要初始化css样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值不同；如果不初始化css,会导致不同浏览器页面间的显示差异。

CSS中link和@import的区别是？

1. Link:
   a) Link 为当前页服务；
   b) Link属于XHTML标签，除了加载CSS外，还可以定义RSS，定义rel连接属性等
   c) 加载顺序：当页面被加载时，link所引用的CSS会同时被加载；
   d) 兼容性：link无兼容性问题
   e) 操作DOM控制样式时： 只能使用Link标签
2. @import：
   a) @import 为CSS服务；
   b) @import是CSS提供的一种方式，@import就只能加载CSS
   c) 加载顺序：当页面被加载时，@import引用的CSS会等到页面全部被加载完后才会被加载。所以会导致有时候页面会闪烁（也就是样式还没有被加载出来导致的），这种情况在网速慢的情况下会很明显。
   d) 兼容性： 由于@import是CSS2.1提出的，所以一些老的浏览器不支持，@import只有在IE5以上的才能识别。
   e) 操作DOM控制样式时：DOM无法控制@import
   建议：总结来看，建议使用link

描述CSS 的 "reset"文件和 normalize.css; 你了解它们的区别吗？

Reset.css和normalize.css都是针对样式重置的，但是两者也有区别：

1. Reset.css：比较暴力，它将所有的样式都重置成一样的，影响的范围较大，讲究跨浏览器的一致性。
2. Normalize.css：不讲究样式一致，更注重通用性和可维护性。
   normalize.css相比较于Reset.css：
3. normalize.css 保护了许多浏览器的默认样式；
4. 修复了常见的桌面端及浏览器的bug，比如：格式化文字font-size，line-height,IE9中SVG的溢出等
5. 拥有了更详细的文档研究与测试。
6. normalize.css是模块化的，被拆分为多个相关却又独立的部分；能清楚知道哪些元素相对应的特定的值。

Scoped原理

Scoped是style标签上的一个属性，当style标签拥有这个属性时，它的CSS样式就只在当前组件中生效；添加这个属性以后，就可以让各个组件中的样式互不干扰；倘若所有的style标签都有scoped属性，那就相当于实现了样式的模块化

Stylus / sass（scss） / less区别

介绍：sass是一种动态样式语言，比css多出了很多的功能（变量，计算，混入，颜色处理，函数，继承，嵌套等），更方便阅读。sass和less都使用标准的css语法，都可以方便的将已有的css代码转为预处理器代码，sass使用.sass扩展名，less使用.less扩展名

1. 基本语法区别：
   a) .sass： 需要严格的遵循缩进的语法规则，不带{}和分号；例如：

div 
	font-size: 24px

b) .scss：是sass语法进行改良后的语法，兼容原来的语法，只是将原来的缩进排版方式改成了熟悉的{}，扩展名改为.scss；例如：

div{
	font-size: 24px;
}

c) .less：less也是一种动态语言，受sass影响很大，对css赋予了动态语言的特性（如变量，计算，继承，函数等）。Less既可以在客户端运行（支持IE6+），也可以在服务端运行（借助nodejs）。例如：

div{
	font-size: 24px;
}

d) stylus：主要是给node项目进行css预处理支持，人气不如前两个；扩展名为.styl；它同时支持缩进和css常规书写方式，下面两种方式都支持，如下：

div 
font-size: 24px
			或者
			div{
	font-size: 24px;
}	

2. 变量区别：可以将常使用到的css属性值，定义成一个变量，然后通过变量名来引用他们。
   a) .sass / .scss：sass / .scss变量必须以$ 开头，变量和值之间用： 隔开；例如：

baseSize: 24px;
div {
	font-size: $baseSize;
}

b) .less： 变量必须以@开头，已经被赋值的变量及其他常量（如像素，颜色等）都可以参与运算。例如：

@baseSize: 24px;
div {
	font-size: @baseSize
}

c) .stylus：可以以 $开头或其他任何字符，但是不能以 @开头；例如：

$baseSize: 24px;
baseColor: pink;
div {
	font-size: $baseSize;
	color: baseColor;
}

3. 嵌套： 在css中，多次引用相同的parent元素，很繁琐；sass / scss / less / stylus 都支持嵌套，减少了代码量，更直观，方便阅读；例如：

div {
	width: 100px;
	height: 100px;
	span {
	display: block;
	width: 40px;
	height: 40px;
	color: red;
	}
}

4. 运算符：在 CSS 预处理器中还是可以进行样式的计算，sass / less / stylus 都支持运算 + - * 、 %等等。例如：

div {
	width: (100% / 5);
	margin-top: 10px + 20px;  /* 不能写100%-5px; sass / stylus 中不兼容；less中会计算成95% */
}

5. 颜色处理：CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等。
   a) Sass颜色预处理函数：
   lighten($color,10darken($color, 10%); // 在给定颜色基础上变暗10%
   saturate($color,10desaturate($color, 10%); // 在给定颜色基础上饱和度降低10%
   grayscale($color);//将该颜色转换为对应的灰度颜色complement($color); // 将该颜色旋转180度之后的颜色
   invert($color); // 和complement类似，获取颜色旋转180度之后的颜色，但是不能改变透明度
   mix(color1,color2,50%); // color1 按照50%比例和color2混合
   b) Less中颜色预处理函数：
   lighten(@color, 10%);
   darken(@color, 10%);
   saturate(@color, 10%);
   desaturate(@color, 10%);
   spin(@color, 10);　　// 色相值增加10
   spin(@color, -10); // 色相值减少10
   mix(@color1, @color2);
   c) Stylus中颜色预处理函数：
   lighten(color, 10%);
   darken(color, 10%);
   saturate(color, 10%);
   desaturate(color, 10%);
6. 导入（import）方式： @import filePath
7. 继承：在为多个元素重复定义相同的样式时，可以使用继承来实现，例如：

.content {
	color: red;
	font-size: 24px;
}

a) 在sass中，通过 @extend 来实现代码组合申明，使代码更加优越整洁，例如：

.information {
	@extend.content
}

b) 在less中

.information {
	.content
}

c) 在stylus中

.information {
	@extend .content
}

图片有哪些格式，分别有什么区别？

CSS布局有几种方式？

1. Flex布局：弹性布局，给父盒子添加display：flex属性
2. Float布局：浮动布局
3. 响应式布局：可以添加meta标签，可以使用rem单位，可以使用media定制样式
4. Table布局：父级容器display:table,子级容器display:table-cell
5. grid（网格）布局：将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

CSS优化、提高性能的方法有哪些？

1. 加载性能：
   a) Css压缩：将写好的css进行打包压缩，可以减少很多的体积。
   b) 减少使用@import，而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成后再进行加载。
2. 选择器性能：
   a) 避免使用通配规则，如*{} 计算次数太多； 只对需要用到的元素进行选择
   b) 尽量少的去对标签进行选择，而是用class（类名）
   c) 尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素
   d) 了解哪些属性是可以通过继承而来的，避免对这些属性重复指定规则
3. 渲染性能：
   a) 慎重使用高性能属性，比如浮动，定位
   b) 尽量减少页面重排，重绘
   c) 属性值为0时，不加单位，例如设置margin： 0 10px;
   d) 选择器优化嵌套，尽量避免层级过深
   e) 不使用@import前缀，他会影响css的加载速度
   f) 标准化各种浏览器前缀；带浏览器前缀的在前，标准属性在后。
4. 可维护性、健壮性
   a) 样式与内容分离，将css代码定义到外部css中
   b) 将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性