盒子模型

什么是盒子模型

在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: inherit j继承父级盒子模型
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的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。若没有设置宽度，则宽度为父元素的宽度。

CSS 盒子模型，绝对定位和相对定位相关推荐

Web前端基础知识：CSS盒子模型、绝对定位和相对定位
一:CSS盒子模型 CSS盒子模型概念:CSS盒子模型包含了内容(content).内边距(padding).边框(border).外边距(margin).宽度(width).高度(height)几个 ...
转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局浮动流制作导航栏如何页面布局定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
CSS盒子模型之详解
前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局. 一.css盒子模型概念 CSS盒子模型又称框模型 (Box Model) ,包 ...
简述对css盒子模型的理解_css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
css中盒模型的属性包括(),css的盒子模型属性有哪些？css盒子模型相关属性的介绍...
本篇文章给大家带来的内容是关于css的盒子模型属性有哪些?css盒子模型相关属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.盒子模型图 2.一个简单的盒子模型 box. ...
CSS盒子模型/页面布局
1.盒子模型页面布局要学习三大核心,盒子模型,浮动和定位.学好盒子模型对我们布局页面帮助很大! 1.1看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子利用CSS设置 ...
CSS学习（第三天）（层叠性、继承性、优先级，CSS 盒子模型）
紧接第二天 CSS学习第三天 5 CSS的三大特性 5.1 层叠性 5.2 继承性 5.2.1 行高的继承 5.3 优先级 5.3.1 优先级(注意) 5.3.2 优先级(权重叠加) 6 CSS 盒子 ...
CSS盒子模型详解(清除无序列表的项目符号)
CSS盒子模型详解(清除无序列表的项目符号) 网页的布局过程准备好相关的网页元素(盒子) 利用CSS设置好盒子的样式以及在网页中的摆放位置往盒子里面装东西盒子模型(box model) 网页中, ...
CSS盒子模型、圆角边框、盒子/文字阴影
目录 CSS盒子模型网页布局过程: 盒子模型(Box Model)组成边框(border) 表格的细线边框边框会影响盒子实际大小内边距(padding) padding应用-新浪导航编辑 ...

CSS 盒子模型，绝对定位和相对定位