第十五天
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`中较小的那个。