CSS 佈局屬性大全：display，position 和 float

div { display: block; }

1.2. inline
inline 元素不會獨佔一行，只佔據它需要的空間。例如，元素就是典型的 inline 元素。

span { display: inline; }

1.3. inline-block
inline-block 元素不會獨佔一行，但可以設定寬度和高度。例如，元素就是一個典型的 inline-block 元素。

img { display: inline-block; }

1.4. none
none 元素不會顯示，會從文件流程移除。例如，可以透過設定 display: none 來隱藏一個元素。

.hidden { display: none; }

2. position 屬性
   position 屬性用於指定元素的定位方式。常見的 position 屬性值有以下幾種：

2.1. static
static 是預設的定位方式，元素依照文件流的順序進行佈局。

div { position: static; }

2.2. relative
relative 相對於自身的初始位置進行定位。可以透過使用 top、bottom、left 和 right 屬性來調整元素的位置。

div { position: relative; top: 10px; left: 20px; }

2.3. absolute
absolute 相對於父元素進行定位，或相對於最近的具有定位屬性（position 不是 static）的祖先元素進行定位。

div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

2.4. fixed
fixed 相對於瀏覽器視窗進行定位，不會隨捲軸的捲動而改變位置。

div { position: fixed; top: 0; right: 0; }

3. float 屬性
   float 屬性用於指定元素的浮動方式。當一個元素被設定為 float，它將從正常的文檔流中脫離，並盡可能地向左或向右浮動。其他元素會圍繞浮動元素進行佈局。

img { float: left; }

以上就是 display、position 和 float 這三種常見佈局屬性的介紹和程式碼範例。在實務中，我們可以根據具體需求來選擇使用哪種佈局屬性，以實現網頁佈局的設計。希望本文能為讀者在 CSS 佈局上提供一些幫助。

以上是CSS 佈局屬性大全：display，position 和 float的詳細內容。更多資訊請關注PHP中文網其他相關文章！