、div 和 span 标签的作用

1、div标签：一般用于存放图片、文字、视频、等网页内容，也就相当于存放一切内容，可以理解为一个大大的盒子。

2、span标签：一般只用于存放文字。

3、这两个标签没有具体的语义，不像<h>标签必须存放标题。

二、div和span标签在网页中的作用

1、div 一般适用于网页布局的时候，比如下图：

2、span 标签在你不知道用什么标签容纳文字内容的时候使用，只是用于和其他的标签进行区分用。

IV+CSS标准化布局的优势

使用“DIV+CSS”对网站进行布局符合W3C标准，采用这种方式布局通常是为了说明与HTML表格定位方式的区别。因为现在的网站设计标准中，已经不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。通过使用div盒子模型结构将各部分内容划分到不同的区块，然后用css来定义盒子模型的位置、大小、边框、内外边距、排列方式等。简单地说，div用于搭建网站结构（框架）、css用于创建网站表现（样式/美化）。该标准简化了HTML页面代码，获得一个较优秀的网站结构，有利于日后网站维护、协同工作和便于搜索引擎抓取。当然并不是所有的网页都需要用div布局，例如数据页面、报表之类的页面，还是使用HTML的表格会比较方便，web标准里并没有说要抛弃table。

DIV+CSS标准的优点

• 表现和内容相分离
• 代码简洁，提高页面浏览速度
• 易于维护和改版
• 提高搜索引擎对网页的索引效率

各个浏览器之间的差异

• 安装多种浏览器,对比差异进行调试
• 在FF浏览器中安装firebug

Firebug 为你的 Firefox 集成了浏览网页的同时随手可得的丰富开发工具。你可以对任何网页的 CSS、HTML 和 JavaScript 进行实时编辑、调试和监控

就算在不同的浏览器中效果不完全一致，也要做到大概一至

“无意义”的元素div和span

• HTML只是赋予内容的手段，大部分HTML标签都有其意义（例如，标签p创建段落，h1标签创建标题等等）的，然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用

• 它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联的，用在一小块的内联HTML中。而div（division）元素是块级的（简单地说，它等同于其前后有断行），用于组合一大块的代码，为HTML 文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的类。

• div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

盒子模型

每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。

布局中的主要样式

• font
• line-height
• color
• margin
• padding
• border
• text-align
• background

定位属性

区块属性(区块模型)

区块框浮动

虽然使用绝对定位可以实现页面布局，但由于调整某个区块框时其它区块的位置并不会跟随着改变，所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动，直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流中，所以文档的普通流中的区块框表现得就像浮动框不存在一样。

设置浮动

行框和清理

在进行页面布局时，经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性，再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时，就会在行框中留出一定的宽度，而下面的某个区块框又恰好满足这个宽度，则很可能会向上提，和上一行并列的区块框在同一行排列。而这不并是我们想要的结果，所以可以使用clear属性解决这一问题，该属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

使用区块框设计页面布局

• 区块居中设计

高度和宽度固定的区块居中（position）

高度和宽度可变的区块居中(margin)

• 布局页面居中
• 设置两列浮动的布局
• 设置三列浮动的布局
• 设置多列浮动的布局

近几年，前端经历了飞速发展，每隔几个月，就有新的技术框架产生，如果你有1年多没有接触过它，那么再上手的时候，你一定会对它感到陌生，似乎一不留神，自己就已经被无情抛弃了。

面对着js框架的飞速发展，得益于babel技术，浏览器可以很快地使用新的框架技术，vue，angular，react似乎也已经统治了好久好久。

而作为前端三剑客的css呢?似乎css3已经是很久很久的事情了，久到了我们不知道它是否还在更新，css是否还有新的技术产生。

虽然各种scss，stylus，less预处理器提高了我们代码的开发和维护，但是css依然缺少一个一击致命，一剑封喉的技术。

庆幸的是，我们等到了grid的到来，它的到来宣布了css布局从此进入了grid时代。

table布局

早期的网页布局是采用table的，也就是所有的内容都会放到table里面，如果想要内嵌布局，就会采用table嵌套table，那个时候可以说布局很简单，因为就是使用table，但是table过于繁琐，因此也产生了大量无用的代码。

div+css

css浮动的出现，彻底解放了网页布局，目前主流的网页采用的都是div+css的布局，这种布局简化了代码结构，通过使用css来定位元素位置，可以说这种布局极大程度上网站的开发效率，同时网页的可维护性也得到大大提高。

grid王者到来

首先我们看下grid的支持情况，从下面的图片可以看到，主流浏览器都是支持的，特别是在最新版的ie也采用和chrome一样的内核之后，可以说现在前端开发终于迎来了最幸福的时刻。

这是一个非常棒的布局解决方案。自从网络诞生以来，我们就一直在努力设计我们的网站，强迫他们去适应和使用那些不适合他们的方式。

不过网格布局的出现，直接从浏览器解决了我们布局的复杂性，我们不再需要复杂的css来生成网格布局，不需要使用bootstrap这样的网格框架来布局，我们可以使用简单的grid布局来完成。

使用grid的优点

• 我们可以创建任意数量的网格。
• fraction unit 使得控制布局比例非常方便。
• repeat可以重复布局。
• 最简原则，只需要定义需要使用的行和列。
• 网格支持命名

如何使用

1. 声明 display:grid;
2. 定义列 grid-template-columns: 100px 100px 100px;
3. 设置间距，grid-row-gap: 20px;