|
在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è)置樣式，來展示行內(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>
|
|
|
