css布局

布局

默认布局

	块元素

浮动布局

	1.浮动
		让多个块元素在一行显示
		float：left
		clear：both
	2.层次关系
		float：left
			块元素脱离默认文档流
				默认宽度为0
				失去了对父元素支撑的能力【伪元素】
			在浮动流中，多个浮动元素在一行中显示，当一行容纳不下，就会自动换行
	3.清理浮动
		为容器内部添加一个子元素，一般使用伪元素较方便
			ul.list::after{}
			content:"";
			display:block;
			clear:both;
	4.盒子居中
		margin：0 auto；

定位布局

	position
		1.static
			默认，静态
		2.relative
			相对点
				该元素在文档流中初始的位置
			是否脱离文档流
				不脱离
			最佳实践
				一般不移动，作为相对点
		3.absolute
			相对点
				距离他最近的父定位元素，如果没有父定位元素，只能相对于浏览器视口
			是否脱离文档流
				脱离
		4.fixed
			相对点
				相对于浏览器视口，并且不会随着浏览器的滚动而滚动
			是否脱离文档流
				脱离
		5.sticky
			是相对定位和固定定位的结合
		当元素上的position的取值为relative、absolute、fixed、sticky之一，我们就认为当前这个元素为定位元素，定位布局可以使用定位属性
		定位属性
			left
			right
			top
			bottom

伸缩盒布局

	作用
		与浮动布局的作用类似，用于将一个容器中多个子元素【块元素】在一行中多列排列
		主轴 交叉轴
			由flex-direction决定
		子元素都是沿着主轴来排列的
		一般建议给容器添加宽高，子元素在容器中排列
	响应式布局
		PC端
			类似于腾讯视频
				容器的宽度随着屏幕的分辨率大小的改变而改变
			纯响应式（与mobile兼容）
				完全兼容移动设备
		mobile端
			手机型号不同，宽度不同
			不要给容器【块元素】指定宽度，让他默认为100%
			子元素【列元素】宽度使用相对单位%
		媒体查询技术
	使用
		ul 容器
		li子元素
	元素
		ul{display:flex;}
			让容器成为伸缩盒容器
		flex-direction
			row
				容器中子元素的排列方式，row沿着x轴
			col
		flex-wrap
			换行
		justify-content
			空白部位如何布局
		flex-basis
			主轴中基准值，主轴是x，相等于width
		flex-grow
			主轴中剩余空间分配所占份数
		flex-shrink
			主轴中如果有亏损，所占亏损的份数
		flex:1;