背景图属性与flex补充

background-origin 背景原点

• 默认值:padding-box, 表示背景图在填充框的位置
• 常用值content-box, 表示背景图在内容的位置
• border-box, 表示背景图在边框上
  注: 边框>填充框>内容,根据盒模型的定义来的

background-clip 背景裁切

• 规定背景图的裁切区域,默认值 border-box;
• content-box和padding-box也是可选值.

多背景权重:

• 多个背景使用的时候,如url(a,b,c)前面的权重更高.会显示在上面.

flex布局(弹性盒子)

• disable: flex; 或者disable: inline-flex;前者可以设置宽高,后者不能.
• 默认主轴水平由左向右,副轴垂直由上到下.
• flex-direction: value; 判断元素主轴排列方向,value值为row(默认),row-reverse, column, column-reverse
• flex-wrap:value; 判断元素是否要换行,值为wrap(默认), nowrap, wrap-reverse
• justify-content: value; 判断元素主轴对齐方式,值为flex-start(默认:左对齐), flex-end(右对齐), center, space-between(两端对齐), space-around(元素左右固定间隔)
• align-items: value; 判断元素副轴对齐方式, 值为stretch(默认:占满整个容器), flex-start(起点对齐),flex-end(终点对齐),center, baseline(元素第一行文字的基线对齐)
• align-content: value; 判断多个元素的多个轴线的对齐方式,值为stretch(默认:填充满), flex-start/end(起点/终点对齐), space-between/around(上下两端对齐/有间隔)

容器属性(添加到子元素上)

• order, 排序,数字越小越靠前,默认0 .
• flex-grow 扩大的比例,默认为0.元素grow值/容器内所有的grow值为最终比例,如为比例为1则填满,1/2则一半
• align-self: 子元素自己的align-content对齐方式