CSS3新增功能03

Posted 2020-08-05 5毛钱小辣条

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;