|
如何能进入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前端行业，可以选择专业学习一下，让自己先去试听，亲身体验教学效果，之后可以再做决定。
欢迎具体了解：郑州Web前端培训http://zz.mobiletrain.org/html5/ |
