图解css选择器-grid-flex

css 选择器

预览	选择器	描述
	a > b 子组合器	选择直接位于 a 元素内部的所有 b 元素。
	a b 后代组合子	选择 a 元素内任意位置的所有 b 元素。
	a + b 相邻兄弟组合子	选择紧邻 a 元素的所有 b 元素。
	a ~ b 通用兄弟组合子	选择 a 元素之后任意位置的所有 b 元素。
	.cl 类选择器	选择具有 cl 类名称的所有元素。
	a.cl 标签 + 类选择器	选择所有具有 cl 类名称的 a 元素。
	.cl1.cl2多类 选择器	选择同时具有 cl1 和 cl2 类名的所有元素。
	a[x=y] 属性选择器	选择所有 x 属性设置为 y 的元素。
	#id1 ID 选择器	选择 ID 名称为 id1 的元素。
	***** 通用选择器	选择所有元素。

css 盒子模型

预览	财产	描述
	box-sizing: border-box	width和的height大小为content+ padding+border
	box-sizing: content-box	width和height的大小正好content

flex

grid

align-content沿水平轴分布内容。

	align-content: start		align-content: space-around
	align-content: center		align-content: space-between
	align-content: end		align-content: stretch

justify-content垂直轴

	justify-content: start		justify-content: space-around
	justify-content: center		justify-content: space-between
	justify-content: end		justify-content: stretch

align-items网格区域内沿水平轴分布内容

	align-items: start		align-items: center
	align-items: end		align-items: stretch

justify-items在其网格区域内沿垂直轴分布内容。

	justify-items: start		justify-items: center

	justify-items: end		justify-items: stretch