Web前端105天-day10-CSS

day10

目录

前言

一、复习

二、flex弹性布局

1.项目属性值放大属性

2.项目属性之缩小比例

3.高频面试题

4.项目的主轴尺寸设定

5.简写方式

三、CSS3动态效果

1.过渡

2.变换属性

2.1特点

2.2位移函数

2.3旋转函数

2.5扭曲函数【非重点】

总结

---

---

前言

第10天学习开始

一、复习

• 高级选择器
  • 属性选择器
  • 结构性伪类选择器（常用）
  • 目标伪类选择器
• flex布局
  • display: flex; 弹性盒子布局
  • flex-direction 行模式还是列模式，主轴方向
  • flex-wrap 项目是否换行
  • justify-content 主轴对齐
  • align-items 交叉轴对齐
  • 项目属性 order 项目的排序

二、flex弹性布局

1.项目属性值放大属性

在容器的主轴尺寸大于项目主轴方向尺寸之和的时候，项目不放大。也叫放大比例，也叫增长规则。

• 默认flex-grow: 0;不放大
• 放大比例，负值无效，整数
• 一般情况下想要让页面中一个元素可以放大写1

2.项目属性之缩小比例

项目默认在容器主轴尺寸小于，项目主轴尺寸之和的时候，每个项目默认等比例缩小。

• flex-shrink: 1;默认值
• 可以为负值，值越大缩小的比例越大
• 不缩小值为 0

3.高频面试题

• 如果你想要三个元素横向排列，最左最右不放大也不缩小，中间随着页面宽度放大缩小使用什么方法？
• 圣杯布局怎么写？
• 双飞翼布局怎么写？
• 左右两侧宽度固定，中间宽度不固定

  
  
  
  
  


  

    
1
    
2
    
3
    
  

4. 项目的主轴尺寸设定

• 行模式以项目宽度为重要依据，放大缩小
• 列模式以项目高度为重要依据，放大缩小
• 如果不确定行模式或者是列模式，重要依据就无法确定是宽度还是高度
• flex-basis 项目的属性，指的是项目的主轴尺寸重新设置，优先级高于项目的宽度或高度

5.简写方式

• flex:放大比例 缩小比例 主轴尺寸重置

• flex：1 可放大

• flex:0 1 auto 默认值
• flex:0 0; 不放大不缩小

三、CSS3动态效果

1.过渡

通过两种不同的状态切换（伪类）的过渡，一个样式过渡到另一个样式，需要至少两个关键内容：

1. 过渡的样式（伪类的样式中）
2. 过渡的时间

语法：

• transition:all 1s 0s ease;
• 只有过渡时间和延迟时间有前后顺序
• all可以省略，代表所有过渡样式
• ease可以省略，常用值匀速linear

过渡属性 ：

• transition:过渡时间
• transition:过渡时间 延迟时间 过渡样式 过渡方式;
• transition-property: all;需要过渡的样式，默认all
• transition-duration: 0s;过渡所用的时间默认0s
• transition-delay: 0s;过渡的延迟时间，默认0s，必须写在过渡时间的后面
• transition-timing-function: ease;过渡的方式。默认ease，常用值linear匀速

2.变换属性

变换是 css3 的新内容，存在一定的兼容问题。

变换的四个函数值：

• 位移函数
• 旋转函数
• 缩放函数
• 扭曲函数

2.1特点

• 使用变换属性不影响布局，不影响其他兄弟元素，或者父级元素的排版
• 当因为元素变换发生元素错位，会出现堆叠，但不脱离文档流，原来的位置还存在
• 在变换属性中使用的函数，都是参照元素的中心点而变化的，却不是左上角0，0点

2.2位移函数

• transform: translate(x轴位移,y轴位移);
• transform: translateX(尺寸) x轴单独设定
• transform:translateY(尺寸) y轴单独设定
• 正值和负值都可以使用，没有位置使用0不用加单位

2.3旋转函数

• transform: rotate(-50deg); 角度值，0deg-360deg，可以写负值
• 正值顺时针旋转元素，负值是逆时针旋转元素
• transform: rotateX(-50deg); 沿着x轴进行转转，正值向后仰，负值向前趴
• transform: rotateY(40deg); 沿着y轴进行旋转，正值向自己的左侧旋转，负值想自己的右侧旋转

  
  
  
  
  


  
好
  
好
  
好

2.4缩放函数

• transform: scaleX(0.5); x轴方向的缩放
• transform: scaleY(1.5);y轴方向的缩放
• 函数的参数，默认1。大于1就是放大.小于1，大于0是缩小比例
• transform: scale(x轴的倍数,y轴的倍数);如果写一个值，则代表x轴和y轴使用相同的倍数
• transform: scale(0); 0值代表元素缩小到没有，也起到了消失的所用
• 使用负值代表镜像翻转 transform: scaleY(-1.5);1.5 还是放大或缩小倍数，负号则代表翻转

	
		
		
		
	
	
		
好
		
好
		
好
		
好
	

2.5扭曲函数【非重点】

• transform: skew(x轴扭曲角度,y轴扭曲角度);
• transform: skewX()x 轴扭曲角度
• transform: skewY()y 轴扭曲角度

---

总结

第10天学习结束