CSSdisplay屬性詳解

一、display屬性的概述

display屬性控制元素的顯示方式，默認值為「inline」。其值可以是「block」、「inline」、「inline-block」、「none」等，每個值都影響元素的呈現方式和盒子模型（box model）的計算方式。

display注重元素的顯示狀態而非內容，它能夠改變元素的默認樣式，使得開發者可以靈活地控制網頁的布局。在具體使用時我們普遍會用到block和inline-block兩個屬性，接下來我們詳細解釋一下它們的特性。

二、block屬性

block類型元素獨佔一行，自上而下垂直排列，可以設置width（默認為父元素寬度），height屬性。block元素既可以放置行內元素也可以放置塊級元素，其內部的元素寬度會隨著父元素寬度的改變而自適應。

下面我們用一個實例展示block的特性：

<div style="display:block; background-color:red; width:200px;">
   <p>我是一個block元素!</p>
   <p>我是第二個block元素!</p>
</div>

三、inline-block屬性

inline-block類型元素既具有block元素的特性（可設置寬度、高度等樣式），又具有inline元素的特性（一行顯示多個，可設置margin、padding等屬性，不可以設置垂直方向的margin、padding）。換句話說，inline-block元素能夠排在一行內，並保留自身元素的屬性。

下面我們用一個實例展示inline-block的特性：

<p style="display:inline-block; background-color:red; width:100px; height:100px;">我是一個inline-block元素</p>

四、元素隱藏

display屬性還能將元素隱藏，常用於控制網頁的顯示與隱藏，常見的方式是使用「none」。

下面我們用一個實例展示如何將元素隱藏：

<div id="hide" style="display:none;">我是一個被隱藏的元素</div>

五、float與clear

float屬性可以讓元素浮動到容器的左側或右側，使得其他元素圍繞浮動元素排列，從而控制網頁的布局。float屬性還需要clear來清除float浮動的影響，防止影響其他元素的布局。

下面我們用一個實例展示float與clear的特性：

<div style="float: left; background-color:red; width: 100px; height: 100px;margin-right:20px;">float:left</div>
<div style="clear:both;">clear:both</div>

六、總結

display屬性是CSS布局中一個非常重要的屬性，靈活運用可以讓網頁布局更加靈活高效。以上就是對於display屬性的詳細講解，理解每個屬性的特性，對於掌握CSS布局會有很大的幫助。