html開發(fā)筆記21-div和span兩個排版標(biāo)簽簡

html開發(fā)筆記21-div和span兩個排版標(biāo)簽簡介

、div 和 span 標(biāo)簽的作用

1、div標(biāo)簽：一般用于存放圖片、文字、視頻、等網(wǎng)頁內(nèi)容，也就相當(dāng)于存放一切內(nèi)容，可以理解為一個大大的盒子。

2、span標(biāo)簽：一般只用于存放文字。

3、這兩個標(biāo)簽沒有具體的語義，不像<h>標(biāo)簽必須存放標(biāo)題。

二、div和span標(biāo)簽在網(wǎng)頁中的作用

1、div 一般適用于網(wǎng)頁布局的時候，比如下圖：

2、span 標(biāo)簽在你不知道用什么標(biāo)簽容納文字內(nèi)容的時候使用，只是用于和其他的標(biāo)簽進(jìn)行區(qū)分用。

IV+CSS標(biāo)準(zhǔn)化布局的優(yōu)勢

使用“DIV+CSS”對網(wǎng)站進(jìn)行布局符合W3C標(biāo)準(zhǔn)，采用這種方式布局通常是為了說明與HTML表格定位方式的區(qū)別。因為現(xiàn)在的網(wǎng)站設(shè)計標(biāo)準(zhǔn)中，已經(jīng)不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實現(xiàn)各種定位。通過使用div盒子模型結(jié)構(gòu)將各部分內(nèi)容劃分到不同的區(qū)塊，然后用css來定義盒子模型的位置、大小、邊框、內(nèi)外邊距、排列方式等。簡單地說，div用于搭建網(wǎng)站結(jié)構(gòu)（框架）、css用于創(chuàng)建網(wǎng)站表現(xiàn)（樣式/美化）。該標(biāo)準(zhǔn)簡化了HTML頁面代碼，獲得一個較優(yōu)秀的網(wǎng)站結(jié)構(gòu)，有利于日后網(wǎng)站維護(hù)、協(xié)同工作和便于搜索引擎抓取。當(dāng)然并不是所有的網(wǎng)頁都需要用div布局，例如數(shù)據(jù)頁面、報表之類的頁面，還是使用HTML的表格會比較方便，web標(biāo)準(zhǔn)里并沒有說要拋棄table。

DIV+CSS標(biāo)準(zhǔn)的優(yōu)點(diǎn)

表現(xiàn)和內(nèi)容相分離
代碼簡潔，提高頁面瀏覽速度
易于維護(hù)和改版
提高搜索引擎對網(wǎng)頁的索引效率

各個瀏覽器之間的差異

安裝多種瀏覽器,對比差異進(jìn)行調(diào)試
在FF瀏覽器中安裝firebug

Firebug 為你的 Firefox 集成了瀏覽網(wǎng)頁的同時隨手可得的豐富開發(fā)工具。你可以對任何網(wǎng)頁的 CSS、HTML 和 JavaScript 進(jìn)行實時編輯、調(diào)試和監(jiān)控

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

“無意義”的元素div和span

HTML只是賦予內(nèi)容的手段，大部分HTML標(biāo)簽都有其意義（例如，標(biāo)簽p創(chuàng)建段落，h1標(biāo)簽創(chuàng)建標(biāo)題等等）的，然而div和span標(biāo)簽似乎沒有任何內(nèi)容上的意義，聽起來就像一個泡沫做成的錘子一樣無用。但實際上，與CSS結(jié)合起來后，它們被用得十分廣泛。你所需要記住的是span和div是“無意義”的標(biāo)簽。它們的存在純粹是應(yīng)用樣式，所以當(dāng)樣式表失效時它就沒有任何的作用

它們被用來組合成一大塊的HTML代碼并賦予一定的信息，大部分用類屬性class和標(biāo)識屬性id與元素聯(lián)系起來。span和div的不同之處在于span是內(nèi)聯(lián)的，用在一小塊的內(nèi)聯(lián)HTML中。而div（division）元素是塊級的（簡單地說，它等同于其前后有斷行），用于組合一大塊的代碼，為HTML 文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景的元素，可以包含段落、標(biāo)題、表格甚至其他部分，這使div便于建立不同集成的類。

div的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個塊的，其中所包含元素的特性由div標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進(jìn)行控制。

盒子模型

每個HTML元素都可以看作一個裝了東西的盒子，盒子具有寬度（width）和高度（height），盒子里面的內(nèi)容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）。

布局中的主要樣式

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

定位屬性

區(qū)塊屬性(區(qū)塊模型)

區(qū)塊框浮動

雖然使用絕對定位可以實現(xiàn)頁面布局，但由于調(diào)整某個區(qū)塊框時其它區(qū)塊的位置并不會跟隨著改變，所以并不是布局的首選方式。而使用浮動的區(qū)塊框可以向左或向右移動，直到它的外邊緣碰到包含它區(qū)塊的邊框或另一個浮動框的邊框為止。并且由于浮動框不在文檔的普通流中，所以文檔的普通流中的區(qū)塊框表現(xiàn)得就像浮動框不存在一樣。

設(shè)置浮動

行框和清理

在進(jìn)行頁面布局時，經(jīng)常需要設(shè)置多個區(qū)塊框并列在一行中排列。最常見的方式就是使用float屬性，再通過left或right值移動區(qū)塊框向左或向右浮動。但當(dāng)前面并列的多個區(qū)塊框總寬度不足包含框的100%時，就會在行框中留出一定的寬度，而下面的某個區(qū)塊框又恰好滿足這個寬度，則很可能會向上提，和上一行并列的區(qū)塊框在同一行排列。而這不并是我們想要的結(jié)果，所以可以使用clear屬性解決這一問題，該屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應(yīng)該挨著浮動框。

使用區(qū)塊框設(shè)計頁面布局

區(qū)塊居中設(shè)計

高度和寬度固定的區(qū)塊居中（position）

高度和寬度可變的區(qū)塊居中(margin)

布局頁面居中
設(shè)置兩列浮動的布局
設(shè)置三列浮動的布局
設(shè)置多列浮動的布局

近幾年，前端經(jīng)歷了飛速發(fā)展，每隔幾個月，就有新的技術(shù)框架產(chǎn)生，如果你有1年多沒有接觸過它，那么再上手的時候，你一定會對它感到陌生，似乎一不留神，自己就已經(jīng)被無情拋棄了。

面對著js框架的飛速發(fā)展，得益于babel技術(shù)，瀏覽器可以很快地使用新的框架技術(shù)，vue，angular，react似乎也已經(jīng)統(tǒng)治了好久好久。

而作為前端三劍客的css呢?似乎css3已經(jīng)是很久很久的事情了，久到了我們不知道它是否還在更新，css是否還有新的技術(shù)產(chǎn)生。

雖然各種scss，stylus，less預(yù)處理器提高了我們代碼的開發(fā)和維護(hù)，但是css依然缺少一個一擊致命，一劍封喉的技術(shù)。

慶幸的是，我們等到了grid的到來，它的到來宣布了css布局從此進(jìn)入了grid時代。

table布局

早期的網(wǎng)頁布局是采用table的，也就是所有的內(nèi)容都會放到table里面，如果想要內(nèi)嵌布局，就會采用table嵌套table，那個時候可以說布局很簡單，因為就是使用table，但是table過于繁瑣，因此也產(chǎn)生了大量無用的代碼。

div+css

css浮動的出現(xiàn)，徹底解放了網(wǎng)頁布局，目前主流的網(wǎng)頁采用的都是div+css的布局，這種布局簡化了代碼結(jié)構(gòu)，通過使用css來定位元素位置，可以說這種布局極大程度上網(wǎng)站的開發(fā)效率，同時網(wǎng)頁的可維護(hù)性也得到大大提高。

grid王者到來

首先我們看下grid的支持情況，從下面的圖片可以看到，主流瀏覽器都是支持的，特別是在最新版的ie也采用和chrome一樣的內(nèi)核之后，可以說現(xiàn)在前端開發(fā)終于迎來了最幸福的時刻。

這是一個非常棒的布局解決方案。自從網(wǎng)絡(luò)誕生以來，我們就一直在努力設(shè)計我們的網(wǎng)站，強(qiáng)迫他們?nèi)ミm應(yīng)和使用那些不適合他們的方式。

不過網(wǎng)格布局的出現(xiàn)，直接從瀏覽器解決了我們布局的復(fù)雜性，我們不再需要復(fù)雜的css來生成網(wǎng)格布局，不需要使用bootstrap這樣的網(wǎng)格框架來布局，我們可以使用簡單的grid布局來完成。

使用grid的優(yōu)點(diǎn)

我們可以創(chuàng)建任意數(shù)量的網(wǎng)格。
fraction unit 使得控制布局比例非常方便。
repeat可以重復(fù)布局。
最簡原則，只需要定義需要使用的行和列。
網(wǎng)格支持命名

如何使用

聲明 display:grid;
定義列 grid-template-columns: 100px 100px 100px;
設(shè)置間距，grid-row-gap: 20px;

在線咨詢

上一篇：“超級電容紙”，可讓你的電腦卷起來放進(jìn)口袋
下一篇：相對HTML4，HTML5中新增的6大表單屬性，你掌

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商