Css中的布局樣式和過渡變行方法

這篇“Css中的布局樣式和過渡變行方法”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Css中的布局樣式和過渡變行方法”文章吧。

1. 定位方式position

static：默認,元素為普通元素,文檔流定位,從上到下

relative(相對的):元素的位置是相對于普通的位置定位的 ,位移之前的位置 其他元素用不了,一般不做太大的改動 ,對某個元素位置進行微調(diào) ,只能使用top,left 我感覺他是相對于他之前的位置移動的

fixed(固定的)：相對于瀏覽器窗口來定位 ,位移之前位置不會被占用, 上下左右都可以使用, 小廣告常用手法, 滾動條不斷移,他的位置也不變 ,他會脫離文檔流,漂浮于文檔流上邊,他這個上下左右是相對于邊的位置,比如:top50px 不是向上移動50px ,而是元素相對于頂部邊框距離50px 設(shè)置buttom也同樣可以使用,而且拉動滾動條也不會變化位置

absolute(絕對的)：元素相對position值不為static的一個祖先元素定 子元素依據(jù)祖先元素變化 祖先元素不能為static 依據(jù)誰變化,誰不可以為static(默認為static),發(fā)生在父子 或 祖先元素與后代元素之間的位移定位

2. 定位布局

top/bottom/left/right

3. z-index

用來設(shè)置元素 和 元素 的顯示層數(shù),正數(shù) 負數(shù) 都可以

必須配合position使用

過渡,變形

1. 過渡

過渡:元素由一種樣式逐漸變?yōu)榱硪环N樣式

屬性:

transition-delay:設(shè)置過渡前的延時

transition-duration:設(shè)置過渡用時

transition-property:設(shè)置過渡參與的屬性

transition-timing-function:過渡速率(linear勻速)

transition:簡寫形式(property duration timing-function delay)

反向過渡:

hover中設(shè)置的,粘貼到div中,就可以了

2. 變形

transform: 指定如何變形

transform: scaleX/Y(1.5) 縮放1.5倍

transform: rotate(360deg) 旋轉(zhuǎn)360度 deg代表度數(shù),配合過渡時間 效果很好

transform: skew(X軸角度,Y軸角度) 傾斜的角度

transform: translate(X軸距離,Y軸距離) 移動的距離

以上就是關(guān)于“Css中的布局樣式和過渡變行方法”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。