自我学习第十三天--图片边框、盒模型的计算方式、弹性盒

1、图片比例

object-fit

设置图片比例大小
栗子：如果图片本身的大小是400*500，需要强制设置图片的大小是300*300
	fill		强制图片按照300*300显示
	none		按照图片本身大小500*400显示
	cover		图片显示等比显示，可能有部分内容显示不全
	contain		图片等比显示，图片完整显示，但是有空白
	scale-down	跟contain效果差不多

---

2、图片边框

border-image：路径 内偏移 平铺方式；

border-image-source		设置图片边框的路径
border-image-slice		设置图片边框向内偏移
border-image-repeat		设置图片平铺方式
				stretch		拉伸	（默认值）
				repeat		平铺
				round		铺满

border-image-outset		设置图片往外偏移（值设置倍数，可以设置多个值）

---

3、盒模型的计算方式

标准盒子和怪异盒子组成结构都一样，就是盒子大小的计算方式不同

	box-sizing：
			border-box		转换成怪异盒
			content-box		标准盒子（默认按照标准盒计算）

	标准盒子：
			总宽度：width+左右的padding+左右的border

	怪异盒子：
			总宽度：width（包含padding+border）

---

4、弹性盒：flex布局

父元素控制子元素按照主轴反向进行排列

display：flax

弹性盒可以设置单独内容水平垂直居中

父元素：display：flex
子元素：margin：auto

弹性盒子的子元素也称为灵活元素，灵活元素的类型是内联也可以设置宽高

父元素设置属性

1、设置主轴方向
	flex-direction
	x轴（水平左边是顶端，右边是低端）
			row		默认		x轴的顶端显示排列
			row-reverse			x轴的底端显示排列

	y轴（垂直上边是顶端，下边是低端）
			column				y轴的顶端显示排列
			column-reverse		y轴的底端显示排列

2、设置灵活元素是否换行
	flex-wrap
			nowrap		默认		挤压宽高不换行
			wrap					自动换行
			wrap-reverse			换行内容反向显示

简写 主轴和换行的简写

3、flex-flow:row nowrap

主轴对齐方式

4、justify-content
				flex-start		主轴顶端对齐
				flex-end		主轴底端对齐
				center			主轴居中
				space-between	两端对齐，中间自动平分
				space-around	盒子左右的距离相等
				space-evenly	所有的距离自动平分

侧轴对齐方式

5、align-items
			flex-start		主轴顶端对齐
			flex-end		主轴底端对齐
			center			主轴居中
			stretch			默认值，如果y轴是侧轴，不设置高，拉伸高
							如果X轴是侧轴，不设置宽，拉伸宽度

			baseline		内容对齐，一般情况下flex-start一样

设置多行内容的侧轴

6、align-content:
			flex-start		侧轴顶端对齐，取消行间距
			flex-end		侧轴底端对齐，取消行间距
			center			侧轴居中，取消行间距
			space-between	行间距两端对齐，中间间距平分
			space-around	行间就两遍距离平分
			space-evenly	所有行间距平分

子元素设置的属性
设置内容的排列顺序

order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

单独灵活元素的侧轴

align-self
		flex-start		单独灵活元素的侧轴顶端对齐
		flex-end		单独灵活元素的侧轴底端对齐
		center			单独灵活元素的侧轴居中
		stretch			高度拉伸
		baseline		跟flex-start一样
		auto			跟父元素align-items的值一样

栗子：

父元素宽500px	超出值100
3个盒子	收缩
100		1
200		2
300		3

加权值：盒子本身的宽度*收缩的选项进行相加
		100*1+200*2+300*3=1400

收缩值
（盒子本身的宽度*收缩的选项/加权值）*超出值
第一个盒子的收缩值：	100*1/1400px*100
盒子本身大小-收缩值

父元素宽400px	超出值200px
200		0
200		1
200		2


加权值：盒子本身的宽度*收缩的选项进行相加
		200*0+200*1+200*2=600

收缩值		200/600*200