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对齐方式