、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;