html開(kāi)發(fā)筆記21-div和span兩個(gè)排版標(biāo)簽簡(jiǎn)

html開(kāi)發(fā)筆記21-div和span兩個(gè)排版標(biāo)簽簡(jiǎn)介

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

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

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

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

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

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

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

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

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

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

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

各個(gè)瀏覽器之間的差異

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

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

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

“無(wú)意義”的元素div和span

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

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

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

盒子模型

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

布局中的主要樣式

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

定位屬性

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

區(qū)塊框浮動(dòng)

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

設(shè)置浮動(dòng)

行框和清理

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

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

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

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

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

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

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

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

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

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

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

table布局

早期的網(wǎng)頁(yè)布局是采用table的，也就是所有的內(nèi)容都會(huì)放到table里面，如果想要內(nèi)嵌布局，就會(huì)采用table嵌套table，那個(gè)時(shí)候可以說(shuō)布局很簡(jiǎn)單，因?yàn)榫褪鞘褂胻able，但是table過(guò)于繁瑣，因此也產(chǎn)生了大量無(wú)用的代碼。

div+css

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

grid王者到來(lái)

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

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

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

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

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

如何使用

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

在線咨詢(xún)

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商