3-26 盒子模型
标准盒子模型
大多数浏览器采用的是w3c盒子模型，也就是标准盒子模型，但是IE，采用的是怪异盒子 模型
标准盒子模型元素宽度：
width+padding（left+right）+border（left+right） margin（left+right）
标准盒子模型元素高度：height+padding（top+bottom）+border（top+bottom）
margin（top+bottom）
-----------------------------------------margin可以为负值
怪异盒子模型
怪异盒子模型元素宽度：
width包含【padding（left+right）+border（left+right】 + margin（left+right）
怪异盒子模型元素高度：
height包含【padding（top+bottom）+border（top+bottom】+
margin（top+bottom）
行内元素也是有盒子模型的，比如<a>,<span>的margin-left和margin-right都可以设置
但是margin-top和margin-bottom不能设置，行内元素的border和padding都可以设置，
但是border-top，padding-top到页面顶部之后就不会再增加。对于替换元素，input和img来说，margin，padding，border都生效。
怪异盒子模型和标准盒子模型的区别
1.正常盒子模型主要用于PC端，怪异盒子模型用于手机端
2.原理：正常盒子模型的大小是由内到外，由内部决定外部的大小
怪异盒子模型是由外到内的盒子宽高包含，padding和border
3.怪异盒模型和border有关：
设置border宽度可以影响其他元素的布局：但是在IE5以及以下里面只影响其子元素；
4，可以同时设置box-sizing属性来使用这一特性，使其改变border宽度也不影响其他元素
5.box-sizing：简单理解就是盒子大小基于什么计算的；
boxsizing:属性值：
1.content-box（默认值），规定宽度和高度不包含内边距和边框
2.border-box，规定宽度和高度包含内边距和边框
3.inherit，从父元素继承boxsizing属性的值
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
