概念
CSS盒模型就是一个盒子，封装周围的HTML元素，包括border（边框）padding（内边距） margin（外边距）content（实际内容）
CSS盒模型：标准模型和IE模型
标准盒模型和怪异盒模型的区别
标准盒模型：width是内容区的宽度，width会跟随padding ，margin，border变化而变化,元素真正的宽度 是content+border+padding
怪异盒模型：width是元素实际的宽度，padding，margin和border不会影响width的实际宽度和高度
CSS如何设置这两种模式
box-sizing: content-box;标准盒模型 是浏览器默认值。
box-sizing: border-box;怪异盒模型
什么时候使用什么盒模型
代码以
<!DOCTYPE html>
<html>
<head>
开头的无论什么浏览器运行都是
W3C盒子模型（W3C就是标准盒模型）
大多数浏览器采用W3C标准模型，而IE中采用Microsoft自己的标准。
怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解
析模式”，怪异模式主要表现在IE内核的浏览器
边距重叠问题
边距重叠问题：边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
如何防止边距重叠
外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 position:absolute:
外层元素 overflow:hidden;
内层元素 加float:left;或display:inline-block;
内层元素padding:1px;
4354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
