溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“div與span怎么使用”，在日常操作中，相信很多人在div與span怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”div與span怎么使用”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！
DIV標(biāo)記的基本用法、常用屬性。
DIV嵌套與層疊的含義。
SPAN標(biāo)記的語法，靈活使用SPAN標(biāo)記。
DIV與SPAN標(biāo)記在使用上的差異。DIV用于多行的、大片區(qū)的；SPAN用于行內(nèi)標(biāo)記。
使用DIV+CSS進(jìn)行和簡(jiǎn)易頁面布局。
塊級(jí)元素(block level element)在瀏覽器顯示時(shí)通常會(huì)以新行開始。
例如：<h2>、<p>、<ul>、<table>
內(nèi)聯(lián)元素(inline element)在瀏覽器顯示時(shí)通常不以新行開始。
例如：<b>、<tb>、<a>、<img>
HTML<div>元素是塊級(jí)元素，它是用于組合其他HTML元素的容器。
<div>元素沒有特定的含義。由于它屬于塊級(jí)元素，瀏覽器會(huì)在其前后顯示換行。
如果與CSS一同使用，<div>元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性。
<div>元素的另一個(gè)常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。
案例1：
<!DOCTYPE html>
<html>
<head>
<title>div元素是塊級(jí)元素 </title>
<style>
.cities {
background-color: black;
color: white;
margin: 20px; /* 容器外邊距 */
padding: 20px; /* 容器內(nèi)邊距 */
}
</style>
</head>
<body>
<div class="cities">
<h3>London</h3>
<p>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<!-- 默認(rèn)的，我們知道，div是占滿一行的 -->
<!-- 把兩個(gè)div顯示在一行,就需要float，設(shè)置第一個(gè)div的float為left -->
<div >11111</div>
<div >2222</div>
<!-- css的定義是后面的可以覆蓋前面的 -->
<!-- clear是清除的意思，它有三個(gè)值，left,right,both,
如果設(shè)置了clear:left，就不讓它的左邊有float，
同理clear:right,clear:both， -->
<div >test</div>
<div >hello</div>
</div>
</body>
</html>注意：搞清楚margin、padding、border這三個(gè)概念，不能混淆。
margin：容器自身與其他容器之間的距離
padding：容器內(nèi)部的內(nèi)容(content)與容器邊框的距離。
border：容器的邊框。
另外：top表示上、bottom表示下、left表示左、right表示右。
案例2：
<!DOCTYPE html>
<html>
<head>
<title>div元素沒有特定的含義</title>
<style>
.cities {
background-color: rgb(7, 6, 6);
color: white;
margin: 20px;
padding: 20px;
}
span.red {
color: red;
}
h2{
text-align: center;
}
</style>
</head>
<body>
<h2>重點(diǎn)： <span class="red">div使用</span> span使用對(duì)比</h2>
<div class="cities">
<h3>London</h3>
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="cities">
<h3>Paris</h3>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="cities">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
講解：
在這個(gè)案例中通過合理設(shè)置margin和padding，使得不同的div之間有合理的間距，div內(nèi)部文本也有恰當(dāng)?shù)拈g距。
注意span標(biāo)記的用法，它是對(duì)指定內(nèi)容做特殊處理用的。在上述案例中對(duì)"div使用"改變了字體顏色。
案例3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV嵌套與層疊</title>
<style>
.div1 {
padding: 50px;
background: red;
width: 400px;
height: 400px;
position: relative;
left: 10px;
top: 10px;
}
.div2 {
padding: 60px;
background: green;
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">使用DIV+CSS進(jìn)行和簡(jiǎn)易頁面布局</div>
</div>
</body>
</html>
講解：
在.div1中定義了padding內(nèi)部邊距為50像素、background背景色為紅色、width容器寬度為400像素、height容器高度為400像素、position定位類型為relative相對(duì)定位(相對(duì)定位會(huì)按照元素的原始位置對(duì)該元素進(jìn)行移動(dòng))、left為容器左邊坐標(biāo)是10像素、top為容器上邊坐標(biāo)是10像素。
在.div2中定義了padding內(nèi)部邊距位60像素、background背景色為綠色、position定位類型為absolute絕對(duì)定位(絕對(duì)定位會(huì)按照頁面的絕對(duì)位置定位元素，通過絕對(duì)定位可以將指定元素放置在頁面上指定位置)，left為容器左邊坐標(biāo)是0像素、top為容器上邊坐標(biāo)是0像素。
postion定位類型有三種：
關(guān)注第二個(gè)塊，這是正常狀態(tài)或者說是相對(duì)定位水平及垂直偏移量為0時(shí)的初始位置：
position:relative;相對(duì)定位：對(duì)某元素設(shè)置了相對(duì)定位，那么首先這個(gè)元素會(huì)出現(xiàn)在文檔流中該出現(xiàn)的位置，然后再根據(jù)該位置按設(shè)定的偏移量進(jìn)行移動(dòng)。
+ 這是第二個(gè)塊在使用相對(duì)定位左邊偏移50像素和上邊偏移30像素后的結(jié)果。請(qǐng)注意：它有部分內(nèi)容與第三個(gè)塊重疊了，但它位于文檔流中的初始位置仍然還在占著(虛線框標(biāo)示的地方)，即使把偏移量設(shè)得再大它的初始位置也不會(huì)被第三個(gè)塊填補(bǔ)。同時(shí)它的偏移位置也不會(huì)把別的塊在文檔流的位置擠開，如果有重疊它會(huì)和其他元素重疊。
position:absolute;絕對(duì)定位：相對(duì)于頁面的絕對(duì)值來對(duì)元素進(jìn)行定位。
下圖中第二個(gè)塊是未使用絕對(duì)定位時(shí)的樣式。
使用了絕對(duì)定位的元素會(huì)脫離文檔流，即它原來的位置會(huì)被其他元素占用，而且它會(huì)和其他元素重疊。
案例：
要使用絕對(duì)定位時(shí)，必須要有2個(gè)條件(口訣：父相子絕)：
必須給父元素(也可以是祖父級(jí)、曾祖父級(jí))增加定位屬性，一般建議使用position:relative。
給子元素加絕對(duì)定位position:absolute，同時(shí)指定left、right、top、bottom屬性。
+ 下圖中的第二個(gè)塊是使用了絕對(duì)定位時(shí)的樣式。
position:fixed;固定定位：將元素放置在瀏覽器窗口的固定位置，即使窗口滾動(dòng)它也不會(huì)移動(dòng)。
Fixed定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。
Fixed定位的元素會(huì)和其他元素重疊。
position:fstatic;靜態(tài)定位：HTML元素的默認(rèn)值，即沒有定位，遵循正常的文檔流對(duì)象。另外靜態(tài)定位的元素不會(huì)受到 top、bottom、left、right影響。
HTML<span>元素是內(nèi)聯(lián)元素，可用作文本的容器。
<span>元素沒有特定的含義。
當(dāng)與CSS一同使用時(shí)，<span>元素可用于為指定文本設(shè)置樣式屬性。
<div>用來定義文檔中的division分區(qū)或section節(jié)。
<span>用來指定文檔中的行內(nèi)元素。
div(division/section)定義
<div> </div>是一個(gè)塊級(jí)(block-level)元素，其前后均有換行符，可定義文檔中的分區(qū)或節(jié)。
基本語法
<div id="layer1" class=" " >塊包含的內(nèi)容</div>
position:定位，static|absolute|relative|fixed，其中static是默認(rèn)值
width|height:圖層的寬度|圖層的高度
left|top:左邊距|上邊距
border:邊框，“粗細(xì) 形狀 顏色”
z-index:圖層重疊，子層永遠(yuǎn)在父層之上，值越大越在上層，前提條件是position屬性值為“absolute”。
clear
clear:none，默認(rèn)值，允許兩邊有浮動(dòng)元素。
clear:left，不許左邊有浮動(dòng)元素。
clear:right，不行右邊有浮動(dòng)元素。
clear:both，不許有浮動(dòng)元素。
fload
fload:left，當(dāng)前元素向左浮動(dòng)。
fload:right，當(dāng)前元素向右浮動(dòng)。
fload:none，當(dāng)前元素不浮動(dòng)。
圖層包含其它圖層，稱為圖層的嵌套。
圖層嵌套經(jīng)常需要與CSS樣式一起使用，達(dá)到更加精確控制頁面顯示效果。
案例1，圖層嵌套：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖層的嵌套</title>
<style type="text/css">
.inline_div {
display: inline-block;
/* 行內(nèi)顯示方式*/
}
#wrap {
width: 450px;
height: 250px;
border: 2px solid black;
}
#d1{
height: 100px;
width: 225px;
background-color: green;
margin: 20px red;
float: left;
/*margin表示邊距*/
}
#d2 {
height: 100px;
width: 225px;
background-color: green;
margin: 20px red;
float: left;
/*margin表示邊距*/
}
#d2 {
background-color: yellow;
}
#d3 {
height: 80px;
width: 400;
border: 2px solid black;
background-color: #66ff33;
margin: 0 auto;
clear: both;
}
h4 {
font-size: 28px;
color: #0033ff;
}
</style>
</head>
<body>
<h4>圖層嵌套的應(yīng)用</h4>
<div id="wrap">
<div id="d1" class="inline_div">圖層包含其它圖層，稱為圖層的嵌套。
</div>
<div id="d2" class="inline_div">圖層嵌套經(jīng)常需要與CSS樣式一起使用</div>
<div id="d3">使用DIV+CSS進(jìn)行和簡(jiǎn)易頁面布局</div>
</div>
</body>
</html>
案例2，圖層重疊：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖層重疊</title>
<style type="text/css">
body {
margin: 0;
/*margin表示邊距*/
}
div {
position: absolute;
/* 定位方式為絕對(duì)定位 */
width: 200px;
height: 200px;
}
#d1 {
background-color: black;
color: white;
/* z-index:圖層層疊，子層永遠(yuǎn)在父層之上，值越大越在上層,前提條件是position屬性值為“absolute”。 */
z-index: 0;
/* 該圖層在最下面 */
}
#d2 {
background-color: red;
top: 25px;
left: 50px;
z-index: 1;
/* 該圖層在中間 */
}
#d3 {
background-color: yellow;
top: 50px;
left: 100px;
z-index: 2;
/* 該圖層在最上面 */
}
</style>
</head>
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
</body>
</html>
div標(biāo)記和span標(biāo)記默認(rèn)情況下都沒有對(duì)標(biāo)記內(nèi)的內(nèi)容進(jìn)行格式化或渲染，只有使用CSS來定義相應(yīng)的樣式才會(huì)顯示出不同。
div標(biāo)記是塊標(biāo)記，一般包含較大范圍，在區(qū)域的前后會(huì)自動(dòng)換行；span標(biāo)記是行內(nèi)標(biāo)記，一般包含范圍較窄，通常在一行內(nèi)，在此區(qū)域的范圍外不會(huì)自動(dòng)換行。
一般來說，div標(biāo)記可以包含span標(biāo)記，但span標(biāo)記不能包含div標(biāo)記。
但是塊標(biāo)記和行標(biāo)記不是絕對(duì)的，可以通過定義CSS的display屬性來相互轉(zhuǎn)換。
案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div的使用</title>
<style type="text/css">
div {
background-color: #f6f6f6;
color: #000000;
height: 2em;
margin: 2px;
/*margin表示邊距*/
}
.inline_disp {
display: inline;
/*改變div顯示方式*/
}
.block_disp {
display: block;
/*改變span顯示方式*/
height: 4em;
background-color: rgb(200, 200, 200);
margin: 2px;
/*margin表示邊距*/
}
</style>
</head>
<body>
<div id="d1">這是div1</div>
<div id="d2">這是div2</div>
<span id="s1">這是span1</span>
<span id="s2">這是span2</span>
<div id="d3" class="inline_disp">這是div3</div>
<div id="d4" class="inline_disp">這是div4</div>
<span id="s3" class="block_disp">這是span3，在使用CSS排版的頁面中，div標(biāo)記和span標(biāo)記是兩個(gè)常用的標(biāo)記。利用這兩個(gè)標(biāo)記，加上CSS對(duì)其樣式的控制，可以很方便的實(shí)現(xiàn)各種效果。</span>
<span id="s4" class="block_disp">這是span4，在使用CSS排版的頁面中，div標(biāo)記和span標(biāo)記是兩個(gè)常用的標(biāo)記。利用這兩個(gè)標(biāo)記，加上CSS對(duì)其樣式的控制，可以很方便的實(shí)現(xiàn)各種效果。</span>
</body>
</html>display:inline;指定元素顯示在行內(nèi)。
display:block;指定元素顯示在塊內(nèi)。
<div>元素常用作布局工具，因?yàn)槟軌蜉p松地通過CSS對(duì)其進(jìn)行定位。
案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖層重疊</title>
<style type="text/css">
body {
margin: 0;
/*margin表示邊距*/
}
div {
position: absolute;
/* 定位方式為絕對(duì)定位 */
width: 200px;
height: 200px;
}
#d1 {
background-color: black;
color: white;
/* z-index:圖層層疊，子層永遠(yuǎn)在父層之上，值越大越在上層,前提條件是position屬性值為“absolute”。 */
z-index: 0;
/* 該圖層在最下面 */
}
#d2 {
background-color: red;
top: 25px;
left: 50px;
z-index: 1;
/* 該圖層在中間 */
}
#d3 {
background-color: yellow;
top: 50px;
left: 100px;
z-index: 2;
/* 該圖層在最上面 */
}
</style>
</head>
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
</body>
</html>
HTML5提供的新語義元素定義了網(wǎng)頁的不同部分：
| 標(biāo)簽 | 用途 |
|---|---|
| header | 定義文檔或節(jié)的頁眉 |
| nav | 定義導(dǎo)航鏈接的容器 |
| section | 定義文檔中的節(jié) |
| article | 定義獨(dú)立的自包含文章 |
| aside | 定義內(nèi)容之外的內(nèi)容(比如側(cè)欄) |
| footer | 定義文檔或節(jié)的頁腳 |
| details | 定義額外的細(xì)節(jié) |
| summary | 定義details元素的標(biāo)題 |
使用<header>、<nav>、<section>以及<footer>來創(chuàng)建多列布局。
案例：
<!DOCTYPE html>
<html>
<head>
<title> 使用 HTML5 的網(wǎng)站布局</title>
<style>
header {
background-color: black;
color: white;
text-align: center;
padding: 5px;
}
nav {
line-height: 30px;
background-color: #eeeeee;
height: 300px;
width: 100px;
float: left;
padding: 5px;
}
section {
width: 350px;
float: left;
padding: 10px;
}
footer {
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<header>
<h2>City Gallery</h2>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<footer>
Copyright W3Schools.com
</footer>
</body>
</html>
display：規(guī)定元素應(yīng)該生成的顯示框類型。
對(duì)于HTML等文檔類型，如果使用display不謹(jǐn)慎會(huì)很危險(xiǎn)，因?yàn)榭赡苓`反HTML中已經(jīng)定義的顯示層次結(jié)構(gòu)。
| 屬性 | 用途 |
|---|---|
| none | 此元素不會(huì)被顯示。 |
| block | 此元素將顯示為塊級(jí)元素，前后有換行。 |
| inline | 默認(rèn)，此元素會(huì)被顯示為內(nèi)聯(lián)元素，前后沒有換行。 |
| inherit | 繼承父元素的display屬性值。 |
到此，關(guān)于“div與span怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼