CSS

html5和css3新增特性：

html5新增特性：

• 新增语义化标签：使用语义化标签的好处是增强了代码的可阅读性，也方便了网站的seo搜索引擎优化。
  • header 头部标签
  • nav 导航标签
  • article 内容标签
  • section 块级标签
  • aside 侧边栏标签
  • footer 尾部标签
• 新增 input 表单、表单属性
  • calendar、date、 time、email、url、search
• 新增多媒体标签
  • 音频 audio 和视频 video

标题css3新特性有哪些？

1. 颜色：新增 RGBA
2. 文字阴影（ text-shadow） 、圆角（ border-radius） 边框阴影： box-shadow ；
3. 盒子模型： box-sizing
4. 渐变： linear-gradient、 radial-gradient
5. 过渡： transition，可实现动画
6. 自定义动画
7. 媒体查询，多栏布局
8. 2D 转换： transform： translate(x， y) rotate(x， y) skew(x， y) scale(x， y)
9. 3D 转换

水平垂直居中的方法

1.absolute + transform：绝对定位加+转换
	父元素：相对定位
	子元素：绝对定位；left: 50% top：50%; transform：translate(-50%, -50%)
	
2.flex + justify-content + align-items（弹性模型）
	为父盒子开启flex布局：
	display： flex;
	justify-content： center; /* 水平居中 */
	align-items： center; /*垂直居中*/
	
3.inline-block + text-align + table-cell + vertical-align（单元格方式）
	父盒子：display： inline-block
	子盒子：text-align：center; display：table-cell; vertical-align：middle;
	
4.margin: auto
	父盒子采用相对定位
	子盒子采用绝对定位，然后top/bottom/left/right都设置为0，margin: auto

Sass/Less的区别

1. sass 是基于 Ruby 的， 然后是在服务器端处理的。很多开发者不会选择 LESS

   因为JavaScript 引擎需要额外的时间来处理代码然后输出修改过的 CSS 到浏览器。

2. 关于变量在 LESS 和 Sass 中的唯一区别：LESS 用@， Sass 用$

为什么要使用css预编译 (优缺点)

• 为了解决css 的不足，开发者们想到了编写一种对 css 进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成 css 供浏览识别，这样既一定程度上弥补了css 的不足，也无需一种新的语言来代替 css 以供浏览器识别。于是 css 预处理语言就应运而生了。
• 预编译可缓解多浏览器兼容造成的冗余
• CSS 预处理语言，它扩展了 CSS 语言，增加了变量、 Mixin、函数等特性，使 CSS更易维护和扩展

预编译语言的缺点：

1. 让我们开发工作流中多了一个环节，调试也变得更麻烦了

2. 预编译很容易造成后代选择器的滥用 ，降低了自己对最终代码的控制力

3. 提高了门槛，首先是上手门槛，其次是维护门槛，再来是团队整体水平和规范的门槛。

   这也造成了初学学习成本的昂贵。