1. 程式人生 > >2018年4月22日 關於近期寫小米商城遇到的前端問題的總結

2018年4月22日 關於近期寫小米商城遇到的前端問題的總結

1.絕對定位與相對定位的區別,在使用時會相互影響。

什麼是絕對定位和相對定位:

absolute 絕對定位使元素的位置與文件流無關,因此不佔據空間。

absolute 絕對定位的元素可以和其他元素重疊。

上面的效果是通過簡單地使用一個應用了clip-path屬性的元素來完成的。

.clipClass{
-webkit-clip-path:polygon(0100%, 50% 0, 100% 100%);
}

首先,和位置屬性非常相像,我們需要考慮XY的值。X:0以及 Y:0表示從元素的左上角開始,並從那裡移動。 X:100%表示元素右邊, Y:100%表示元素的底部。

Got it~所以,上面建立的路徑,它實際上建立瞭如下的點:

x: 0, y:100%
x: 50%, y: 0
x: 100%, y: 100%

這條簡單的路徑從左下角的座標點開始,水平移動到50%的位置,然後垂直向上到達頂部的座標點,接著水平移動到100%的位置,最後垂直向下回到底部,到達第三個座標點。這樣子用三個點就完成了一個三角形!

所以邊界之外的所有東西都會被直接剪裁,無法顯示。而元素本身仍然保持其尺寸,只是它的表示層改變了。

在用百分號來定義寬度和長度時,絕對定位的盒子會找離他最近的相對定位的盒子為父,如果都沒有,那就一body為父,所以使用百分號和定位一定要注意。

使用絕對定位時,如何想改變盒子的外邊距可以用top,left,bottom,right來做規定,當四個屬性值都為零時就是盒子居中了。

使用相對定位則要利用margin-top,margin-bottom,margin-left,margin-right來規定外邊距。

2.關於浮動的使用

在我做小米網頁時,遇到了這樣的問題,有時盒子內部的浮動會影響到盒子外部的浮動,遇到這樣的情況可以給盒子加上overflow屬性,屬性值為hidden.

3 關於塊標籤和內斂標籤

塊標籤預設情況下會單獨佔用一行,內斂標籤則是接著前面的元素的後面不會換行,但是當我們給他定義display:block時,他就會變得跟快標籤一樣,擁有快標籤的各種屬性。

4 關於透明的使用

透明我暫時接觸到兩種,一種是背景和盒子裡面的內容全透明,一種是隻透明背景,但是盒子裡面的內容不會透明,在我寫網站時遇到這個問題,想了好久才解決。如果只是背景透明,那麼我們可以給background設定rgba()的顏色屬性值,其中rgb代表了顏色,而a則代表了透明度,預設的透明度是1。全透明為0。

5 實現按壓效果

主要是利用css裡面的選擇器active(活動連結) 在選擇器裡面寫transfrom屬性讓他旋轉:當transalteY(2px)表示向上移動兩個px,當點選事件結束時就會恢復原樣這樣就實現了按壓的效果。

6 單行或多行文字的垂直居中問題

 line-height的約束條件,它只適合給裡面只有一行字的盒子設定上下居中,當超過一行字時就會出現錯誤。

那麼如何實現多行字型居中呢:

如果一段內容,它的高度是可變的那麼我們就可以使用上一節講到的實現水平居中時使用到的最後一種方法,就是設定Padding,使上下的 
padding值相同即可。同樣的,這也是一種“看起來”的垂直居中方式,它只不過是使文字把<div>完全填充的一種訪求而已。可以使用類似下 
面的程式碼: 如果一段內容,它的高度是可變的那麼我們就可以使用上一節講到的實現水平居中時使用到的最後一種方法,就是設定Padding,使上下的 
padding值相同即可。同樣的,這也是一種“看起來”的垂直居中方式,它只不過是使文字把<div>完全填充的一種訪求而已這種方法的優點就是它可以在任何瀏覽器上執行,並且程式碼很簡單,只不過這種方法應用的前提就是容器的高度必須是可伸縮的。 

這種方法的優點就是它可以在任何瀏覽器上執行,並且程式碼很簡單,只不過這種方法應用的前提就是容器的高度必須是可伸縮的。

多行文字固定高度居中

CSS中的vertical-align屬性只會對擁有valign特性的(X)HTML標籤起作用,但是在CSS中還有一個display屬效能夠模擬<table>,所以我們可以使用這個屬性來讓<div>模擬<table>就可以使用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必須設定在父元素上,後者必須設定在子元素上,因此我們要為需要定位的文字再增加一個<div>元素: 這個方法應該是很理想了,但是不幸的是InternetExplorer6並不能正確地理解display:table和display:table-cell,因此這種方法在InternetExplorer6及以下的版本中是無效的。