CSS相关记录

文章目录

background
position
文字
display
- flex
- justify-content
- - align-items
  - flex-direction
  - flex-wrap
- grid
- - important
transform
- translate（位移）
- scale（缩放）
- rotate（旋转）
- origin (旋转中心点)
- skew (倾斜 )
border
margin
css2.5D动画
- 定义动画
- animation属性调用动画

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，动画暂停