web前端开发实验知识点（郑州Web前端学习之盒模型知识梳理）
web前端开发实验知识点（郑州Web前端学习之盒模型知识梳理）盒子模型（box model）的基本属性 2、盒子内边距（Padding）。Padding是盒子中的文字距离盒子边框（border）的距离，内边距是透明的。3、盒子边框（border）。围绕在内边距和内容外的边框。4、盒子外边距（margin）。是盒子距离网页边的距离，外边距是透明的。
在body中的每一个HTML标签实际上都被包围在一个看不见的矩形中，这个矩形就叫做"盒"。HTML中所有标签都可以看成是盒子，接下来的郑州Web前端学习就给大家梳理一下盒模型的相关知识。
CSS中的盒子构成：
1、盒子中装载的内容(content)。盒子的内容，显示文本和图像。
2、盒子内边距（Padding）。Padding是盒子中的文字距离盒子边框（border）的距离，内边距是透明的。
3、盒子边框（border）。围绕在内边距和内容外的边框。
4、盒子外边距（margin）。是盒子距离网页边的距离，外边距是透明的。
盒子模型（box model）的基本属性
内容区域content设定：width/height：宽度和高度的设定可以是具体的数值（带单位），也可以是百分比设置。
内边距padding设定：分上右下左四个方向。最小为0，不允许出现负值。
外边距margin设定：主要用途是控制盒子的位置，所以可以出现负值。
边框border设定：大部分的元素对象在默认情况下是没有边框的；要设定边框，必须同时设定3个要素：宽度、样式和色彩border:red 5px solid;（border复合属性，可以把一个border按方向分类：border-top、border-right、border-bottom、border-left，也可以按属性要素分类：border-width、border-style、border-color。还可以按方向分类完之后再按属性要素分类。
盒模型包括标准模型和IE模型
标准模型高度和宽度指的是content的高度和宽度，CSS设置为box-sizing: content-box；
IE模型高度和宽度指的是content padding border加起来的高度和宽度，CSS设置为box-sizing: border-box。
JS如何设置获取盒模型对应得高和宽
（1）dom.style.width/heigt
这种方式只能获取dom元素通过内联样式所得的高宽（dom元素设置元素一般有三种方式：网节点上内嵌<内联>；html中加style节点<内联>；link引外部的样式<外联>）。
（2）dom.currentStyle.width/height
这种方式获取的是页面渲染之后即时运行的结果，也就是外联/内联都可以获取，相对来说比较准确；缺点：但是这种方式只有IE支持。
（3）window.getComputedStyle(dom).width/height
原理与（2）相似，但是通用性更高，兼容性更好。
（4）dom.getBoundingClientRect().width/height
根据dom元素在视窗中的绝对位置来获取高宽的。
（5）dom.offsetWidth/offsetHeight
最常用的，也是兼容性最好的。
想了解更多CSS知识点，你可以关注“千锋郑州校区”微信公众号，定期发布技术热点和动态文章，你也可以来千锋郑州Web前端培训班申请长达两周的免费试听，亲身体验教学效果，感受讲师的教学水平。
6��F#@
