盒子模型

什么是盒子模型

在HTML文档中，每个元素都有盒子模型。由外到内分别为最外边距区域(margin area)，边框区域(border area)，内边距区域(padding area)和内容区域(content area)。

一个简单的例子：

<div class="content"></div>

.content {width: 200px;height: 200px;margin: 50px;border: 25px solid #57adb7;padding: 25px;background-color: #49657e;}

这个元素的盒模型 如下：

我们发现此时的元素高度和宽度都是 300px，而不是内容区的 200px。因为这里使用的是 W3C 的标准盒模型，下面我们将介绍另一种盒模型——IE盒模型。

两种盒模型

box-sizing 属性

可以设置box-sizing属性来设置应用哪种盒模型。

box-sizing: content-box是W3C盒子模型

box-sizing: border-box是IE盒子模型

box-sizing: inheritj继承父级盒子模型

box-sizing的默认属性是content-box

W3C标准盒模型

box-sizing: content-box:

在标准的盒子模型中，width仅指content部分的宽度。

IE 盒模型

box-sizing: border-box:

在IE盒子模型中，width表示content+padding+border这三个部分的宽度。

最佳写法

如果需要统一设置使用哪种盒子模型，最好的写法是像下面这样通过继承的方式设置。

html {box-sizing: border-box;}*,*::before,*::after {box-sizing: inherit;}

绝对定位和相对定位

什么是绝对定位

position: absolute;绝对定位：

绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。

绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制层级。

position: absolute;top: 0px;left: 200px;

脱离文档流，下方元素上移。

什么是相对定位

position: relative;相对定位：

相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

position: relative;top: -50px;left: 200px;

总结：

Absolution：元素会脱离文档流，定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。定位为absolution后，原来的位置相当于是空的，下面的元素会上来占据。会隐式地改变display的类型（display：none除外），让元素以display:inline-block的方式进行显示。

Relative：元素仍处于文档流中，定位是相对于原本自身的位置（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。若没有设置宽度，则宽度为父元素的宽度。