css基础面试题

1、CSS3 新特性有哪些？

1. 颜色：新增 RGBA (255,255,255,0.5)
2. 文字阴影（text-shadow）
3. 边框： 圆角（border-radius） 边框阴影： box-shadow
4. 盒子模型：box-sizing 把所有的网页元素都看成一个盒子，它具有： content，border, padding，margin四个属性
5. 渐变：linear-gradient、radial-gradient
6. 过渡：transition，可实现动画
7. 自定义动画
8. 2D 转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
9. 3D 转换 transform : translate3d

2.对 BFC 规范的理解有哪些？

BFC 名为 “块级格式化上下文”。

W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性

这里简单列举几个触发BFC使用的CSS属性

• overflow: hidden
• display: inline-block
• position: absolute
• position: fixed
• display: flex
• float 属性不为 none

BFC的规则

• BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
• BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
• 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠
• 计算BFC的高度时，浮动元素也参与计算

BFC解决了什么问题

1.使用Float脱离文档流，高度塌陷

2.Margin边距重叠

3.清除浮动有几种方式?

为什么需要浮动?

清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。

1. 导致背景不能正常显示，如果对父级设置了背景属性，导致父级不能撑开，会影响到背景图片不能正常打开。
2. 边框不能撑开，由于子级使用了浮动效果，并且已经产生了浮动，父级不能撑开，所以影响边框不会随着内容的变化而变化。

通过触发BFC方式: overflow:hidden

使用after伪元素清除浮动（推荐使用）

.clearfix:after{/伪元素是行内元素 正常浏览器清除浮动方法/

使用before和after双伪元素清除浮动