div
作用：一般用于配合css完成網(wǎng)頁的基本布局。
span
作用：一般用于配合css修改網(wǎng)頁中的一些局部信息。
div同span的區(qū)別：
- div會(huì)單獨(dú)占領(lǐng)一行，span不會(huì)單獨(dú)占領(lǐng)一行；
- div是一個(gè)容器級(jí)別的標(biāo)簽，span是一個(gè)文本級(jí)別的標(biāo)簽；
區(qū)別：容器級(jí)中的標(biāo)簽可以嵌套其它所有的標(biāo)簽，文本級(jí)的表情中只能嵌套文字/圖片/超鏈接。
容器級(jí)的標(biāo)簽：ul，h, div, ol, dl, li,dt,dd···
文本級(jí)的標(biāo)簽：span,p,buis, em, ins ,del ,strong···
注意點(diǎn)：在企業(yè)開發(fā)中一般情況下要嵌套都是嵌套在div中，或者按照組標(biāo)簽來嵌套。
在HTML中將所有的標(biāo)簽分為兩類，分別是容器級(jí)和文本級(jí)。
在css中將所有標(biāo)簽也分為兩類，分別是塊級(jí)元素和行內(nèi)元素。
塊級(jí)元素：p ,ul，h, div, ol, dl, li···
行內(nèi)元素：span,buis, em, ins ,del ,strong···
區(qū)別：
- 塊級(jí)元素:獨(dú)占一行，如果未設(shè)置寬高，則是按照父元素的默認(rèn)寬高，如果設(shè)置了寬高，那么就按照設(shè)置來顯示；
- 行內(nèi)元素:不會(huì)獨(dú)占一行，如果未設(shè)置寬高，那么默認(rèn)和內(nèi)容一樣的寬高，行內(nèi)元素是不可以設(shè)置寬度和高度。
- 行內(nèi)塊級(jí)元素:為了讓元素能夠不獨(dú)占一行，又可以設(shè)置寬高，就是行內(nèi)塊級(jí)元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>30-CSS元素的顯示模式</title>
<style>
div{
background: red;
width: 200px;
height: 200px;
}
span{
background: blue;
width: 200px;
height: 200px;
}
img{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div>我是div</div>
<p>我是段落</p>
<h1>我是標(biāo)題</h1>
<hr>
<span>我是span</span>
<b>我是加粗</b>
<strong>我是強(qiáng)調(diào)</strong>
<hr>
</body>
</html>
css元素顯示模式轉(zhuǎn)換
如何轉(zhuǎn)換css元素的顯示模式?
設(shè)置元素的display屬性。
取值：
block 塊級(jí)
inline 行內(nèi)
inline-block 行內(nèi)塊級(jí)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>31-CSS元素顯示模式轉(zhuǎn)換</title>
<style>
div{
display: inline;
background: red;
width: 200px;
height: 200px;
}
span{
display: block;
background: green;
width: 200px;
height: 200px;
}
.cc{
background: blue;
width: 200px;
height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
<p class="cc">我是段落</p>
<b class="cc">我是加粗</b>
</body>
</html>
