CSS盒模型以及与之相关的知识点

盒模型分为哪几种

- 标准盒模型- IE盒模型

两者区别在于 width 和 height 计算方式上的不同:

标准盒模型

width = content width;

IE核模型

width = content width + padding + border

CSS 如何来设置这两种模型

 box-sizing: border-box box-sizing: content-box

用实例来验证下:

    <div class="box">    </div>

    .box {        width: 100px;        height: 100px;        padding: 10px;        margin: 10px;        border: 5px solid #ccc;        background-color: #ccc;    }

蓝色 - 区域表示为 content 部分紫色 - 区域表示为 padding 部分灰色 - 区域表示为 border  部分米色 - 区域表示为 margin  部分

细心读者可以看到,从上图来看不设置 box-sizing 情况下, 默认值 content-box, 也就是表示为标准盒模型.

那么我们来看看当给div设置为 box-sizing: border-box 针对前面的代码示例,我们只添加如下一行代码,看看最终渲染后盒模型是什么样的?

.box {    box-sizing: border-box;}

根据前面说的,IE盒模型(border-box)计算方式为 width = content-widht + padding + border, 验证下我们说的是否正确

width = 70 + 10 + 10 + 5 + 5

也就是说可以通过 box-sizing: border-box 表示为IE模型;

从上面可以看出来, 模型不一样其计算方式也不一样.

在JS中如何来获取盒模型对应的高宽

先罗列下常用的几种方式,再分别讲解下优缺点

document.style
document.currentStyle
window.getConputedStyle(Element)
Element.getBoundingClientRect

在讲解 document.style 之前我们先来说说设置CSS样式的几种方式:

- 内联样式- 行内样式- 外部样式表

这三种具体代码表述一次如下:

    <div></div>    /* 内联样式 */    <div style="color: #ccc;"></div>    /* 行内样式 */    <style>        div {color: #ccc;}    </style>    /* 外部样式表 a.css */     <link href="a.css" rel="stylesheet"/>

同样权重下, 优先级为内联样式 > 行内样式 > 外部样式.

document.style

HTMLElement.style 属性返回一个 CSSStyleDeclaration 对象，表示元素的内联style 属性（attribute），但忽略任何样式表应用的属性。

直白的说,就是通过行内样式、外部样式表的方式给某个元素设置样式, 通过 document.style 是获取不到的.

注意 : document.style 返回对象是只读, 不能直接通过 document.style = "color: #ccc" 方式直接给其设置样式, 否则设置是不会生效. 一般推荐方式如下:

    var ele = document.querySelector(".box");    // 单个属性设置    ele.style.color = "#ccc";    // 单个语句设置多个样式    ele.setAttibute("style", "color: #ccc; border:1px solid red;");    // or    ele.style.cssText = "color: #ccc; border:1px solid red;"

回到第一个实例,尝试着通过 document.style 来获取一下元素的宽度.

    var ele = document.querySelector(".box");    ele.style.width // ""

根据前面的行内CSS中,是有给元素指定width\height, 却没有获取到; 也就是它只包含通过 style属性(attibute)上声明的CSS样式.

通过style属性的方式来给元素添加属性:

<div class="box"     style="color: #ccc;        width: 100px;        height: 100px;        padding: 10px;        margin: 10px;        border: 5px solid #ccc;        background-color: #ccc;        box-sizing: content-box;"></div>

    var ele = document.querySelector(".box");    ele.style.width // "100px"

从两种模式来看, 获取到的 width 都是一样, document.style 表示就是 style 中 width; 并不代表渲染后的盒子大小.

优点

- 兼容性好

缺点

- 只能获取通过 style 属性设置的样式.

document.currentStyle.width

弥补document.style的缺点, 可以获取到行内、内联、外部样式表的设置样式.

<style>   .box {       width: 100px;       height: 100px;       padding: 10px;       margin: 10px;       border: 5px solid #ccc;       background-color: #ccc;   }</style><div class="box"></div>

    var ele = document.querySelector(".box");    el.currentStyle.width // "100px"

缺点: 非标准属性, 只有在IE中使用;

window.getComputedStyle

获取应用于当前元素的计算后的CSS样式。可以是动画应用的当前值，也可以是样式表设置的值。

从API描述来看,既然是获取计算后的,那么肯定可包含行内样式、内联样式、外部样式.

先来看看具体实例:

<style>.box {   width: 100px;   height: 100px;   padding: 10px;   margin: 10px;   border: 5px solid #ccc;   background-color: #ccc;}</style><div class="box"></div>

<div class="box" style="    width: 100px;    height: 100px;    padding: 10px;    margin: 10px;    border: 5px solid #ccc;    background-color: #ccc;"></div>

    var ele = document.querySelector(".box");    var getComputedStyle = window.getComputedStyle(ele);     getComputedStyle.width // "100px"

优点:

- 获取所有应用在元素上的样式.- 现在浏览器都支持 IE9+, Frifox, Chrome, Safire, Opera, Edge 等 更多兼容可以查看 [Can I Use](https://caniuse.com/#search=getComputedStyle)

缺点：

- 不支持低版本IE浏览器.

element.getBoundingClientRect()

概述

Method to get the size and position of an element's bounding box, relative to the viewport

方法获取相对于视口的元素大小和位置信息.

语法

rectObject = object.getBoundingClientRect();

返回值为 DOMRect 对象, 这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的 CSS 边框集合。

针对前面的例子,使用下 getBoundingClientRect, 如下:

<style>.box {    width: 100px;    height: 100px;    padding: 10px;    margin: 10px;    border: 5px solid #ccc;    background-color: #ccc;}</style><div class="box"></div>

var ele = document.querySelector(".box");ele.getBoundingClientRect(); // DOMRect { x: 18, y: 10, width: 100, height: 100, top: 10, right: 118, bottom: 110, left: 18 }

x:      表示左侧距离视口左边距离y:      表示距离视口顶部距离width:  表示元素的 width (如果box-sizing: border-box; width= content width + padding + border; 否则就为: content width) height: 表示元素的 height(如果box-sizing: border-box; height= content height+ padding + border; 否则就为: content height) top:    盒子顶部(边框)到视口顶部的距离left:   盒子左侧到视口左侧的距离bottom: 盒子底部到视口顶部的距离right:  盒子右边到视口左侧的距离

优点

相比其它的, 获取值更加精准

缺点

在IE9中不支持X、Y属性, 在IE8以及以下低版本中不兼容.

注意：

当计算边界矩形时, 会考虑视口区域（或其他可滚动元素）内的滚动操作, 也就是说当发生滚动时, 其相应的值会跟着变化. top、left等都会发生变化. 因此,它们的值相对于可视区域的,而并不是绝对的.

通过图来理解下上面这句话:

左侧 为滚动前, 右侧 为滚动后; 明显看出同一个元素在不同情况下获取的Top、Left不一样;

如果想获取元素相对于网页左上角定位的属性值,那么只要在 top、left 基础上加上滚动的值(window.scrollY 、 window.scrillX).
由于 window.scrollY 、 window.scrollX 在火狐、IE上不支持. 考虑兼容处理,可以使用window.pageYOffset 、 window.pageXOffset进行替换.

兼容列表如下:

window.scrollY 与 window.scrollX

Chrome	Firfox	IE	Opera	Safari
Yes	No	No	No	No

window.pageYOffset 与 window.pageXOffset

Chrome	Firfox	IE	Opera	Safari
Yes	Yes	IE9+	Yes	Yes

IE8以下版本, scollY 与 pageYOffset 都不支持, 必须使用其他的非标准属性来获取. 如下:

// 不支持,则 pageXOffset 属性不存在的var supportPageOffset = window.pageXOffset !== undefined;// 标准模式var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

解释下 document.compatMode 属性, 表示当前渲染模式是什么

``CSS1Compat`` 表示为标准模式;``BockCompat`` 表示为混杂模式.

由于这两种模式,不一样在IE中不一样; IE6以及以下的版本中不支持 document.documentElement.scrollTop;
关于渲染模式相关可以自行查阅其它的资料.