面试题

1、margin的粘连问题 【父子关系】

• 用padding替代
• 为父盒子添加overflow:hidden;
• 给父元素加边框

2、margin的塌陷问题【兄弟关系】

• 在一个元素身上设置足够的间隔

3、优先级的判断规则

• ！important (无穷)> 行内样式 (1000)> id(100) > class(10)> 标签 (1)> *(0)

4、单行文本溢出显示省略号

1. 设置宽度 width: *px;
2. 强制不换行 white-space:nowrap;
3. 内容溢出隐藏 overflow:hidden;
4. 溢出的标识为省略号 text-overflow:ellipsis;

5、清除浮动

• 给浮动元素的父亲添加overflow：hidden；
• 给浮动元素的最后面添加一个空的div元素，设置clear：both；属性
• 给浮动元素的父亲子添加一个类名clearfix，设置样式：
• .clearfix:after{
  display: balock;
  content:'';(内容为空)
  clear:both; height: 0;
  }
  .clearfix { zoom:1 //兼容IE6}

6、伪元素和伪类

• 写法上：伪类使用单冒号， 伪元素使用双冒号。
• 概念上：伪类是一种临时状态，只有状态被触发的时候才会生效， ：hover伪元素是一个假的元素，是一个虚拟的dom节点。