前端学习第15天：背景属性-弹性盒子-rem,em,v,vh单位

第十五天

1.背景属性

1.1背景原点(background-origin)

​ 语法：

div{
	/* 以边框为原点 */
	background-origin:border-box;
    /* 以padding为原点 */
    background-origin:padding-box;
    /* 以内容边缘为原点 */
    background-origin:content-box;
}

1.2背景裁切(background-clip)

​ 语法：

div{
    /* 超出边框部分裁切 */
    background-clip:border-box;
    /* 超出padding的部分被裁切 */
    background-clip:padding-box;
}

1.3背景尺寸(background-size)

​ 语法：

/* 一个值代表背景宽度 */
div{
    background-size:10px;
}
/* 两个值分别为宽度，高度 */
div{
    background-size:10px 10px;
}
/* 两个值可取百分比 */
div{
    background-size:10%;
    background-size:10% 10%;
}

1.4CSS3多背景属性

​ 语法：

div{
    background:
        url(./../../.jpg) no-repeat center top,
        url(./../../.jpg) no-repeat right top;
}

2.flex 布局

​ 说明：

	- Flex容器：采用`flex`布局的元素的父元素
	- Flex项目：采用`flex`布局的元素
	- Flex布局默认有两根轴：主轴(main axis) 交叉轴/侧轴(cross axis)
	- `flex`项目默认朝主轴方向依次排列
	- <font color="red">设为 Flex 布局以后，子元素的`float`、`clear`和`vertical-align`属性将失效</font>

3.flex容器的属性

3.1flex-direction 主轴方向

​ 说明：决定主轴的方向

​ 语法

div{
    /* 默认值水平方向，起点在左 */
    flex-direction:row;
    /* 水平方向，起点在右 */
    flex-direction:row-reverse;
    /* 竖直方向，起点在上 */
    flex-direction:column;
    /* 竖直方向，起点在下 */
    flex-direction:column-reverse;
}

3.2flex-wrap 换行

​ 语法：

div{
    /* 默认值，不换行 */
    flex-wrap:nowrap;
    /* 换行，从上方开始排列 ->第一排在上方 */
    flex-wrap:wrap;
    /* 换行，从下方开始排列 ->第一排在下方*/
    flex-wrap:wrap-reverse;
}

3.3flex-flow

​ 说明：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

3.4justify-content 主轴方向对齐方式

​ 语法：

div{
    /* 沿主轴方向->左对齐 */
    justify-content:flex-start;
    /* 沿主轴方向->右对齐 */
    justify-content:flex-end;
    /* 沿主轴方向->居中对齐 */
    justify-content:center;
    /* 沿主轴方向->两端对齐，项目之间平均分配空间 */
    justify-content:space-between;
    /* 沿主轴方向->两端对齐，项目两端平均分配空间 */
}

3.5align-items 侧轴方向对齐方式

​ 语法：

div{
    /* 沿侧轴方向->起点对齐 */
    align-items:flex-start;
    /* 沿侧轴方向->终点对齐 */
    align-items:flex-end;
    /* 沿侧轴方向->中点对齐 */
    align-items:center;
    /* 沿项目第一行基线对齐 */
    align-items:baseline;
    /* 默认值/项目不设置高/高度为auto，将占满整个容器 */
    align-items:stretch;
}

3.6 align-content 多轴线对齐方式

​ 语法：

div{
    /* 沿侧轴方向->起点对齐 */
    align-content:flex-start;
    /* 沿侧轴方向->终点对齐 */
    align-content:flex-end;
    /* 沿侧轴方向->中点对齐 */
    align-content:center;
    /* 与交叉轴两端对齐，轴线之间的间隔平均分布 */
    align-content:space-between;
    /* 每根轴线两侧的间隔都相等 */
    align-content:space-around;
    /* 默认值/项目不设置高/高度为auto，将占满整个容器 */
    align-content:stretch;
}

4.flex容器的属性

4.1 order

​ 说明：属性值越小，排列越靠前。

​ 语法：

div{
	order:0;
}

4.2 flex-grow

​ 说明：项目放大的比例，默认值为0，即使有剩余空间也不放大。

​ 语法：

div{
	flex-grow:0;
}

4.3flex-shrink

​ 说明：项目缩小比例，默认为1，即如果空间不足，该项目将缩小。

​ 语法：

div{
    flex-shrink:1;
}

4.4flex-basis

​ 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

​ 语法：

div{
    flex-basis:auto;
}

4.5 flex

​ 说明：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

​ 语法：

div{
	flex:1;
}

4.6align-self

​ 说明：允许单个项目和其他项目一样的对齐方式。可以覆盖align-items属性。

​ 语法：

div{
    /* 默认值 */
    align-self:auto;
}

5.单位

5.1 rem

- rem(font size of the root element)是指相对于根元素的字体大小的单位 为什么`web app`要使用rem？ 实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏幕,根据变化`html`的字体大小来控制rem的大小。

5.2em

- 为了减小系统间的字体显示差异，网景通信公司和火狐的浏览器制作商于1999年召开会议，共同确定`16px`为标准字体大小默认值,即`1em`.默认情况下，`1em=16px,0.75em=12px`。

5.3vw,vh

- ：`viewpoint width`，视窗宽度，`1vw`等于视窗宽度的1%。 `vh`：`viewpoint height`，视窗高度，`1vh`等于视窗高度的1%。 `vmin`：`vw`和`vh`中较小的那个。