CSS属性(display)
生活随笔
收集整理的這篇文章主要介紹了
CSS属性(display)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.display屬性
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>08display屬性</title><style>.c1 {background-color: red;/*display: none; !* 讓其在頁面上不顯示 *!*//*display: inline; !* 讓其變成一個(gè)行內(nèi)標(biāo)簽 *!*/display: inline-block; /* 讓其具有塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽(行內(nèi)標(biāo)簽)特點(diǎn),就是可以設(shè)置長和寬的行內(nèi)標(biāo)簽 */}.c2 {width: 100px;height: 100px;background-color: green;/*display: block; !* 讓其變成一個(gè)塊級(jí)標(biāo)簽*!*/display: inline-block; /* 讓其具有塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽(行內(nèi)標(biāo)簽)特點(diǎn),就是可以設(shè)置長和寬的行內(nèi)標(biāo)簽 */}#ulid1 {background-color: darkslategrey;display: inline-block;list-style-type: none; /* 將標(biāo)題前面的點(diǎn)去掉 */}li {display: inline-block; /* 將li標(biāo)簽變?yōu)樾袃?nèi)標(biāo)簽,并且可以設(shè)置長和寬 */border-right: 2px solid bisque; /* 設(shè)置右邊框2像素 實(shí)線 */}li.last {border-right: none; /* 將li最后一個(gè)標(biāo)簽的右邊框設(shè)置成沒有 */}</style> </head> <body><div class="c1">div</div> <!-- div是塊級(jí)標(biāo)簽,可以設(shè)置長和寬 --> <span class="c2">span</span> <!-- span標(biāo)簽是一個(gè)內(nèi)聯(lián)標(biāo)簽,自己占多大就占多大,不能設(shè)置長和寬 --> <span class="c2">span</span><ul id="ulid1"><li>玉米商城</li><li>電腦</li><li>手機(jī)</li><li class="last">平板</li> </ul></body> </html>?
?
轉(zhuǎn)載于:https://www.cnblogs.com/whylinux/p/10229208.html
總結(jié)
以上是生活随笔為你收集整理的CSS属性(display)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 《图解HTTP》核心知识总结
- 下一篇: linux I/O 栈 预习(上)