Day14 CSS3 课堂笔记

1 回顾

1.1 变换 transform

1. 变换CSS属性
   transform
   transform-origin
   transform-style
   perspective
   perspective-origin
   backface-visibility

2. 变换方法
   2D变换：
     位移： translateX()  translateY()  translate()
     缩放： scaleX()  scaleY()  scale()
     旋转： rotate()
   3D变换：
     位移： transalteZ() translate3D()
     缩放： scaleZ()  scale3D()
     旋转： rotateX() rotateY() rotateZ()  rotate3D()

1.2 过渡 transition

transition-property
transition-duration
transition-delay
transition-timing-function
transition

1.3 动画 animation

1. 关键帧
   @keyframes 名字 {
   
   }
   
2. 动画CSS属性
   animation-name
   animation-duration
   animation-delay
   animation-timing-function
   animation-itration-count
   animation-direction
   animation-play-state
   animation-fill-mode
   animation

2 多列布局

① 设置给包裹元素的 CSS 属性（共 8 个属性）

同时设置 column-count 和 column-width：

二者，谁计算出来的列数少，就按照哪一个。

② 设置给子元素的 CSS 属性（共 4 个属性）

3 伸缩盒布局

3.1 伸缩容器和伸缩项目

伸缩容器： 给一个元素设置 CSS 属性 display: flex; 或者 display:inline-flex;该元素就是伸缩容器。

在flex布局中，默认的子元素时不换行的，即使装不下，也会通过缩小子元素的宽度来达到在一行中显示

伸缩项目： 伸缩容器的子元素就是伸缩项目。

伸缩项目的特点：

1. 伸缩项目会水平排列，不会脱离文档流。

2. 伸缩项目的默认宽高被内容撑开， 可以完美设置宽高和内外边距，且不会有margin塌陷。

3. 具有伸缩性。

4. 一个元素可以既是伸缩容器又是伸缩项目

3.2 设置主轴方向和换行方式

主轴： 伸缩项目沿着主轴进行排列，默认的主轴方向是水平从左到右。

侧轴： 与主轴垂直的就是侧轴。

① 设置主轴方向

给伸缩容器设置 CSS 属性 flex-direction 可以设置主轴的方向，值如下：

row             主轴方向水平从左到右，默认值。

row-reverse     主轴反向水平从右到左。

column          主轴方向垂直从上到下。

column-reverse  主轴反向垂直从下到上。

② 设置换行方式

给伸缩容器设置 CSS 属性 flex-wrap 可以调整伸缩项目在主轴上的换行方式，属性值如下：

nowrap          不会换行，默认值。

wrap            自动换行。

wrap-reverse    自动换行，翻转行

③ 同时设置主轴方向和换行方式

给伸缩容器设置 CSS 属性 flex-flow 可以同时设置主轴方向和换行方式，该属性是 flex-direction 和 flex-wrap 的复合属性。

3.3 设置伸缩项目在主轴上的对齐方式

给伸缩容器设置 CSS 属性 justify-content，可以设置伸缩项目在主轴上的对齐方式，属性值如下：

flex-start          靠主轴开始方向对齐

flex-end            靠主轴结束方向对齐

center              居中对齐

space-between       中间有间距，两端无间距

space-around        两端间距是中间间距的一半

space-evenly        两端间距与中间间距一样

3.4 设置伸缩项目在侧轴上的对齐方式

① 一条主轴线（伸缩项目在主轴上不换行）

给伸缩容器设置 CSS 属性 align-items，可以设置伸缩项目在侧轴上的对齐方式，属性值如下：

stretch             当不设置高度时，伸缩项目在侧轴上的长度拉伸，默认值

flex-start          靠侧轴开始方向对齐

flex-end            靠侧轴结束方向对齐

center              居中对齐

baseline            文本基线对齐

② 多条主轴线 （伸缩项目在主轴上发生换行）

给伸缩容器设置 CSS 属性 align-content，可以设置伸缩项目在侧轴上的对齐方式，属性值如下：

stretch             伸缩项目在侧轴上的长度拉伸，默认值

flex-start          靠侧轴开始方向对齐

flex-end            靠侧轴结束方向对齐

center              居中对齐

space-between       中间有间距，两端无间距

space-around        两端间距是中间间距的一半

space-evenly        两端间距与中间间距一样

3.5 伸缩项目的伸缩性

① 伸缩项目在主轴上的基准长度 flex-basis

flex-basis 属性需要设置一个长度作为值，默认值是 auto； 如果设置了 basis 长度，伸缩项目在主轴上的长度就按照 basis 设置，原来设置的 width 或者 height 就无效了； 如果 basis 值是 auto，按照原来的 width 或者 height 的设置。

② 扩展比率 flex-grow

flex-grow 需要设置一个数字作为值，表示扩展比率，默认值是 0； 当伸缩容器在主轴方向出现富余长度，各个伸缩项目会按照各自的扩展比例进行扩展。

伸缩项目扩展多少只考虑扩展比率。

③ 收缩比率 flex-shrink

flex-shrink 需要设置一个数字作为值，表示收缩比率，默认值是 1； 当伸缩容器在主轴方向的长度不够时，每个伸缩项目按照各自原来的长度和收缩比率进行收缩。

伸缩项目收缩多少要考虑原来的长度和收缩比率。

④ flex 复合属性

flex 复合属性可以同时设置扩展比率、收缩比例和基准长度。

flex: 扩展比率 收缩比率 基准长度

• 如果缩写为 flex: 1 , 则其计算值为 1 1 0% (常用，自动瓜分元素空间)
• 如果缩写 flex: auto , 则其计算值为 1 1 auto
• 如果flex: none , 则其计算值为0 0 auto
• 如果 flex: 0 auto 或者 flex: initial , 则其计算值为0 1 auto，即 flex 初始值

3.6 伸缩项目排序

给伸缩项目设置 CSS 属性 order，设置伸缩项目的排序，值是数字，数字越小排序越靠前，可以是负值。

3.7 单独设置伸缩项目在侧轴上的对齐方式

给伸缩项目设置 CSS 属性 align-self，可以单独设置该伸缩项目在侧轴上的对齐方式，属性的值如下：

auto                按照伸缩容器的设置，默认值。

stretch             伸缩项目在侧轴上的长度拉伸

flex-start          靠侧轴开始方向对齐

flex-end            靠侧轴结束方向对齐

center              居中对齐

baseline            文本基线对齐

3.8 伸缩盒相关 CSS 属性总结

① 设置给伸缩容器的属性

② 设置给伸缩项目的属性

作业

1. 伸缩盒页面练习