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; content width; 否则就为:  content width + padding + border ) 
height: 表示元素的 height(如果box-sizing: border-box; content height 否则就为: content height + padding + border) 
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;
关于渲染模式相关可以自行查阅其它的资料.

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