行級塊級元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>行級塊級標簽</title>
    </head>
    <body>
        <!-- 1.寬高
            寬度 width:100px;
            高度 height:200px;
         -->
         <!-- 2.行塊級元素的區(qū)別 
              一.塊級標簽獨占一行
                行級元素默認區(qū)域為文本區(qū)域,由文本撐開
              二.塊級標簽可以設置寬和高
                行級標簽不可以設置寬和高
              三.塊級標簽display:block;
                行級標簽display:inline;
              四.行級塊級標簽是可以通過display屬性來相互切換。
              五.行級標簽可以處于同一行
                塊級標簽不能處于同一行
            
                        
              不展開顯示,不顯示這個標簽
              display:none;
         -->
        <span style="width: 100px;height: 100px;/*display: block;*/ background-color: red ">我是一個span</span>
        <div style="height: 100px; background-color: green ">1</div>
        <div style="width: 150px;height: 150px; background-color:  yellow">2</div>
        <div style="width: 200px;height: 200px; background-color: blue ">3</div>
    </body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容