HTML中經常用到的對齊,居中方式

2022-07-25 09:21:10 字數 1318 閱讀 7245

在編寫一片網頁時,我們經常需要使一些文字或者,盒子居中!但是在眾多的寫法裡,那些才能使我們的目的最快,最有效的達到呢!

居中也是有軸線之分的,水平軸,垂直於水平軸的軸,交叉軸。

1盒子居中 margin:auto; 通常在這此行只有乙個盒子的情況下使用[需要定寬-常規流和浮動不用]

2文字居中 

定義水平軸線對齊方式

flex-start 專案位於在主軸起點

flex-end 專案位於主軸終點

center 專案在中間

space-between 兩端對齊,專案之間的間隔都相等(開頭和最後與父元素沒有間隔)

space-around 專案之間間隔相等,與父元素的邊距是間隔的一半

space-evenly 專案與父元素的間距是一樣的

定義屬性在交叉軸如何對齊 align-items

align-items:flex-start 交叉軸起點對齊

align-items:flex-end 交叉軸終點對齊

align-items:center 交叉軸中點對齊

align-items:baseline 專案第一行文字基線對齊

align-items:stretch 專案未設定高度或者設定為auto,將佔滿整個容器高度

定義多根軸線對齊方式 align-content多行的時候用

align-content:flex-start 交叉軸起點對齊

align-content:flex-end 交叉軸終點對齊

align-content:center 交叉軸中點對齊

align-content:space-around 間距相等;軸之間的間距比邊框間距大一倍

align-content:space-between 交叉軸兩端對齊,軸間距平均分布

水平居中

定寬 margin:auto (常規流和彈性專案【不用定寬】)

彈性盒設定justify-content:center 讓彈性專案在主軸上居中

父元素設定text-align:center 讓內部行盒和塊盒居中

相對定位元素 margin-left:50%; transform:translatex(-50%) margin是專案的寬度【終極】

垂直居中

單行文字垂直居中 line-height 為專案的高度

彈性盒 align-items:center 讓專案在垂直軸居中

相對定位元素 top:50%;transform:translatey(-50%)【終極】

相對定位元素垂直居中

left:50%;top:50%;transform:translate(-50%,-50%)

A 演算法 遊戲開發中經常用到

a star 演算法是一種靜態路網中求解最短路最有效的直接搜尋方法。公式表示為 f n g n h n 其中 f n 是從初始點經由節點n到目標點的估價函式,g n 是在狀態空間中從初始節點到n節點的實際代價,h n 是從n到目標節點最佳路徑的估計代價。保證找到最短路徑 最優解的 條件,關鍵在於估價...

Eclipse 中經常用到的快捷鍵

eclipse 常用快捷鍵收集 2006年09 月29日星期五 12 00 ctrl 1 快速修復 最經典的快捷鍵 就不用多說了 ctrl d 刪除當前行 ctrl alt 複製當前行到下一行 複製增加 ctrl alt 複製當前行到上一行 複製增加 alt 當前行和下面一行互動位置 特別實用 可以...

Eclipse 中經常用到的快捷鍵

ctrl 1 快速修復 最經典的快捷鍵,就不用多說了 ctrl d 刪除當前行 ctrl alt 複製當前行到下一行 複製增加 ctrl alt 複製當前行到上一行 複製增加 alt 當前行和下面一行互動位置 特別實用,可以省去先剪下,再貼上了 alt 當前行和上面一行互動位置 同上 alt 前乙個...