第三周第一天

1.元素的显示与隐藏

 display:none 元素隐藏后不占位; 

 visibility: hidden;元素隐藏不占位; 

2.结构性伪类选择器:

标签:nth-child()和nth-of-type()

1.具体数字

 2.odd 奇数 even 偶数

3.2n+1 奇数 2n+0 偶数等代数公式

       注意：nth-child()和nth-of-type()的区别：nth-child()匹配的是所有子元素，而nth-of-type()匹配的是同类型元素。

3.过渡

  transition:要过渡的属性 (属性值all) 过渡的时间 (前2个属性必须) 过渡的效果(默认是ease(逐渐慢下来) ease-in 加速过渡 ease-out 减速过渡 ease-in-out先加速后减速 linear 匀速) 延迟的时间;

4.变换

 transform: translate(100px, 100px);平移 

transform: rotate(360deg); 

 transform: scale(2); 缩放   0-1 是缩小

5.弹性布局

设置父盒子display:flex变为弹性盒子

 如果子元素宽度不够将自动进行缩小

如果父元素宽度剩余,子元素按照自身的大小进行显示 

justify-content: space-between;2端对齐

justify-content: space-around;均匀分布 

justify-content: center;居中 

 justify-content: flex-start;左端对齐 

 justify-content: flex-end;右端对齐 

align-items: center;垂直居中 

   flex-wrap: wrap;换行

flex-direction: column;垂直

flex-direction: row; 水平