CSS 佈局屬性大全：display，position 和 float-css教學-PHP中文網

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

WBOY

發布： 2023-10-20 17:36:25

原創

904 人瀏覽過

CSS 布局属性大全：display，position 和 float

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

CSS 是用來控制網頁樣式的一種標記語言。在設計網頁佈局時，佈局屬性是非常重要的。 CSS 提供了多種佈局屬性，其中最常用的是 display，position 和 float。在本篇文章中，我們將詳細介紹這三種佈局屬性，並提供具體程式碼範例。

1.1. block
block 元素獨佔一行，總是從新行開始顯示，寬度填滿父元素。例如，

元素就是典型的 block 元素。

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.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;
}

登入後複製

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

img {
  float: left;
}

登入後複製

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

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