css及css3学习

css~css3

前言：
（1）css的复合选择器总结
（2） flex布局
（3） 过渡属性
（4）变形属性

复合选择器

• 后代选择器：用于选择后代元素（可以是子孙后代）
  

Flex布局
*CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式, display 属性的值flex 或 inline-flex将其定义为弹性容器。

• direction`属性：修改弹性子元素排列方式rtl（right-to-left）

• flex-direction属性：

 
    row：横向从左到右排列（左对齐），默认的排列方式。
    row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
    column：纵向排列。
    column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

• justify-content属性:
  flex-start:
  
  center:
  

  flex-end:
  

  space-around:
  

  space-between:
  

• align-items(作用于纵轴，也就是y轴)：

  flex-start：交叉轴的起点对齐。
  

  flex-end：交叉轴的终点对齐。
  

  center：交叉轴的中点对齐。
  

  baseline: 项目的第一行文字的基线对齐。
  

  stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
  

• flex-wrap属性：

  nowarp:
  

  wrap
  

  wrap-reverse -反转 wrap 排列。
  

• align-content属性（对比align-items属性）：
  flex-start :

  initial:
  

  space-around:
  
  inherit,space-between,flex-end…
  过渡属性（transition）

• transition-property:规定应用过渡的 CSS 属性的名称 eg：width，height，将鼠标悬停在一个div元素上，逐步改变表格的宽度或高度。

• transition-duration：定义过渡花费的时间，默认是 0。

• transition-timing-function ：

 linear:匀速过渡；
 ease：慢快慢的过渡效果；
 ease-in：以慢速开始的过渡效果；
 ease-out:以慢速结束的过渡效果；
 ease-in-out:以慢速开始以及结束的过程；
 

• transition-delay ：规定过渡从何时开始，默认为0，即是过渡开始前会停顿的时间。
  变形属性
• 2D转换

matrix(n,n,n,n,n,n)  使用六个值的矩阵。
translate(x,y) 	     沿着 X 和 Y 轴移动元素。
translateX(n) 	     沿着 X 轴移动元素。
translateY(n) 	     沿着 Y 轴移动元素。
scale(x,y) 	         改变元素的宽度和高度。
scaleX(n) 	         改变元素的宽度。
scaleY(n)            改变元素的高度。
rotate(angle)        在参数中规定角度。
skew(x-angle,y-angle)沿着 X 和 Y 轴都倾斜转换。
skewX(angle) 	     沿着 X 轴倾斜转换。
skewY(angle) 	     沿着 Y 轴倾斜转换。

```css

 

• 3D转换

matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)   使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 
translateX(x) 	       仅使用用于 X 轴的值。
translateY(y)          仅使用用于 Y 轴的值。
translateZ(z) 	       仅使用用于 Z 轴的值。
scale3d(x,y,z) 	       缩放转换。
scaleX(x) 	           定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 	           定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 	           定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)  定义 3D 旋转。
rotateX(angle) 	       定义沿 X 轴的 3D 旋转。
rotateY(angle) 	       定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 	       定义沿 Z 轴的 3D 旋转。
perspective(n) 	       定义 3D 转换元素的透视视图