前端面试题-css盒模型

一、题目：谈谈你对CSS盒模型的认识

1. 基本概念？

        有标准模型和IE模型两种，由margin、padding、content、border组成。

2. 标准模型和IE模型区别？

        宽和高的计算方式不同。标准模型的宽度指的就是content的宽度，不包含padding和border。

标准：width = content + padding + border；

IE：width = content；

3. CSS如何设置这两种模型？

    这是css3新属性，box-sizing: content-box; 是指盒模型的宽高就是content的宽高，是标准盒模型下设置的，浏览器默认设置；box-sizing: border-box; 是IE下的设置。

4. JS如何设置获取盒模型对应的宽和高？

        a) dom.style.width/height

         这种方式不能拿到所有元素的宽和高，只能拿到这个dom节点的内联属性的，即元素内嵌的css宽高。

        var elWidth = document.getElementById('box').style.width;

        b) dom.currentStyle.width/height

            不管是哪种css样式写法，运行后产生的样式在currentStyle（渲染后的样式）上，但这是IE属性。

        c) window.getComputedStyle(dom).width/height

            这个是所有浏览器都支持的。

        d) dom.getBoundingClientRect().width/height

            该方法可以拿到运行后的属性。一般用于计算一个元素的绝对位置，根据视窗，也就是viewport的左上角定点，拿到top、right、bottom、left四个值。