前端基本功之div

DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。

这是百度百科对于div的定义，div一般叫它盒子，它是html中的一个标签

 

标签定义及使用说明

标签定义 ：HTML 文档中的一个分隔区块或者一个区域部分。

标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

可以对同一个标签同时应用 class 或 id 属性，但通常情况下我们偏向于只使用其中一种。

为了避免麻烦，可以不必为每一个标签都加上 class 或 id 属性。

元素经常与 CSS 一起使用，用来布局网页。

下面直接上图

盒子模型

DIV盒子模型：

从外到内依次包括： 

margin：外边距

border：边框

padding：内补白

content：内容 

padding就是内容与边框的空隙。就相当于一个盒子内部周围的填充物

margin 则是模块与模块的空隙。

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

div的实际宽度为：元素的宽度+padding宽度*2+border宽度*2+margin宽度*2

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。背景应用于由内容和内边距、边框组成的区域。