CSS定位概述

在網頁佈局中，對於所有的頁面元素，我們都可以使用position屬性來精確的指定頁面元素的具體顯示位置。對於複雜的網頁來說，我們需要對元素進行定位以得到我們想要的效果。

div、h1、p等元素常常被稱爲塊級元素。這意味着這些元素顯示爲一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱爲“行內元素”，這是因爲它們的內容顯示在行中，即“行內框”。在瞭解position定位屬性如何使用之前，我們先學習一個屬性display，該屬性的作用是設置元素如何被顯示。

一、 display

回顧一下我們之前所學習的元素分類，我們大致可以將所有的元素分爲三類

1.1 塊級元素（block）

獨佔一行，設置了寬度後，後面剩餘的寬度還是會佔一行，只是不顯示
塊元素會獨佔一行，自上向下排列
默認寬度是父標籤的100%，默認高度被內容撐開
可以設置width和height屬性
可以設置margin和padding屬性
常見塊級元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

1.2 內聯元素（inline）

不獨佔一行，後面可以繼續跟同類型標籤，兩個span元素會被解析在同一行。
內聯元素只佔自身大小，從左向右排列，如果一行中不不足以容納，則會換到下一行，依舊自左向右排列
默認寬度被內容撐開，默認高度被內容撐開，不可設置寬高
支持左右的margin，不支持上下的margin
支持上下左右padding，垂直方向不會影響頁面佈局
可以設置邊框，垂直方向不會影響頁面佈局
常見內聯元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

1.3 行內塊元素（inline-block）

不獨佔一行
支持寬高
不設置寬度的時候寬度由內容撐開
常見行內塊元素有：<img>、<input>

1.4 display屬性值

屬性值	描述
none	此元素不會被顯示，不會佔用位置。
block	此元素將顯示爲塊級元素，此元素前後會帶有換行符。
inline	默認。此元素會被顯示爲內聯元素，元素前後沒有換行符。
inline-block	行內塊元素。（CSS2.1 新增的值）
list-item	此元素會作爲列表顯示。
table	此元素會作爲塊級表格來顯示（類似 `<table>`），表格前後帶有換行符。
inline-table	此元素會作爲內聯表格來顯示（類似 `<table>`），表格前後沒有換行符。
table-row-group	此元素會作爲一個或多個行的分組來顯示（類似 `<tbody>`）。
table-header-group	此元素會作爲一個或多個行的分組來顯示（類似 `<thead>`）。
table-footer-group	此元素會作爲一個或多個行的分組來顯示（類似 `<tfoot>`）。
table-row	此元素會作爲一個表格行顯示（類似 `<tr>`）。
table-column-grou	此元素會作爲一個或多個列的分組來顯示（類似 `<colgroup>`）。
table-column	此元素會作爲一個單元格列顯示（類似 `<col>`）
table-cell	此元素會作爲一個表格單元格顯示（類似 `<td>` 和 `<th>`）
table-caption	此元素會作爲一個表格標題顯示（類似 `<caption>`）

二、 position

通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式。元素的定位屬性主要包括定位模式和邊偏移兩部分。

語法格式：選擇器 { position：定位模式， <top、left、bottom、right、z-index...> ：屬性值；}

2.1 定位屬性

2.1.1 `top`

頂部偏移量，定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。

基本語法： top：length
注意：

length：長度值 | 百分比
必須定義position的屬性值爲absolute、relative纔有效。

div { position:relative; top:6px; }

2.1.2 `bottom`

底部偏移量，定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
基本語法： bottom：length
注意：

length：長度值 | 百分比
必須定義position的屬性值爲absolute、relative纔有效。

div { position:relative; bottom:6px; }

2.1.3 `right`

右邊偏移量，定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
基本語法： right：length
注意：

length：長度值 | 百分比
必須定義position的屬性值爲absolute、relative纔有效。

div { position:relative;right:6px; }

2.1.4 `left`

左邊偏移量，定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

基本語法： left：length
注意：

length：長度值 | 百分比
必須定義position的屬性值爲absolute、relative纔有效。

div { position:relative;left:6px; }

2.1.5 `z-index`

z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。如果屬性值越大，表示離用戶更近，繁殖屬性值越小則表示離用戶更遠。

基本語法： z-index：number
注意：

number：堆疊層數，可以爲負數，默認值爲0
必須定義position的屬性值爲absolute、relative纔有效。

div { position:relative;z-index:-1; }

2.1.5 `overflow`

屬性規定當內容溢出元素框時發生的事情。該屬性設置當文本內容超出盒模型邊框所採取的處理方式，

基本語法： overflow：value
注意：

value：採取的處理方式
（1）visible 默認值。內容不會被修剪，會呈現在元素框之外。

（2）hidden 內容會被修剪，並且其餘內容是不可見的
。
（3）scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。

（4）auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。

（5）inherit 規定應該從父元素繼承 overflow 屬性的值。
必須定義position的屬性值爲absolute、relative、fixed纔有效。

div { position:relative;overflow:scroll; }

2.2 定位模式

2.1.1 static（自動定位）

元素框正常生成。塊級元素生成一個矩形框，作爲文檔流的一部分，行內元素則會創建一個或多個行框，置於其父元素中。HTML 元素的默認值，即沒有定位，遵循正常的文檔流對象。

靜態定位的元素不會受到 top, bottom, left, right影響

2.1.2 fixed （固定定位）

div{
	position:fixed;
}

元素的位置相對於瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動：

注意：

固定定位的元素跟父級沒有任何關係，只認瀏覽器。
固定定位不佔有位置，不隨着滾動條滾動。
固定定位如果沒有內容，必須設置寬高，如果有內容，寬高由內容撐開

2.1.3 absolute （絕對定位）

div{
	position:absolute;
}

absolute 定位使元素的位置與文檔流無關，因此不佔據空間。
absolute 定位的元素和其他元素重疊。
如果想爲元素設置絕對定位，需要設置position:absolute，這條語句的作用將元素從文檔流中拖出來,將不佔用原來元素的空間，然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父級元素進行絕對定位。如果不存在就逐級向上排查，直到相對於body元素，即相對於瀏覽器窗口。

注意：

絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫標，完全不佔位置
若其父級有定位，會根據父級邊緣位置進行定位
“子絕父相” 是最常用的佈局方式，意思是子級是絕對定位的話，父級要用相對定位。
標準文檔流中的盒子水平居中只需要設置 margin：auto 即可，但是對於絕對定位就沒有效果
絕對定位的盒子水平/垂直居中方法
5.1 首先 left 50%，移動父盒子的一半大小
5.2 然後走自己外邊距負的一半值（margin-left:-值）就可以實現水平居中了。（垂直居中同理）

2.1.4 relative （相對定位）

div{
	position:relative;
}

相對定位元素的定位是相對其正常位置。
如果想爲元素相對定位，需要設置position:relative;，它還是會佔用該元素在文檔中初始的頁面空間，通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。

注意：每次移動的位置，是以自己的左上角爲基點移動（相對於自己來移動位置）相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它。

2.1.4 sticky（粘性定位）

div{
	position:sticky;
}

粘性定位的元素是依賴於用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。

它的行爲就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed，它會固定在目標位置。

元素定位表現爲在跨越特定閾值前爲相對定位，之後爲固定定位。
這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，纔可使粘性定位生效。否則其行爲與相對定位相同。

2.3 定位總結

定位模式	是否脫標占有位置	使用邊偏移	偏移方式
靜態static	不脫標，正常模式	不可以	正常偏移
相對定位relative	脫標，佔有位置	可以	相對自身初始的文檔流位置移動
絕對定位absolute	完全脫標，不佔有位置	可以	相對於父級的定位邊緣移動位置
固定定位fixed	完全脫標，不佔有位置	可以	相對於瀏覽器移動位置

三、 float

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。Float（浮動），往往是用於圖像，但它在佈局時一樣非常有用。

元素的水平方向浮動，意味着元素只能左右移動而不能上下移動。一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。浮動元素之後的元素將圍繞它。浮動元素之前的元素將不會受到影響。

語法

float：value

value取值：

left：元素向左浮動
rigth：元素向右浮動
none：默認值。元素不浮動，並會顯示在其在文本中出現的位置。

規則
（1）當元素的float屬性取值爲left或right時，元素屬於浮動定位;
（2）若剩餘空間無法放下浮動的盒子，則該盒子向下移動，直到具備足夠的空間能容納盒子，然後再向左或向右移動；
（3）浮動盒子的頂邊不得高於上一個盒子的頂邊；
（4）浮動盒子在擺放時，要避開常規流盒子；常規流盒子在擺放時，無視浮動盒子；
（5）常規流盒子的自動高度計算時，無視浮動盒子
（6）清除浮動：clear:both(左或右)。

注意：浮動元素會脫離文檔流，不佔據原來的位置。浮動的元素總是找離它最近的父級元素對齊，但是不會超出內邊距的範圍。

下面通過幾個圖例加深印象：

四、元素對齊

4.1 元素對齊

要水平居中對齊一個元素(如 <div>), 可以使用 margin: auto;。設置到元素的寬度將防止它溢出到容器的邊緣。

 margin:  0px auto;
 width: 50%;

注意：如果沒有設置 width 屬性(或者設置 100%)，居中對齊將不起作用。

4.2 文本居中對齊

如果僅僅是爲了文本在元素內居中對齊，可以使用 text-align： center;

text-align:center;

4.3 圖片居中對齊

要讓圖片居中對齊, 可以使用 margin: auto; 並將它放到塊元素中。

img {
    display: block;
    margin: auto;
    width: 50%;
}

4.4 左右對齊

（1）position

我們可以使用 position: absolute; 屬性來對齊元素

/*右對齊*/
{
    position:absolute;
    right:0px;
    width:300px;
}

當使用 position 來對齊元素時, 通常 body元素會設置 margin 和 padding 所以在使用之前應該先清除這兩個屬性

* {
    margin: 0;
    padding: 0;
}

（2）float

我們也可以使用 float 屬性來對齊元素

/*右對齊*/
{
 float: right;
 }

4.5 豎直居中

（1）padding

/*垂直居中*/
{
    padding: 50%;
}

（2）position 和 transform

/*垂直水平居中*/
{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

特別鳴謝菜鳥教程所提供的內容支持

Python全棧開發學習--HTML--CSS定位--Day4

CSS定位概述

一、 display

1.1 塊級元素（block）

1.2 內聯元素（inline）

1.3 行內塊元素（inline-block）

1.4 display屬性值

二、 position

2.1 定位屬性

2.1.1 `top`

2.1.2 `bottom`

2.1.3 `right`

2.1.4 `left`

2.1.5 `z-index`

2.1.5 `overflow`

2.2 定位模式

2.1.1 static（自動定位）

2.1.2 fixed （固定定位）

2.1.3 absolute （絕對定位）

2.1.4 relative （相對定位）

2.1.4 sticky（粘性定位）

2.3 定位總結

三、 float

四、元素對齊

4.1 元素對齊

4.2 文本居中對齊

4.3 圖片居中對齊

4.4 左右對齊

4.5 豎直居中

ziw2pdf

apisix~helm方式的部署到k8s

firmeye - IoT固件漏洞挖掘工具

Python全棧開發學習--javascript--（HTML DOM、瀏覽器BOM）--Day11

Python全棧開發學習--HTML 5--標籤--Day8

Python全棧開發學習--HTML--CSS3（下）--Day7

Python全棧開發學習--javascript--進階--Day10

Python全棧開發學習--Reactjs--基礎語法（中）--Day13

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Python全棧開發學習--HTML--CSS定位--Day4

CSS定位概述

一、 display

1.1 塊級元素（block）

1.2 內聯元素（inline）

1.3 行內塊元素（inline-block）

1.4 display屬性值

二、 position

2.1 定位屬性

2.1.1 top

2.1.2 bottom

2.1.3 right

2.1.4 left

2.1.5 z-index

2.1.5 overflow

2.2 定位模式

2.1.1 static（自動定位）

2.1.2 fixed （固定定位）

2.1.3 absolute （絕對定位）

2.1.4 relative （相對定位）

2.1.4 sticky（粘性定位）

2.3 定位總結

三、 float

四、元素對齊

4.1 元素對齊

4.2 文本居中對齊

4.3 圖片居中對齊

4.4 左右對齊

4.5 豎直居中

2.1.1 `top`

2.1.2 `bottom`

2.1.3 `right`

2.1.4 `left`

2.1.5 `z-index`

2.1.5 `overflow`