Div和Span標(biāo)簽
- 什么是div?
- 作用: 一般用于配合css完成網(wǎng)頁的基本布局
<style>
.header{
width: 980px;
height: 100px;
background: red;
margin: auto;
margin-bottom: 10px;
}
.content{
width: 980px;
height: 500px;
background: green;
margin: auto;
margin-bottom: 10px;
}
.footer{
width: 980px;
height: 100px;
background: blue;
margin: auto;
}
.logo{
width: 200px;
height: 50px;
background: pink;
float: left;
margin: 20px;
}
.nav{
width: 600px;
height: 50px;
background: yellow;
float: right;
margin: 20px;
}
.aside{
width: 250px;
height: 460px;
background: purple;
float: left;
margin: 20px;
}
.article{
width: 650px;
height: 460px;
background: deepskyblue;
float: right;
margin: 20px;
}
</style>
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="aside"></div>
<div class="article"></div>
</div>
<div class="footer"></div>
- 什么是span?
- 作用: 一般用于配合css修改網(wǎng)頁中的一些局部信息
<style>
span{
color: red;
}
</style>
<p>努力到<span>無能為力</span>, 拼搏到<span>感動(dòng)自己</span></p>
div和span有什么區(qū)別?
1.div會(huì)單獨(dú)的占領(lǐng)一行,而span不會(huì)單獨(dú)占領(lǐng)一行
2.div是一個(gè)容器級(jí)的標(biāo)簽, 而span是一個(gè)文本級(jí)的標(biāo)簽
容器級(jí)的標(biāo)簽和文本級(jí)的標(biāo)簽的區(qū)別?
容器級(jí)的標(biāo)簽中可以嵌套其它所有的標(biāo)簽
常見容器級(jí)的標(biāo)簽: div h ul ol dl li dt dd ...
文本級(jí)的標(biāo)簽中只能嵌套文字/圖片/超鏈接
常見文本級(jí)的標(biāo)簽:span p buis strong em ins del ...
注意點(diǎn):
不用刻意去記憶哪些標(biāo)簽是文本級(jí)的哪些標(biāo)簽是容器級(jí), 在企業(yè)開發(fā)中一般情況下要嵌套都是嵌套在div中, 或者按照組標(biāo)簽來嵌套(ul>li, ol>li , dl>dt+dd)
CSS元素顯示模式
在HTML中HTML將所有的標(biāo)簽分為兩類, 分別是容器級(jí)和文本級(jí)
在CSS中CSS也將所有的標(biāo)簽分為兩類, 分別是塊級(jí)元素和行內(nèi)元素(其實(shí)還有一類, 行內(nèi)塊級(jí))
什么是塊級(jí)元素, 什么是行內(nèi)元素?
塊級(jí)元素會(huì)獨(dú)占一行
行內(nèi)元素不會(huì)獨(dú)占一行
常見容器級(jí)的標(biāo)簽: div h ul ol dl li dt dd ...
常見文本級(jí)的標(biāo)簽:span p buis stong em ins del ...
常見塊級(jí)元素:
pdiv h ul ol dl li dt dd常見行內(nèi)元素: span buis strong em ins del
塊級(jí)元素和行內(nèi)元素的區(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è)置寬度和高度, 那么就出現(xiàn)了行內(nèi)塊級(jí)元素
不獨(dú)占一行, 并且可以設(shè)置寬高
CSS元素顯示模式轉(zhuǎn)換
如何轉(zhuǎn)換CSS元素的顯示模式?
設(shè)置元素的display屬性
display取值
block 塊級(jí)
inline 行內(nèi)
inline-block 行內(nèi)塊級(jí)
快捷鍵
di display: inline;
db display: block;
dib display: inline-block;
學(xué)習(xí)交流方式:
1.微信公眾賬號(hào)搜索: 李南江(配套視頻,代碼,資料各種福利獲取)
2.加入前端學(xué)習(xí)交流群:
302942894 / 289964053 / 11550038
