auto的計算過程

2021-08-19 03:01:12 字數 991 閱讀 6782

想必大家都遇到過這樣乙個問題,就是想要讓乙個元素在另外乙個元素中實現水平垂直居中(方法有很多,我之前總結了很多種,有興趣的水平方向上我們可以讓margin的值為auto實現水平居中,但是垂直方向上卻不能設定margin的值為auto讓其在垂直方向上居中,你有沒有問過為什麼呢?想知道為什麼嗎?叮叮叮,請看下面,揭秘時間

想要知道為什麼,首先我們要了解auto的計算過程啦

對於塊狀元素,它要獨佔一行(在不給width情況下,它充滿一整行)。如果你給它設定了width值,但在水平方向上,還有剩餘空間(它的寬度比外部的容器的寬度小),當我們把乙個屬性的值設為auto的時候,這個空間就會被用來計算

1、一側auto,另一側固定,auto就是整個多餘的空間

2、兩側都是auto,會平均分配多餘的空間

所以,揭秘,block盒子為什麼不能垂直方向利用auto實現居中?

對於元素來講,如果不設定高度,在垂直方向上,它不會去鋪滿整個列,所以在垂直方向上,它沒有多餘的空間。

但是,如果是給元素設定了display:flex,可以利用margin:auto實現完美的居中。原因很簡單,因為當我們給父級元素display設定為flex時,其中容器有個屬性align-items(定義專案在交叉軸上如何對齊),在預設情況下屬性值為stretch,而這個值的特點就是,如果專案未設定高度或高度設為auto,將佔滿整個容器的高度,所以當我們為專案設定了高度的時候,此時,它在垂直方向上是由多餘空間的,那麼此時我們設定垂直方向的margin值為auto,就可以讓其在垂直方向上 居中啦。

嗯,直接看例子

html**

demo1

css**
.container

.item

關鍵**:display:flex;  margin:auto;

效果圖

完畢

遞迴計算過程和迭代計算過程

這次主要想通過幾個sicp的題目來說明遞迴計算過程和迭代計算過程。1 階乘 遞迴計算過程 define factorial n if n 1 1 factorial n 1 n 迭代計算過程 define fact iter counter result if counter 1 result fa...

PinBlock計算過程

引數 密碼,賬號,leftpinkey,rightpinkey out data 該引數為了帶出計算出來的pinblock 1先將密碼轉換為bcd碼 注意,轉碼後長度會變化,eg ascii碼的6位密碼轉成bcd碼後會縮短 放入pinblock定義好的16個長度的空字元陣列中 2再將賬號轉換為bcd...

詳解ROC AUC計算過程

roc全稱是 受試者工作特徵 receiver operating characteristic roc曲線的面積就是auc area under the curve auc用於衡量 二分類問題 機器學習演算法效能 泛化能力 python中sklearn直接提供了用於計算roc的函式 1 下面就把函...