CSS面试

1.css3有哪些新特性？

1. 实现圆角border-radius、阴影box-shadow、border-image；
2. 对文字加特效text-shadow、线性渐变gradient、旋转transform；
3. transform：旋转rotate（9deg）、缩放scale（0.85,0.9）、定位translate（0px，-30px）、倾斜skew（-9deg、0deg）；
4. 增加了更多的css选择器、多背景、rgba
5. 在css3中引入为一个的伪类：：selection
6. 媒体查询、多栏布局

2.为什么要清除浮动？怎么清除浮动？

产生原因：子盒子浮动导致的父盒子内高度为 0 ，父级盒子不能被撑开，发生高度塌陷的情况。

带来的负作用：

1. 背景不能显示
2. 边框不能撑开
3. margin和padding值不能正确显示

清除浮动的方法：

1. 给父盒子设置合适的高度；

2. 给父盒子添加样式 overflow:hidden/auto;（这个属性相当于触发BFC，让父级紧贴内容，包括使用了浮动的盒子）（为了去除兼容性问题，会添加zoom:1;）

3. 在父盒子里面的子盒子后面添加一个子盒子，如div，添加样式 .clear{ clear:both; }；

4. 采用伪元素，给父元素追加:after，给父元素添加一个类.clearfix{content:"";clear:both;}

BFC块级格式化上下文的特征：

• 内部的Box会在垂直方向，从顶部开始一个接一个地放置；

• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。

• 每个元素的margin box的左边， 与包含块border box的左边相接触，即使存在浮动也是如此。

• BFC的区域不会与float box叠加。

• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

• 计算BFC的高度时，浮动元素也参与计算。

创建块级格式化上下文：

• 浮动 (元素的 float不为 none）

• 绝对定位元素 (元素的 position为 absolute 或 fixed)

• 行内块 inline-blocks (元素的 display: inline-block)

• 表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)

• 表格标题 (元素的 display: table-caption，HTML表格标题默认属性)

• overflow的值不为 visible的元素(元素的 overflow: hidden，overflow: auto)

• 弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)

3.怎么让文本不自动换行？怎么让超过文本部分变成省