文章目录
background
background:url() no-repeat 1px 1px fixed;
/*(1) url() 图片的路径
(2)no-repeat 背景图片不重复排满整个背景;repeat-x 表示X轴方向重复铺满;repeat-y 表示Y轴方向重复铺满;
(3)第一个1px 表示距离左边1px;第二个1px 表示距离顶部1px(其中位置部分也可以写成:center、top、bottom、right、left)
(4)fixed 设置背景图片是否随内容滚动,默认fixed=固定;scroll=滚动*/
background-color:/**规定要使用的背景颜色;*/
background-position:/**规定背景图像的位置(也可以写成百分比,如 x%,y%);*/
background-size:/**规定背景图片的尺寸(通常可设置以下两个值:
cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
);也可以:100% 100%*/
background-repeat:/**规定如何重复背景图像;**/
background-origin:/**规定背景图片的定位区域;*/
background-clip:/**规定背景的绘制区域;*/
background-attachment:/**规定背景图像是否固定或者随着页面的其余部分滚动;*/
background-image:/**规定要使用的背景图像;
(当值为inherit:规定应该从父元素继承 background 属性的设置)*/
background-repeat: no-repeat;
background-position: center center;
background-size:100% 100%
background: linear-gradient(180deg, white, #dfdfdf 51%, white);/**渐变*/
background: url('@/assets/margin-border.png') no-repeat,
url('@/assets/bg.png') no-repeat;/**多张背景叠加*/
position
position: static|absolute|fixed|relative|sticky|initial|inherit;
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
- absolute:根据父元素定位,父元素也要有postion,否则一直向上找有POSTION的父元素,找不到则用HTML根。在父元素内 可以通过 “left”, “top”, “right” 以及 “bottom” 属性进行定位。
- fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行固定。
- relative:相对定位是指,该元素相对自己原来位置,偏移一定距离,元素可以通过顶部top,底部bottom,左侧left和右侧right属性来设置定位。
- static :默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
- inherit:规定应该从父元素继承 position 属性的值。
文字
line-height: 100rpx;
text-align: center;
font-size: 24rpx;
- 单行截断
white-space: nowrap; /* 文字在一行显示不能换行 */
overflow: hidden; /* 文字长度超出限定宽度则截断 */
text-overflow: ellipsis; /* 文本溢出时显示省略符号 */
text-overflow:
1).clip:默认值,表示文本溢出时被剪切隐藏。
2).ellipsis:表示文本溢出时显示省略号。
3).string:表示文本溢出时显示指定的字符串。
2.多行截断
如果你想在特定的位置截断文本,可以使用 ::after 伪元素和 content 属性来插入一个分隔符。然后设置容器的高度和溢出隐藏。
.container::after {
content: '...'; /* 插入省略号 */
}
.container {
height: 50px; /* 设置容器高度 */
overflow: hidden; /* 隐藏超出容器的部分 */
}
- word-spacing
4.letter-spacing文件间距
display
flex
子元素上flex:1表示自动平分空间
justify-content
/* 对齐方式 */
justify-content: center; /* 居中排列 */
justify-content: start; /* 从行首开始排列 */
justify-content: end; /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end; /* 从行尾位置开始排列 */
justify-content: left; /* 一个挨一个在对齐容器得左边缘 */
justify-content: right; /* 元素以容器右边缘为基准,一个挨着一个对齐, */
/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
/* 分配弹性元素方式 */
justify-content: space-between; /* 均匀排列每个元素
首个元素放置于起点,末尾元素放置于终点 */
justify-content: space-around; /* 均匀排列每个元素
每个元素周围分配相同的空间 */
justify-content: space-evenly; /* 均匀排列每个元素
每个元素之间的间隔相等 */
justify-content: stretch; /* 均匀排列每个元素
'auto'-sized 的元素会被拉伸以适应容器的大小 */
/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;
/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
align-items
stretch 默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。
center 元素位于容器的中心。弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
flex-start 元素位于容器的开头。弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end 元素位于容器的结尾。弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
baseline 元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。
initial 设置该属性为它的默认值。请参阅 initial。 测试 »
inherit 从父元素继承该属性。请参阅 inherit。
flex-direction
flex-direction 属性用于决定弹性盒子内部元素的主轴方向。主轴方向可以是水平方向(row)或垂直方向(column)。
row:默认值,主轴为水平方向。
row-reverse:主轴为水平方向,与 row 相反。
column:主轴为垂直方向。
column-reverse:主轴为垂直方向,与 column 相反。
flex-wrap
flex-wrap 属性用于决定当弹性容器内的元素超出容器大小时是否换行。
nowrap:默认值,不换行,使子元素在一行内排列,可能会导致溢出。
wrap:当子元素宽度超过容器宽度时,换行并继续排列。
wrap-reverse:当子元素宽度超过容器宽度时,反向换行并继续排列。
grid
grid-template-columns 和 grid-template-rows:定义网格的列和行轨道大小。
grid-template-columns:100px 200px 300px; /**三列,宽度分别是100px 200px 300px**/
grid-template-columns: repeat(3, 200px); /**repeat是用来简写的,表示重复三次,及三列宽度都是200px**/
grid-template-columns: repeat(auto-fill, 100px);/**有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用auto-fill关键字表示自动填充。**/
grid-template-columns: 1fr 1fr 100px;/**为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。**/
grid-gap 或 grid-row-gap 和 grid-column-gap:设置行和列之间的间距。
grid-template-areas:使用名称定义网格区域。
grid-auto-flow:定义网格项目的自动填充和对齐方式。
justify-items 和 align-items:控制项目在各自网格单元格内的对齐方式。
justify-content 和 align-content:在有多余空间的情况下,控制行或列整体在容器内的对齐方式。
important
CSS 中的 !important 规则用于增加样式的权重
transform
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
translate(位移)
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)
translateX(x)仅水平方向移动(X轴移动)
translateY(Y)仅垂直方向移动(Y轴移动)
语法:Transform:translateX(apx) / translateY(bpx) / translateZ(cpx);
简写: transform:translate(apx,bpx,cpx);
案例:
给盒子添加transform:translateX(100px);
scale(缩放)
语法:transform:scale(x, y);默认x和y的值为1
transform:scale(1.5);
表示元素放大1.5倍,如果要缩小0.5倍就将设为0.5即可
也可以单独设置x轴的缩放和y轴的缩放,也可以将数值设置为负数
transform:scale(-1)
rotate(旋转)
transform:rotateX/rotateY/rotateZ;/rotate(旋转)/
rotateX(30deg)表示元素沿着x轴做旋转,30deg表示要沿着x轴方向的 顺时针旋转30度,将值设为负数则是逆时针旋转30度。
单独设置的话 例如:
transform:rotateX(10deg) 沿X轴旋转
origin (旋转中心点)
transform-origin: x y;
skew (倾斜 )
transform:skew(10deg);
transform:skew(10deg,50deg);
transform:skewX(50deg);
transform:skewY(50deg);
border
阴影
box-shadow: inset 0 0 2px #084ca55b, inset 0 0 3px #084ca567,
inset 0 0 4px #084ca567;
box-shadow: 2px 2px 2px #333;
员角
border-radius: 5px;
边框
/* 设置元素所有边的边框 */
.element {
border: 1px solid black;
}
/* 分别设置每个边的边框 */
.element {
border-top: 2px dashed red; /* 上边框为虚线 */
border-right: 3px dotted green; /* 右边框为点状 */
border-bottom: 4px solid blue; /* 下边框为实线 */
border-left: 5px double orange; /* 左边框为双线 */
}
/* 设置一个圆角边框 */
.element {
border: 1px solid black;
border-radius: 5px; /* 圆角半径 */
}
margin
margin:0 auto;水平居中
css2.5D动画
定义动画
@keyframes为关键字,关键字后面的动画名称
@keyframes run {
/* 开始创建动画帧 */
0% {
transform: translateY(0);
}
50% {
transform: translateY(25px);
}
100% {
transform: translateY(0);
}
}
animation属性调用动画
.box {
width: 100px;
height: 100px;
background-color: red;
/* 动画名run,时长5s,匀速,延时1s 无限执行 正常播放(reverse反向)无 运行 */
animation: run 5s ease 1s infinite normal none running;
}
animation: animation-name||animation-duration||animation-timing-function||animation-delay||animation-iteration-count||animation-direction||animation-state;
animation-name:表示定义的帧动画名称
animation-duration:表示动画完成所需的时间
animation-timing-function:表示动画的过渡类型。linear表示匀速;ease表示慢速开始,中间加速,慢速结束;ease-in表示慢速开始;ease-out表示慢速结束;ease-in-out表示慢速开始和结束;
animation-delay:表示动画延迟多少时间后开始执行。
animation-iteration-count:表示动画执行的次数,infinite: 无限循环。
animation-direction:动画在循环中是否反向播放,normal,正常播放
reverse,反向播放。
alternate,奇数次正常播放,偶数次反向播放。
alternate-reverse,奇数次反向播放,偶数次正常播放
animation-state:running,动画运行
paused,动画暂停