CSS3新增功能03

標籤：

1. 3d效果

1.1 transform屬性的3d效果

在transform屬性值中有rotate旋轉，translate移動距離，scale縮放，skew扭曲。這些屬性值都可以分為x軸方向，y軸方向和z軸方向。z軸方向是垂直瀏覽器向外的方向，可以通過多z軸方向設定各屬性值來實現3d效果。

當元素需要設定3d效果時，必須給其父元素設定transform-style: preserve-3d;屬性，使元素在做變換時是已3d的效果顯示。同時可以給該元素的祖輩元素設定perspective: 1000px;來設定元素顯示遠小近大的效果。數值越小元素遠小近大的效果月明顯。

1.2 x、y、z方向

每個元素都存在x、y、z三個方向，但是需要區分兩種情況：

1.2.1 元素未進行旋轉時

元素未進行旋轉時，它的x、y兩個方向與瀏覽器方向統一，z軸方向為垂直瀏覽器向外。

1.2.2 元素進行旋轉後

元素旋轉後，它的x、y、z三個方向會根據旋轉進行相應改變。因此會出現先移動再旋轉與先旋轉後移動後的效果不同的情況。

1.3 視角中心

在設定了3d旋轉，並且設定了perspective: 1000px;屬性，瀏覽器會根據使用者的視角來改變不同位置的子項目旋轉的效果，其中瀏覽器預設的視角中心為設定了perspective: 1000px;屬性的元素的正中心位置。

2. 一次性事件註冊

我們會經常遇到需要在一個註冊事件中再註冊其他事件，如果這個外來事件經常被觸發的話會連帶著影響內部的註冊事件，使得內部事件會重複多次註冊，消耗記憶體影響運行速度。這時我們就希望這內部的事件成為一次性事件，在外來事件觸發的時候給對應元素註冊事件，當外來事件結束將內部事件清空。

所以JS提供了一個綁定事件的方法，one()一次性綁定事件，在這個綁定事件中註冊的事件會在觸發執行後被清空，不影響記憶體。

當然如果將內部事件放在外面進行註冊的話，也可以做到事件只註冊一次，對記憶體的消耗也極小。

3. 彈性盒子布局

以往我們在給html頁面配置時常會使用float浮動、position定位、margin外邊距、padding內邊距等方式來實現，但是我們也知道穩定的還是標準流中的布局其次才是浮動定位等。
而在CSS3中給予了我們能夠更加穩定、更加方便的設定頁面配置。

3.1 彈性布局的基礎文法

如果某個元素需要作為彈性布局的大盒子時，需要給該元素設定display:flex;屬性，我們也可以稱之為開啟彈性。這個元素下的子項目就可以通過樣式設定來進行布局。

3.2 彈性布局父元素常用屬性

3.2.1 flex-direction彈性布局方向

設定子項目布局的方向，預設為x軸方向布置，這時子項目變化的是寬度屬性。

也可以設定flex-direction: column;使子項目按y軸方向布置，這時子項目變化的是高度屬性。

3.2.2 子項目對齊方向

justify-content：預設為設定x軸方向的對齊。

align-items：預設為設定y軸方向的對齊。

注意：如果彈性布局的方向改變後，這兩個對齊方向也會改變。就是如果布局方向設定為了y軸方向時，justify-content為設定y軸方向的對齊；align-items：為設定x軸方向的對齊。

3.2.3 flex-wrap: wrap;開啟換行

子項目設定變化屬性，可能會出現超出父盒子的最大對應尺寸，這時父元素會預設按照子項目設定的屬性值進行比例分割，而不會超出父元素。這個現象的原因是因為父元素預設flex-wrap值為nowrap。將父元素設定flex-wrap: wrap;屬性後會在子項目超出父元素時將子項目進行換行。

3.3 彈性布局子項目常用屬性

3.3.1 子項目flex彈性比例

給子項目設定flex屬性，屬性值為數字，父元素會根據所有子項目需要的比例總和與對應子項目佔用的彈性比例來進行子項目變化屬性的設定。

3.3.2 align-self

設定自身對齊，這個屬性的改變方向會根據父元素的彈性方向改變。

3.3.3 order

設定所有子項目布局的先後，預設值為0，預設的布局順序根據html標籤的先後。給order屬性設定值，可以是負值，並且值越小該子項目布局順序越靠前。

3.4 彈性布局的嵌套

在設定彈性布局時，每一個需要給其子項目設定彈性布局的元素都需要設定display:flex;屬性。

3.5 元素的絕對置中方法

3.5.1 方法1：margin屬性

給該元素設定絕對位置，並且父元素設定相對定位。再設定該元素的位置，具體代碼如下：

position: absolute;

top:50%;

left:50%;

margin-left:(-元素寬度的一半);

margin-top:(-元素高度的一半);

3.5.2 方法2：transform屬性

給該元素設定絕對位置，並且父元素設定相對定位。再設定該元素的位置，具體代碼如下：

position: absolute;

top:50%;

left:50%;

transform: translateX((-元素寬度的一半)px) translateY((-元素高度的一半)px);

3.5.3 方法3：彈性盒子屬性

給需要絕對置中的元素的父元素設定彈性盒子中的置中屬性，具體代碼如下：

display: flex;

justify-content: center;

align-items: center;

CSS3新增功能03