溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“div與span怎么使用”，在日常操作中，相信很多人在div與span怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”div與span怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
DIV標記的基本用法、常用屬性。
DIV嵌套與層疊的含義。
SPAN標記的語法，靈活使用SPAN標記。
DIV與SPAN標記在使用上的差異。DIV用于多行的、大片區的；SPAN用于行內標記。
使用DIV+CSS進行和簡易頁面布局。
塊級元素(block level element)在瀏覽器顯示時通常會以新行開始。
例如：<h2>、<p>、<ul>、<table>
內聯元素(inline element)在瀏覽器顯示時通常不以新行開始。
例如：<b>、<tb>、<a>、<img>
HTML<div>元素是塊級元素，它是用于組合其他HTML元素的容器。
<div>元素沒有特定的含義。由于它屬于塊級元素，瀏覽器會在其前后顯示換行。
如果與CSS一同使用，<div>元素可用于對大的內容塊設置樣式屬性。
<div>元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。
案例1：
<!DOCTYPE html>
<html>
<head>
<title>div元素是塊級元素 </title>
<style>
.cities {
background-color: black;
color: white;
margin: 20px; /* 容器外邊距 */
padding: 20px; /* 容器內邊距 */
}
</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>
<!-- 默認的，我們知道，div是占滿一行的 -->
<!-- 把兩個div顯示在一行,就需要float，設置第一個div的float為left -->
<div >11111</div>
<div >2222</div>
<!-- css的定義是后面的可以覆蓋前面的 -->
<!-- clear是清除的意思，它有三個值，left,right,both,
如果設置了clear:left，就不讓它的左邊有float，
同理clear:right,clear:both， -->
<div >test</div>
<div >hello</div>
</div>
</body>
</html>注意：搞清楚margin、padding、border這三個概念，不能混淆。
margin：容器自身與其他容器之間的距離
padding：容器內部的內容(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>重點： <span class="red">div使用</span> span使用對比</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>
講解：
在這個案例中通過合理設置margin和padding，使得不同的div之間有合理的間距，div內部文本也有恰當的間距。
注意span標記的用法，它是對指定內容做特殊處理用的。在上述案例中對"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進行和簡易頁面布局</div>
</div>
</body>
</html>
講解：
在.div1中定義了padding內部邊距為50像素、background背景色為紅色、width容器寬度為400像素、height容器高度為400像素、position定位類型為relative相對定位(相對定位會按照元素的原始位置對該元素進行移動)、left為容器左邊坐標是10像素、top為容器上邊坐標是10像素。
在.div2中定義了padding內部邊距位60像素、background背景色為綠色、position定位類型為absolute絕對定位(絕對定位會按照頁面的絕對位置定位元素，通過絕對定位可以將指定元素放置在頁面上指定位置)，left為容器左邊坐標是0像素、top為容器上邊坐標是0像素。
postion定位類型有三種：
關注第二個塊，這是正常狀態或者說是相對定位水平及垂直偏移量為0時的初始位置：
position:relative;相對定位：對某元素設置了相對定位，那么首先這個元素會出現在文檔流中該出現的位置，然后再根據該位置按設定的偏移量進行移動。
+ 這是第二個塊在使用相對定位左邊偏移50像素和上邊偏移30像素后的結果。請注意：它有部分內容與第三個塊重疊了，但它位于文檔流中的初始位置仍然還在占著(虛線框標示的地方)，即使把偏移量設得再大它的初始位置也不會被第三個塊填補。同時它的偏移位置也不會把別的塊在文檔流的位置擠開，如果有重疊它會和其他元素重疊。
position:absolute;絕對定位：相對于頁面的絕對值來對元素進行定位。
下圖中第二個塊是未使用絕對定位時的樣式。
使用了絕對定位的元素會脫離文檔流，即它原來的位置會被其他元素占用，而且它會和其他元素重疊。
案例：
要使用絕對定位時，必須要有2個條件(口訣：父相子絕)：
必須給父元素(也可以是祖父級、曾祖父級)增加定位屬性，一般建議使用position:relative。
給子元素加絕對定位position:absolute，同時指定left、right、top、bottom屬性。
+ 下圖中的第二個塊是使用了絕對定位時的樣式。
position:fixed;固定定位：將元素放置在瀏覽器窗口的固定位置，即使窗口滾動它也不會移動。
Fixed定位使元素的位置與文檔流無關，因此不占據空間。
Fixed定位的元素會和其他元素重疊。
position:fstatic;靜態定位：HTML元素的默認值，即沒有定位，遵循正常的文檔流對象。另外靜態定位的元素不會受到 top、bottom、left、right影響。
HTML<span>元素是內聯元素，可用作文本的容器。
<span>元素沒有特定的含義。
當與CSS一同使用時，<span>元素可用于為指定文本設置樣式屬性。
<div>用來定義文檔中的division分區或section節。
<span>用來指定文檔中的行內元素。
div(division/section)定義
<div> </div>是一個塊級(block-level)元素，其前后均有換行符，可定義文檔中的分區或節。
基本語法
<div id="layer1" class=" " >塊包含的內容</div>
position:定位，static|absolute|relative|fixed，其中static是默認值
width|height:圖層的寬度|圖層的高度
left|top:左邊距|上邊距
border:邊框，“粗細 形狀 顏色”
z-index:圖層重疊，子層永遠在父層之上，值越大越在上層，前提條件是position屬性值為“absolute”。
clear
clear:none，默認值，允許兩邊有浮動元素。
clear:left，不許左邊有浮動元素。
clear:right，不行右邊有浮動元素。
clear:both，不許有浮動元素。
fload
fload:left，當前元素向左浮動。
fload:right，當前元素向右浮動。
fload:none，當前元素不浮動。
圖層包含其它圖層，稱為圖層的嵌套。
圖層嵌套經常需要與CSS樣式一起使用，達到更加精確控制頁面顯示效果。
案例1，圖層嵌套：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖層的嵌套</title>
<style type="text/css">
.inline_div {
display: inline-block;
/* 行內顯示方式*/
}
#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>圖層嵌套的應用</h4>
<div id="wrap">
<div id="d1" class="inline_div">圖層包含其它圖層，稱為圖層的嵌套。
</div>
<div id="d2" class="inline_div">圖層嵌套經常需要與CSS樣式一起使用</div>
<div id="d3">使用DIV+CSS進行和簡易頁面布局</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;
/* 定位方式為絕對定位 */
width: 200px;
height: 200px;
}
#d1 {
background-color: black;
color: white;
/* z-index:圖層層疊，子層永遠在父層之上，值越大越在上層,前提條件是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標記和span標記默認情況下都沒有對標記內的內容進行格式化或渲染，只有使用CSS來定義相應的樣式才會顯示出不同。
div標記是塊標記，一般包含較大范圍，在區域的前后會自動換行；span標記是行內標記，一般包含范圍較窄，通常在一行內，在此區域的范圍外不會自動換行。
一般來說，div標記可以包含span標記，但span標記不能包含div標記。
但是塊標記和行標記不是絕對的，可以通過定義CSS的display屬性來相互轉換。
案例：
<!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標記和span標記是兩個常用的標記。利用這兩個標記，加上CSS對其樣式的控制，可以很方便的實現各種效果。</span>
<span id="s4" class="block_disp">這是span4，在使用CSS排版的頁面中，div標記和span標記是兩個常用的標記。利用這兩個標記，加上CSS對其樣式的控制，可以很方便的實現各種效果。</span>
</body>
</html>display:inline;指定元素顯示在行內。
display:block;指定元素顯示在塊內。
<div>元素常用作布局工具，因為能夠輕松地通過CSS對其進行定位。
案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖層重疊</title>
<style type="text/css">
body {
margin: 0;
/*margin表示邊距*/
}
div {
position: absolute;
/* 定位方式為絕對定位 */
width: 200px;
height: 200px;
}
#d1 {
background-color: black;
color: white;
/* z-index:圖層層疊，子層永遠在父層之上，值越大越在上層,前提條件是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提供的新語義元素定義了網頁的不同部分：
| 標簽 | 用途 |
|---|---|
| header | 定義文檔或節的頁眉 |
| nav | 定義導航鏈接的容器 |
| section | 定義文檔中的節 |
| article | 定義獨立的自包含文章 |
| aside | 定義內容之外的內容(比如側欄) |
| footer | 定義文檔或節的頁腳 |
| details | 定義額外的細節 |
| summary | 定義details元素的標題 |
使用<header>、<nav>、<section>以及<footer>來創建多列布局。
案例：
<!DOCTYPE html>
<html>
<head>
<title> 使用 HTML5 的網站布局</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：規定元素應該生成的顯示框類型。
對于HTML等文檔類型，如果使用display不謹慎會很危險，因為可能違反HTML中已經定義的顯示層次結構。
| 屬性 | 用途 |
|---|---|
| none | 此元素不會被顯示。 |
| block | 此元素將顯示為塊級元素，前后有換行。 |
| inline | 默認，此元素會被顯示為內聯元素，前后沒有換行。 |
| inherit | 繼承父元素的display屬性值。 |
到此，關于“div與span怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
