利用CSS中的After和Before解决CSS中的2个BUG

 (1)如何解决父元素的第一个子元素的margin-top越界问题（margin-bottom越界同理）

1)为父元素加border-top: 1px;——有副作用

2)为父元素指定padding-top: 1px;——有副作用

3)为父元素指定overflow:hidden;——有副作用

4)为父元素添加前置内容生成——推荐使用

.parent:before {                

content: '  ';

display: table;

}

或

.parent:after {                

content: '  ';

display: table;

}

  (2)如何解决所有的子元素浮动后父元素高度变为0，且影响后续元素

1)为父元素指定overflow:hidden;——有副作用

2)为父元素指定高度：height: xxx;——有局限性

3)为父元素添加后置内容生成——推荐使用

.parent:after {

content: '  ';

display: table;

clear: both;

}

补充2个CSS的面试题

面试题1：Bootstrap布局系统中容器的特点？

(1)宽度做了媒体查询，根据不同屏幕宽度来选择不同的CSS样式

(2)添加了前置和后置内容生成，可以防止子元素的越界、浮动造成的影响。

面试题2：Web开发中页面布局可以采用的方式及特点：

 (1)使用TABLE做布局

优势：简单不易出错  不足：加载效率

 (2)使用DIV+CSS做布局

优势：加载速度快、灵活  不足：不易控制

 (3)使用Bootstrap提供的栅格(Grid Layout)布局系统

优势：加载速度快、灵活、支持响应式功能、容易控制（有行/列的概念，但使用DIV+CSS实现）