您好,登錄后才能下訂單哦!
這篇文章主要介紹了CSS中如何使用元素的顯示模式,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
在CSS中,根據(jù)元素顯示模式的不同元素標(biāo)簽被分為了兩類:行內(nèi)元素(inline-level)、塊級(jí)元素(block-level)。
1,首先介紹什么是行內(nèi)元素,什么又是塊級(jí)元素?
1.1,行內(nèi)元素就是不會(huì)獨(dú)占一行的元素,例如:span buis strong em ins del等
1.2,塊級(jí)元素就是會(huì)獨(dú)占一行的元素,例如:p div h ul ol dl li dt dd等
2,行內(nèi)元素與塊級(jí)元素有哪些區(qū)別?
2.1,行內(nèi)元素不會(huì)獨(dú)占一行,而塊級(jí)元素會(huì)獨(dú)占一行;
2.2,行內(nèi)元素不能設(shè)置寬度和高度,它的寬度和高度會(huì)隨著文本的改變而該改變。塊級(jí)元素可以設(shè)置寬度和高度,
如果沒有設(shè)置寬度和高度,在默認(rèn)情況下和父元素一樣寬,高度則為0;
2.3,下面這個(gè)實(shí)例就是通過給行內(nèi)元素span,塊級(jí)元素div設(shè)置樣式,來體現(xiàn)行內(nèi)和塊級(jí)的差異
<style> span{ height: 200px; width: 300px; background-color: red; font-size: 40px; } .father{ width: 300px; height: 300px; background-color: green; margin: 100px auto; } .son{ background-color: blue; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS元素的顯示模式</title> </head> <body> <span>我是span</span> <div class="father"> 我是father <div class="son">我是son</div> </div> </body> </html>
3,由于我們有的時(shí)候不僅要設(shè)置元素的寬度和高度,同時(shí)也希望元素不會(huì)獨(dú)占一行,這時(shí)就出現(xiàn)了行內(nèi)塊級(jí)元素(inline-block),常見的行內(nèi)塊級(jí)元素有<img>/<input>/<td>等。
4,如何轉(zhuǎn)換CSS元素的顯示模式?
4.1,設(shè)置元素的display屬性
4.2,display取值:inline(行內(nèi))、block(塊級(jí))、inline-block(行內(nèi)塊級(jí))
4.3,下面這個(gè)實(shí)例就是將span的顯示模式轉(zhuǎn)換為塊級(jí),將div的顯示屬性轉(zhuǎn)換為行內(nèi)塊級(jí),將img的顯示模式轉(zhuǎn)換為塊級(jí)
<style> /*將span轉(zhuǎn)換為塊級(jí)元素--*/ *{ margin: 0; padding: 0; } span{ display: block; background-color: red; width: 400px; height: 400px; } /*將div轉(zhuǎn)換為行內(nèi)塊級(jí)元素*/ div{ display: inline-block; background-color: green; width: 300px; height: 300px; } /*將img轉(zhuǎn)換為塊級(jí)元素*/ img{ display: block; width: 200px; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS元素的顯示模式</title> </head> <body> <span>我是span</span> <div>我是div</div> <img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg"> </body> </html>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“CSS中如何使用元素的顯示模式”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。