一天搞定HTML----标签类型与类型转换05
生活随笔
收集整理的這篇文章主要介紹了
一天搞定HTML----标签类型与类型转换05
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
標(biāo)簽類型：
標(biāo)簽只有兩類：行內(nèi)元素和塊元素
行內(nèi)元素：內(nèi)容撐開寬高
塊元素：默認(rèn)獨(dú)占一行
注意：
在使用display時(shí)，會(huì)遇到一種inline-block類型的標(biāo)簽。這種標(biāo)簽不屬于標(biāo)簽的分類。
1.塊元素block特點(diǎn)
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>body{margin: 0;padding: 0;}div{height: 100px;background: red;margin: 50px;padding: 30px;}</style></head><body><!--塊元素的特征1、默認(rèn)獨(dú)占一行2、沒有給寬度的時(shí)候，寬度是auto，撐滿一行(寬度就是父級(jí)的寬度)3、支持所有的css命令--><div>div</div></body> </html>2.行內(nèi)元素inline特點(diǎn)
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>body{margin: 0;padding: 0;}span{background: pink;width: 200px;height: 200px;/*margin: 50px;*/padding: 50px;}div{background: green;}</style></head><body><!--行內(nèi)元素的特征1、內(nèi)容撐開寬高寬高的值都是auto，只不過顯出來的寬高是由內(nèi)容撐開的2、不支持設(shè)置寬高3、不支持上下的margin與上下padding(左右支持)上下的padding是有問題，雖然把背影撐出來了，這個(gè)只是表面現(xiàn)象，它不會(huì)對(duì)其它的元素有影響4、所有的行內(nèi)元素都會(huì)在一行顯示5、代碼換行會(huì)被解析成一個(gè)空格--><span>鐵道學(xué)院</span><strong>kaivon</strong><div>div</div></body> </html>3.行內(nèi)塊元素inline-block特點(diǎn)
注意：它不屬于標(biāo)簽分類中的一類。
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>span{width: 100px;height: 100px;background: red;display: inline-block;}div{width: 100px;height: 100px;background: green;display: inline-block;}</style></head><body><!--display:inline-block; 行內(nèi)塊元素特征：1、行內(nèi)元素支持寬高2、塊元素可以在行中顯示3、不給寬高的話，寬度會(huì)由內(nèi)容撐開4、代碼換行會(huì)被解析成一個(gè)空格5、IE6、7不支持塊元素的inline-blockIE6、7不認(rèn)識(shí)inline-block，給行內(nèi)元素加上這個(gè)屬性后會(huì)觸發(fā)IE的haslayout特點(diǎn)，會(huì)讓行內(nèi)元素具有與inline-block一樣的特征，所以它不支持塊元素的inline-block--><span>kaivon</span><div>kaivon</div></body> </html>4.塊元素和行內(nèi)元素有哪些？
行內(nèi)元素：
a,span,strong,em,mark,img,time
塊元素：
div ,h1~h6,p,列表標(biāo)簽（ul,ol,li,dd,dt),header,nav,footer,section,article,aside
5.標(biāo)簽類型轉(zhuǎn)換
通過設(shè)置display的取值來改變標(biāo)簽的類型：
display的值：
1）none：隱藏標(biāo)簽2）block：塊元素3）inline：行內(nèi)元素4）inline-block：行內(nèi)塊元素代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{width: 100px;height: 100px;background: green;color: #fff;display: inline;}span{background: red;width: 100px;height: 100px;display: block;}</style></head><body><!--塊元素轉(zhuǎn)行內(nèi)元素 display:inline轉(zhuǎn)換后塊元素就具有了行內(nèi)元素的特征（只是顯示為行內(nèi)元素，本身還是塊元素）行內(nèi)元素轉(zhuǎn)塊元素 display:block轉(zhuǎn)換后行內(nèi)元素就具有了塊元素的特征（只是顯示為塊元素，本身還是行內(nèi)元素）--><div>div1</div><div>div2</div><span>span1</span><span>span2</span></body> </html>總結(jié)
以上是生活随笔為你收集整理的一天搞定HTML----标签类型与类型转换05的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一天搞定CSS： CSS选择器优先级-
- 下一篇： 一天搞定HTML----标签的嵌套规则0