web学习笔记（六）

目录

1.CSS 2D转换

1.1translate移动：

1.2rotate()旋转：

1.3scale()缩放

1.4skew()反转

1.5transition过渡

1.6transform-origin

1.7 perspective透视

1.8 backface-visibility背面元素不可见

2.flex布局（弹性布局）

2.1flex布局的定义及格式

2.2flex布局常用属性

1.flex-driection

2.flex-wrap

3.flex-flow

4.justify-content

5.align-items 

---

1.CSS 2D转换

 transform: ; 该语句需要复合，否则会被后面的语句覆盖,语句之间用空格隔开。

eg:transform:translatex(200px) scale(30deg);。

1.1translate移动：

• 格式：transform:translate();
• 也可以写为transform:translatex();表示在x轴上移动
• 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动，移动后所占空间的大小和位置不会发生改变。

1.2rotate()旋转：

• 格式：transform:rotate();
• 默认以平面的中心点顺时针进行旋转。
• 括号内跟旋转度数，eg:transform:rotate(30deg); deg表示度数
• 可以将正方形通过旋转得到菱形，然后对菱形进行定位。给父元素加溢出隐藏等一系列操作。可以得到所需的三角形图标。
• 旋转后多出来的区域不会占用空间，在页面上显示多出来的部分会浮在上面，对其他元素的部分进行了遮挡。eg:

1.3scale()缩放

• 格式：transform:scale();
• scale括号内跟的值是一个倍数，可以同时跟多个数值，不需要带单位。
• 可以改变元素的宽度和高度，但元素的实际所占空间并不会发生改变。
• eg: transform:scale(2.3);表示将宽度放大为原来的两倍，高度放大为原来的三倍，但是进行缩放后所占空间依旧是原来的空间。
• 要注意位移和缩放的顺序，在前面的先被执行。

1.4skew()反转

• 括号内跟具体的度数，和旋转的格式一样。
• 可以将长方形通过x轴或者y轴的反转得到平行四边形。

1.5transition过渡

• 格式：transition：all 0.5s; （all表示将所有设置的样式都进行一个过渡，此时不需要再区分是对旋转还是缩放效果进行过渡操作，后面跟上过渡所需的时间，单位是秒）
• 在实现鼠标放到某元素上时，实现特定效果常用。
• 在实际操作过程中通常将过渡语句写到要发生变化的这个盒子的css样式中去，而不是写到:hover{}里面。两者的区别表现在当鼠标离开的时候前者依旧会进行一个过渡，但后者没有过渡操作。

1.6transform-origin

• transform-origin可以改变元素发生改变的坐标点，反转和缩放等属性默认是以中心点作为改变的参照点，我们可以用transform-origin来指定中心点。

• 格式：transform-origin:center center;(默认是center，可以根据需要修改为其他的属性值)。

• 可以用数字、百分比或者英文坐标单词来表示，eg: transform-origin:0 0 ;

1.7 perspective透视

• 当值为0的或无穷大的时候则没有透视感。
• 值越小，3d效果越明显。
• 在视觉上满足近大远小的准则。
• 用于转换元素上。
• 得写在父元素上，子元素才会有透视感。

1.8 backface-visibility背面元素不可见

• 可以将值设置为visible（背面元素可见，允许显示正面镜像） 或者hidden（指定背面元素不可见），默认为visible 
• 不可继承。

2.flex布局（弹性布局）

2.1flex布局的定义及格式

flex布局表示弹性布局，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

• 格式：

  .box{
       display:flex;
   
  }

• 在webkit内核的浏览器上必须加上webkit前缀。 

.box{
     
    display:-webkit-flex;
}

• 当使用弹性布局之后，里面的float、clear、vertical-align属性将失效。
• 给父级盒子设置了弹性布局，那么子级盒子不需要设置浮动和定位就可以实现左右排列。
• 当父级盒子的宽度不够时，子级盒子也不会实现换行，父级盒子也不会被撑大，里面的子元素会实现挤压的效果，但依旧是同一行展示。
• 当给父级盒子设置了弹性布局，那么再给子盒子设置浮动就和清除浮动都不会生效了。
• 使用弹性布局可以消除行内标签自带的小边框。
• 当块状元素外面的父级盒子高度没有设置时，给块状元素设置上下内边距的值，在页面观察时可以看到上下的内边距确实有生效，但父盒子的高度并没有发生变化，证明块级元素设置上下内边距不占用空间，当把父盒子改为弹性盒子模型时就可以解决这个问题了。

2.2flex布局常用属性

1.flex-driection

• flex-driection可以设置项目的排列方向，
• flex-driection的属性值包括row、row-reverse、column、column-reverse，默认属性值为row，

当设置为flex-driection：column-reverse；效果：

2.flex-wrap

• 设置项目是否在一条线上。
• flex-wrap的属性值包括wrap、nowrap、wrap-reverse，默认属性值为nowrap，

3.flex-flow

flex-flow属性是flex-driection和flex-wrap属性的简写形式，默认值为 row nowrap。

4.justify-content

• 定义项目在主轴上的对齐方式（补充：在弹性布局中x轴为主轴，y轴为侧轴，父级盒子里面包裹的子级元素统称为项目）
• justify-content的属性值包括flex-start、flex-end、center、space-between、space-around，默认属性值为flex-start，

5.align-items 

• 定义项目在侧轴上的对齐方式（多行的弹性盒模型容器）。
• align-items的属性值包括flex-start、flex-end、center、baseline(以文字为基准对齐)、stretch（盒子会发生伸展），默认属性值为flex-start，