郑州Web前端培训怎样？如何学盒模型知识？在body中的每一个HTML标签实际上都被包围在一个看不见的矩形中，这个矩形就叫做"盒"。HTML中所有标签都可以看成是盒子，接下来千锋郑州就给大家梳理一下盒模型的相关知识。

　　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前端行业，可以选择专业学习一下，让自己先去试听，亲身体验教学效果，之后可以再做决定。

上一篇

UI设计必备技能是什么？常见动效有哪些

下一篇

郑州云计算培训好不？女生学云计算合适吗