对盒子模型的理解.pdfVIP

对盒⼦模型的理解 盒模型理解 盒模型 盒模型包括margin、border、padding、content四个部分，主要的设置属性是margin、border、padding。 盒⼦模型⼜分为两种W3C和IE盒⼦。 W3C的元素宽度=content的宽度 IE的元素宽度=content+padding+border margin外边距 margin是为了让两个盒⼦（同级的盒⼦）之间，产⽣⼀定距离。或者是让盒⼦的周围产⽣间距。 margin有以下⼏个特点： 1. 是长在盒⼦外围的。 2. 控制当前元素 与 其他同级元素的位置关系。 3. 不会改变盒⼦内部的⼤⼩。 4. 是可以设置负值的。 margin可以设置1~4个值： 1. ⼀个值：四个⽅向的⼤⼩； 2. 两个值：第⼀个是上下边距，第⼆个是左右边距； 3. 三个值：第⼀个是上边距，第⼆个上左右边距，第三个是下边距； 4. 四个值：从第⼀个值开始按上右下左的顺时针顺序，设置四个边距。 margin能分别设置四个⽅向的值：margin-top、margin-right、margin-bottom、margin-left。并且可以为负值。 padding内填充 padding是为了让盒⼦和⽂本之间产⽣间距，或者是添加空⽩空间。 padding的特点： 1. padding是长在 内容 和 盒⼦之间的距离。 2. 主要控制⼦元素在盒⼦内部的位置关系。 3. 是添加在⽗元素上⾯。 4. padding可以把盒⼦撑⼤！ 5. padding不会对背景图的位置造成影响。 padding的值和margin的设置⽅法差不多，不同的是padding不能设置负值。 border边框 边框就好理解了就是盒⼦的壳。 边框不⽤来做布局，在页⾯渲染时⽤来做样式。 本⼈对盒模型的理解 盒模型就是⽤来做容器，为了把内容打包和整理，为了不让页⾯显得杂乱⽆章。⼀个好的包装能够给⽤户不⼀样地体验。并且如果没有好的 包装，再好的内容也不会也看下去的欲望。这就像⼀个⼲净整洁的桌⾯和堆满杂物的桌⾯给⼈的观感效果。 所以，合理灵活的应⽤好盒模型是前端的必要基础