css 盒子模型

css中的盒子模型是在页面布局定位中常用的方式,盒子模型主要包括三个部分:1 content 内容区域 2 border 边框 3 padding 内边距 4 margin外边距 每个元素都有盒子模型,

在web世界里盒子模型是无处不在的. 内边距和外边距和边框可以应用于一个元素的所有边,也可以是单独的边,而且外边距可以使负值,而且现在在很多情况下都要使用负值得外边距

在 CSS 中，width 和 height 指的是内容区域（element）的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有

10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，padding（内边距）：padding-top，padding-bottom

，padding-left，padding-right margin（外边距）：margin-top，margin-bottom ，margin-left，margin-right 当margin设为负数时，会使被设为负数的块向相反的方向

移动，甚至覆盖在另外的块上。当块之间是父子关系时，通过设置子块的margin参数为负数，可以将子块从父块中“分离”出来,在盒子模型中的元素分为块级元素和行内元素

两个块级元素在盒子模型中会产生重叠的效果使其塌陷产生一个BFC，可以设置元素为overflow:hidden隐藏溢出,使其不重叠.而行内元素在盒子模型中不能设置其宽,高,边距

并且在垂直方向设置内边距,外边距不会发生变化,在水平方向设置才会发生变化.