day07-CSS新特性-flex布局

昨日回顾

伪元素
	概念
		由css模拟出来的标签效果(非主体部分)
	语法
		::before
		::after
	注意
		必须要有content属性
		默认是行内元素
浮动
	概念
		一种布局方式,通过让元素漂浮起来实现块元素水平排布
	语法	
		float
			left right none
	特点
		1,脱标
		2,优先级比标准流高,可以覆盖标准流
		3,下一个浮动在上一个浮动元素左右排布
		4,会受上面元素边界的影响
		5,对于行级元素,浮动之后可以设置宽高,相当于变成了块级元素
	清除浮动
		原因
			子元素浮动之后,无法撑开标准流中父元素的高度,会对后面元素的布局产生影响
		解决
			1,给父元素设置高度
			2,额外标签法
			3,单伪元素清除法
			4,双伪元素清除法

定位
	概念
		也是一种布局方式,解决盒子层叠问题和固定显示问题
	使用
		设置定位方式
		设置偏移值
	分类
		相对定位
			相对于它之前的位置(没有脱标)
			原点:它在标准流的左上角
		
		绝对定位
			相对于最近有定位的祖先元素,如果都没有,相对于body
			原点:最近有定位的祖先元素,如果没有,body左上角
		
		固定定位
			相对于body
			原点:body左上角
			
		应用
			子绝父相
			固定显示

字体图标
	本质是一个字体 
	使用 
		1,引入 
		2,使用相应的类名展示

CSS其他属性

vertical-align

概念
	设置一个元素的垂直对齐方式
作用
	可以解决行内块元素/行内元素,垂直对齐方式
取值
	 baseline	默认。元素放置在父元素的基线上。
     top	把元素的顶端与行中最高元素的顶端对齐
     middle	把此元素放置在父元素的中部。
     bottom	使元素及其后代元素的底部与整行的底部对齐。

溢出效果

属性
	overflow
作用
	控制溢出部分的显示效果
取值
	visible	默认值。内容不会被修剪，会呈现在元素框之外。
    hidden	内容会被修剪，并且其余内容是不可见的。
    scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

隐藏效果

使用display隐藏
	display: none;不占位置 常用
使用visibility隐藏
	visibility: hidden;占据位置

CSS字体图标

font-awesome展示

iconfont展示

概念
	阿里巴巴提供的一套字体库,用于展示图标,本质是一个字体
好处
	可以灵活修改样式,降低服务器请求的次数
使用
	1,将下载好的字体包拖到项目中
	2,引用字体图标样式的css文件
	3,调用图标对应的类名去展示图标

CSS新特性

过渡

作用
	让元素的样式慢慢发生改变,通常和hover配合使用
使用
	transition:属性名 过渡持续的时间
注意
	这个属性一般需要在过渡元素本身上添加

位移

作用
	让元素沿着x轴或者y轴移动
语法
	translateX(x)	定义转换，只是用 X 轴的值。
	translateY(y)	定义转换，只是用 Y 轴的值。
	translate(x,y)	定义 2D 转换。
取值
	像素值,或者百分数(相对于自身)

旋转

语法
	transform:rotate(angle)	定义 2D 旋转，在参数中规定角度。
取值
	正数:顺时针
	负数:逆时针

渐变

语法
	background-image:linear-gradient() 创建一个线性渐变的 "图像"(从上到下)
	
linear-gradient() 
	函数用于创建一个表示两种或多种颜色线性渐变的图片。
	创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，
	如果不指定方向，默认从上到下渐变	

动画

语法
	1,定义动画
		@keyframe 动画名称{
			0%{开始状态}
			100%{结束状态}
		}
	2,使用动画
		animation 动画名称 动画时长

animation 复合属性
	animation: name duration timing-function delay iteration-count;
	animation-name	指定要绑定到选择器的关键帧的名称
    animation-duration	动画指定需要多少秒或毫秒完成
    animation-timing-function	设置动画将如何完成一个周期
    animation-delay	设置动画在启动前的延迟间隔。
    animation-iteration-count	定义动画的播放次数。

flex布局

简介

概念
	一种弹性的布局方式,使用它布局页面更加的简单灵活,避免浮动脱标的影响,提高开发效率
区别
	1,浮动会导致子元素脱标,flex不会的
	2,浮动的属性写在子元素上,flex属性写在父元素上

组成

弹性容器(父元素)
弹性盒子(子元素/flex子项/弹性元素)
主轴(横轴),默认是在水平方向
侧轴(交叉轴/纵轴),默认是在垂直方向

使用

1,在父元素上添加display: flex;属性
2,根据需要添加对应轴的属性来实现布局

主轴对齐方式

justify-content	设置或检索弹性盒子元素在主轴（默认横轴）方向上的对齐方式。
	flex-start	默认值。从行首起始位置开始排列。	
    flex-end	从行尾位置开始排列。	
    center	居中排列。	
    space-between	均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。	
    space-evenly	均匀排列每个元素，每个元素之间的间隔相等。
    space-around	均匀排列每个元素，每个元素周围分配相同的空间。

侧轴对齐方法

align-items	定义flex子项在flex容器的当前行的侧轴（默认纵轴）方向上的对齐方式。
	flex-start	元素位于容器的开头。
	flex-end	元素位于容器的结尾。
	center	元素位于容器的中心。
	stretch	默认值。元素被拉伸以适应容器。

子项空间分配

属性名
	flex	复合属性
作用
	设置了子元素如何分配空间,实现子元素宽度的动态调节
使用
	flex:数值(占据父元素剩余尺寸的份数)