CSS塊級元素詳解

一、塊級元素概述

塊級元素是HTML中的一種元素，其特點是默認展現為獨佔一行的元素，其寬度默認為父元素的100%，高度由內容撐開。塊級元素與內聯元素相對應，它們的主要區別在於排版方面。塊級元素可以包含其他塊級元素和內聯元素。

塊級元素通常用於HTML頁面中的主要結構，比如header、footer、sidebar、nav、section、article、div等。

二、塊級元素的特性

1、默認展現為獨佔一行

塊級元素在排版時會默認展現為獨佔一行，即元素前後有一個明顯的換行，且元素之間不會有內容，是一個完整的獨立塊。可以通過設置CSS屬性display:inline來改變其展現方式。

    
        div {
            display: inline;
        }
    

2、默認寬度為父元素寬度的100%

塊級元素默認寬度為父元素的寬度，可以通過CSS的width屬性進行設置。在瀏覽器的默認樣式中，父元素通常是body，因此塊級元素的默認寬度是body的寬度。

    
        div {
            width: 200px;
        }
    

3、高度由內容撐開

塊級元素的高度由內容撐開，其高度並不受設置的CSS屬性height的影響。如果元素內沒有內容，則高度為0。可以通過設置CSS屬性height來改變其高度。

    
        div {
            height: 100px;
        }
    

三、塊級元素的應用

1、結構化布局

塊級元素在HTML頁面中通常用於結構化布局，比如header、footer、sidebar、nav、section、article、div等。使用塊級元素可以將一個頁面分割為多個邏輯區域，使網頁結構明顯，易於維護。

    
        <header>
            <h1>這是頭部</h1>
        </header>
        <nav>
            <a href="#">導航1</a>
            <a href="#">導航2</a>
            <a href="#">導航3</a>
        </nav>
        <section>
            <article>
                <h2>標題</h2>
                <p>內容</p>
            </article>
            <article>
                <h2>標題</h2>
                <p>內容</p>
            </article>
        </section>
        <aside>
            <h3>側邊欄</h3>
            <ul>
                <li>列表1</li>
                <li>列表2</li>
                <li>列表3</li>
            </ul>
        </aside>
        <footer>
            <p>版權信息</p>
        </footer>
    

2、文本標籤

塊級元素還可以用於顯示文本塊，比如段落、標題等。在HTML頁面中，p、h1~h6等標籤都是塊級元素，可以使用這些標籤來實現文本的排版。

    
        <h1>這是一級標題</h1>
        <h2>這是二級標題</h2>
        <p>這是一段文字</p>
    

3、元素容器

塊級元素也可以用作元素的容器，是一些內聯元素的父容器。此時，塊級元素的主要作用是設置內聯元素的樣式，比如文字顏色、字體大小、背景顏色等。

    
        <div class="container">
            <p>這是一段文字</p>
            <a href="#">這是一個鏈接</a>
        </div>
    

四、塊級元素注意事項

1、塊級元素默認不支持text-align:center，可以通過設置CSS屬性display:inline-block來改變其展現方式，從而支持text-align:center。

    
        div {
            display: inline-block;
            text-align: center;
        }
    

2、塊級元素默認垂直方向上有一定的間距，可以通過設置CSS屬性line-height:0來減小其間距。

    
        div {
            line-height: 0;
        }
    

3、塊級元素可以通過設置CSS屬性display:none來隱藏元素。

    
        div {
            display: none;
        }
    

五、塊級元素總結

塊級元素在HTML頁面中通常用於結構化布局、文本的排版、元素的容器等，其特點是默認展現為獨佔一行的元素，其寬度默認為父元素的100%，高度由內容撐開。