五大常用居中

2021-09-29 21:36:10 字數 1547 閱讀 5491

利用偽元素:after和vertical-align

1,首先在裡面建立兩個div,父元素div給乙個class:fu;子元素div給乙個class:zi;

2,給父子元素乙個寬高和背景色以便在瀏覽器中顯示;

3,利用display:inline-block將要居中的.zi轉成行內塊元素;

4,在.box最後加乙個偽元素:after(必須要有content:"";才能生效),也轉成行內塊元素;注意高度與父元素同高;

5,最後用vertical-align:middle;將。zi元素和偽元素的對齊點都調至中間;

"box">

"zi">要居中的模組

利用彈性盒設定居中

1,建立父子元素兩個div,設定簡單樣式在瀏覽器中顯示;

2,給父元素設定彈性盒display:flex;

3,利用彈性盒中的垂直居中對齊的方式:justify-content:center;align-items:center;直接做到垂直居中;

"box">

"zi">要居中的模組

利用定位實現居中

1,給zi元素設定乙個定位position:absolute(絕對定位);

2,給fu元素設定乙個定位position:relative(相對定位)作為包含塊,根據需要設定,一般用relative不會影響到頁面布局;

3,寫了定位,就可以給zi元素寫上下左右都為:0;再用margin:auto平均分配四邊的距離這樣就可以垂直居中了;

"box">

"zi">要居中的模組

利用定位和的百分比和margin居中

1,建立父子元素給定簡單樣式;

2,給父子元素設定定位,父作為包含塊relative;子為absolute;

3,給子元素左和上都設定50%(也可以左下,右上或右下),因為文件流是從左上角開始的,所以一般都寫左上;

4,左和上都設定50%以後,此時子元素的左上角和父元素的中心點重合,並沒有真正的居中,所以子元素要在向上和左移動寬高的一般;

5,用margin(盒模型中只有margin是可以設定成負數的)就可以實現垂直居中了;

"box">

"zi">

利用定位和動畫過度(transform)中的移動(translate)實現居中

1,給父子元素設定簡單樣式並定位;

2,子元素設定左和上50%的距離,讓子元素的左上角和父元素的中心點對齊;

3,最後利用動畫過度中的translate(-50%,-50%)讓子元素沿著自身的x軸和y軸移動自身寬高的一半,即50%,就可以達到垂直居中效果了;

"box">

"zi">

五大常用演算法

主要是演算法演算法的複雜度 1.分治法 話說遞迴與hanoi塔 二分法求方程近似解 用c 實現合併排序 求最大值和最小值的分治演算法 2.動態規劃法 動態規劃求0 1揹包問題 最長公共子串問題的實現 用動態規劃實現飛彈攔截 最大化投資回報問題的實現 3.貪心演算法 最小生成樹之prim演算法 最小生...

五大常用演算法總結

據說有人歸納了計算機的五大常用演算法,它們是貪婪演算法,動態規劃演算法,分治演算法,回溯演算法以及分支限界演算法。雖然不知道為何要將這五個演算法歸為最常用的演算法,但是毫無疑問,這五個演算法是有很多應用場景的,最優化問題大多可以利用這些演算法解決。演算法的本質就是解決問題。當資料量比較小時,其實根本...

常用的五大演算法

貪心演算法 又稱貪婪演算法 是指,在對問題求解時,總是做出在當前看來是最好的選擇。也就是說,不從整體最優上加以考慮,他所做出的僅是在某種意義上的區域性最優解。貪心演算法不是對所有問題都能得到整體最優解,但對範圍相當廣泛的許多問題他能產生整體最優解或者是整體最優解的近似解。用貪心法設計演算法的特點是一...