一天搞定HTML----标签类型与类型转换05
生活随笔
收集整理的這篇文章主要介紹了
一天搞定HTML----标签类型与类型转换05
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
標簽類型：
標簽只有兩類：行內(nèi)元素和塊元素
行內(nèi)元素：內(nèi)容撐開寬高
塊元素：默認獨占一行
注意：
在使用display時，會遇到一種inline-block類型的標簽。這種標簽不屬于標簽的分類。
1.塊元素block特點
代碼演示
<!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、默認獨占一行2、沒有給寬度的時候，寬度是auto，撐滿一行(寬度就是父級的寬度)3、支持所有的css命令--><div>div</div></body> </html>2.行內(nèi)元素inline特點
代碼演示
<!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是有問題，雖然把背影撐出來了，這個只是表面現(xiàn)象，它不會對其它的元素有影響4、所有的行內(nèi)元素都會在一行顯示5、代碼換行會被解析成一個空格--><span>鐵道學(xué)院</span><strong>kaivon</strong><div>div</div></body> </html>3.行內(nèi)塊元素inline-block特點
注意：它不屬于標簽分類中的一類。
代碼演示
<!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、不給寬高的話，寬度會由內(nèi)容撐開4、代碼換行會被解析成一個空格5、IE6、7不支持塊元素的inline-blockIE6、7不認識inline-block，給行內(nèi)元素加上這個屬性后會觸發(fā)IE的haslayout特點，會讓行內(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,列表標簽（ul,ol,li,dd,dt),header,nav,footer,section,article,aside
5.標簽類型轉(zhuǎn)換
通過設(shè)置display的取值來改變標簽的類型：
display的值：
1）none：隱藏標簽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的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一天搞定CSS： CSS选择器优先级-
- 下一篇： 一天搞定HTML----标签的嵌套规则0