有些css 不常用,又难记,特此做笔记,提高开发效率
c3选择器
p~div选中p后面的div
a[href="http"] 链接是
a[href^="http"] 链接开头是
a[href$="http"] 链接结尾是
input[type="text"] 类型是
ul li:first-child{ul 里面的第一个 li 元素}
ul li:last-child{ul 里面的最后一个 li 元素}
ul li:nth-child(evev){ 偶数 li }
ul li:nth-child(odd){奇数 li }
ul li:nth-child(3n+1){3de倍数个再加1 = 第1,4,7,10——的 li }
p:first-of-type 选择的 p 元素是其父元素的第一个 p 元素:
ul li:last-of-type{选择指定类型的最后一个子元素}
ul li:nth-of-type(1){在ul 父级里面第一个类型为li的元素}
nth-last-of-type() 从后往前数
p:only-of-type 父级的唯一p元素
p:only-child p 元素是其父级的唯一子元素
p:nth-of-type(2) 选择p元素是其父级的第二个p元素
li:empty{} li里面是空的的
input:disabled{} 表示禁用的表单
input:enabled{} 表示可用的表单
input:checked{} 选择被选中的表单
::selection{} 选择被选中的文字
::before ::after伪元素要跟着content去使用,不然就没有效果了
div::before{content:"before添加的内容"} 元素前面添加内容
div::after{content:"after添加的内容"} 元素后面添加内容
disabled属性:禁用表单元素
&>div:not(:last-child)
td:not(:first-child){
text-align:center;
}
td:not(:nth-child(4n)){
text-align:center;
}
p:first-letter 选择每一个<p>元素的第一个字母
p:first-line 选择每一个<p>元素的第一行
线性渐变
hsl (色调,饱和度,亮度)
线性渐变颜色
background-image:linear-gradient(to right,pink,cyan,purple)
background-image:linear-gradient(45deg,pink,cyan,purple)
background-image:linear-gradient(45deg,pink 45%,red 50%) /*百分比规定开始渐变的位置*/
background: linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)),
linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
background-image:repeating-linear-gradient(重复渐变)
径向渐变
默认是椭圆ellipse
圆形渐变circle
background-image:radial-gradient();
background-image:radial-gradient(circle,red,yellow);
border-image: linear-gradient(-160deg,rgba(255, 255, 255, 0.3) 20% ,rgba(255, 255, 255, 0.8)
40%,rgba(255, 255, 255, 0.3) 70%,rgba(255, 255, 255, 0.8) 90%) 1;
圆角
斜杆二组值
border-radius:200px/100px;
https://autoprefixer.github.io/ 兼容工具
盒子阴影
4个值,x轴偏移量,y轴偏移量,阴影模糊程度,阴影颜色
border-shadow:20px 20px 15px rgba(0,0,0,0.5);
便宜量为0相当于盒子4周出现的阴影
box-shadow: 0 0 15px rgba(0,0,0,0.5) inset;内阴影
内阴影x为0
盒子倒影
/* -webkit-box-reflect: 方向 元素与倒影的距离 倒影效果(渐变); */
-webkit-box-reflect: left 10px
linear-gradient(90deg,red,blue);
//方向参数 left right above below
文字阴影
text-shadow:10px 10px 5px rgba(255,0,0,0.5);
x轴偏移量 y轴偏移量 模糊程度 颜色
自定义字体:
p{ font-family:"mi";}
@font-face{
font-family:"mi";自定义字体的名字
src:url(gift.ttf);自定义字体的路径
}
@font-face {
font-family: 'Noto Sans SC';
font-style: normal;
font-weight: normal;
src: local('Noto Sans SC'),
url('//portal.volccdn.com/obj/volcfe/activity/20211215/NotoSansSC-Regular.otf') format('truetype');
}
p{
font-family: Noto Sans SC;
}
文字排列方式
text-orientation: upright;
writing-mode: vertical-lr;
单行文字溢出隐藏
overflow:hidden;
/*文字不换行*/
white-space:nowrap;
/*超出文字以...显示*/
text-overflow: ellipsis;
text-overflow 默认值clip超出部分直接裁剪
英文会溢出
多行文字溢出隐藏
display: -webkit-box;
-webkit-line-clamp: 2; 用来限制在一个块元素显示的文本的行数。
-webkit-box-orient: vertical; 从顶部向底部垂直布置子元素
overflow: hidden;
text-overflow: ellipsis;
样式变量
:root {
--main-color: #3498db;
}
.element {
color: var(--main-color);
}
CSS :is() 选择器
使用 :is() 伪类简化复杂的选择器。
:is(h1, h2, h3) {
color: blue;
}
`##### filter滤镜效果
filter滤镜 10种滤镜
模糊 filter:blur() 单位为像素 记住 其他了解
灰度 filter:grayscale(1) 取值0-1
亮度 filter:brightness(1.2); 1是正常
对比度 filter:contrast(1);对比度 1是正常
反色处理 filter:invert(1); 反色处理 取值 0-1
饱和度 filter:saturate(2); 取值数字
色相转换 filter:hue-rotate(120deg) 取值度数
drop-shadow图片阴影
透明度 opacity 取值0-1
褐色 filter:sepia() 取值0-1
滤镜可以一起使用 中间空格隔开
filter:sepia(1) conttrast(1.4); 先后顺序有差别
滚动条隐藏
父元素宽度设置小
子元素宽度设置大
父元素设置滚动条
overflow-x:scroll;
父元素设置隐藏滚动条
&::-webkit-scrollbar {
display: none;
}
-ms-overflow-style: none;/* IE 10+ */
scrollbar-width: none;/* Firefox */
案例
隐藏水平滚动条,同时允许垂直滚动条:
.demo::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.demo {
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
overflow-x: hidden;
overflow-y: auto;
}
hover小手
cursor:pointer;
cursor: not-allowed;
css禁用点击
pointer-events: none;
pointer-events: all;
背景模糊
元素后面区域添加图形效果如模糊或颜色偏移
为了看到效果,必须使元素或其背景 透明
或者不设置背景色
filter:blur() 是整个所有全部模糊
backdrop:blur() 是背景模糊,不影响元素上文字
和opcity透明和rgba透明,道理差不多
父元素添加了backdrop:blur(),子元素再添加会不生效
可以添加伪元素来增加模糊
适用元素all-ele svg
/* 关键词值 */
backdrop-filter: none;
/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);
/* <filter-function> 滤镜函数值 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;
背景图片设置
background-size:20px 20px;
background-size:80% 80%; 为当前容器的百分比
background-size:cover; 全部铺满 图片可能会被裁剪
background-size:contain; 只要有一边铺面即可
backround-image:url(路径);
background-attachment:fixed;
transition过度
过渡时间 过渡样式 过渡形式 延迟时间 [,过渡时间 过渡样式 过渡形式 延迟时间]
transition: 3s width linear 2s, 2s height linear 3s,4s background-color linear 2s;
transition-property:单独设置过度属性的
transition-duration 单独设置过度时间
transition-timing-function:单独设置过度效果的
transition-delay:单独设置过度延迟的
transition只能对有数字的属性和颜色生效 z-index也不生效
第一个参数是设置过渡效果的属性默认值all
表示所有属性都执行同一个过度效果
第二个参数是设置过渡效果的时间
第三个参数是表示动画执行的效果
/*linear 匀速
ease 慢速开始最后很快 ease是慢的开始
ease-in 慢速开始
ease-out 慢速结束
ease-in-out 慢速开始和结束,中间快
cubic-bezier(n,n,n,n) 参数 0-1之间
*/
第四个参数表示延迟时间,表示多长时间后执行过渡效果
案例
transition:width 3s ease-in-out 5s,
height1s,background 1s ease-in-out 6s;
transition:transform 2s ,width 3s ease-in-out
5s,height 1s,background 1s ease-in-out 6s;
transform 转换
traslate(x,y)
可以传百分比和px
一个值默认x
translateX();/translateY();
scale(取值范围0-1)
默认中心缩放
一个括号里只可以传一个参数
scaleX()/scaleY()
rotate(deg) 默认中心旋转
transform-origin:center bottom;设置旋转中心
rotateX()/rotateY()
transform: rotate3d(1, 0, 1, -180deg);
skew 倾斜
skew(45deg)只可以传一个参数默认中心
skewX(45deg)/skewY(45deg)
transform-origin:top right; /*默认center center;*/
(0,50%)
第一个表示横向基准点
第二个表示纵向基准点
注意 3d多了一个z轴
- 一个参数默认中心 x y 2d不可以写z
- translate写3d必须传3个值
- scale 没有3d效果 - skew 没3d
- scaleZ 由于元素本身没有厚度,此属性无效
- 不加景深 Z轴相关效果看不见
- 不加transform-style: preserve-3d; 没3d效果
- rotate 属性要分开单独写 不可以复合写
控制元素转换效果
perspective: 500px; 景深视效果
这个属性一般添加给3D元素父级
transform-style: preserve-3d;表示所有子元素在3D空间中呈现
syle属性需要设置在父元素中,
并且高于任何嵌套的变形元素
backface-visibility: visible|hidden;
perspective-origin:控制摄像机位置,默认center center
动画animation
合法的值:
0-100%
from(与 0% 相同)
to(与 100% 相同)
css-styles 必需。一个或多个合法的 CSS 样式属性。
动画语法:
animation: name duration timing-function delay iteration-count
direction fill-mode play-state;
animation-timing-function 参数
linear 动画从头到尾的速度是相同的。 测试
ease 默认。动画以低速开始,然后加快,
在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束
cubic-bezier(n,n,n,n) 在 cubic-bezier
函数中自己的值。可能的值是从 0 到 1 的数值。
animation-fill-mode:
值 描述
none 不改变默认行为。
forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,
应用开始属性值(在第一个关键帧中定义)。
both 向前和向后填充模式都被应用。
animation-iteration-count: n|infinite; 次数
animation-direction: normal|alternate;
轮流反向播放
animation-play-state: paused|running;
指定动画是否正在运行或已暂停。
paused规定动画已暂停。running规定动画正在播放。
过渡和动画的区别
1、transition 属性转换时,只能控制属性的初始值和结束值
2、transition 的效果必须要有元素的事件才能触发效果
比如 hover js操作
3、keyframes 动画可以不设置触发事件,通过属性的
设定直接演出动画效果
media多媒体
user-scalable:禁止用户缩放
initial-scale:原始缩放比例
width:设置适口宽度为设备宽度
max-width :小于此宽度时
min-width:大于此宽度时
max-height:大于此高度时
min-height:小于此高度时
! 注意:每个单词之间,包括括号和单词之间,都要保留空格
orientation:landscape 横屏时
orientation:portrait 竖屏时
媒体查询
@media only screen and (orientation: landscape) {
display: none;
}
@media screen and (min-width: 480px) and (max-width: 678px) {
}
@media screen and (min-width: 679px) and (max-width: 1023px) {
}
计算样式
calc() :用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,
例:width: calc(100% - 10px);
font-size: clamp(1rem, 2.5vw, 2rem);
上述案例设置随窗口大小改变的字体大小,但是无论窗口怎么改变,
字体大小不会小于设置的最小值,也不会超过设置的最大值。
盒子模型
box-sizing:content-box; 默认标准盒模型
宽度=内容宽度
box-sizing:border-box; 怪异盒模型
宽度=content+padding+border
scroll相关的属性
阻止滚动链接,滚动不会传播给祖先
overscroll-behavior: contain;
平滑滚动,滚动容器属性
scroll-behavior: smooth;
字符换行
word-break:break-all;所有的都换行
word-wrap:break-word; 标点换行
弹性盒子
可以简洁,完整,响应式(自适应)的实现各种页面布局
采用flex布局的元素,称为弹性盒子 或者 flex容器,
他的所有子元素称为弹性元素 或者 flex项目
主轴:元素盒子排列的方向(默认的排列方向x轴,
当然不是说主轴就是x,因为我们可以通过属性来
改变主轴的方向)
交叉轴:和主轴垂直的轴
弹性盒子属性/容器属性:
flex-direction 改变主轴的方向。
- 属性值有四种情况:
- {flex-direction: row;}/默认值,从左往右排列/
- {flex-direction: row-reverse;}/从右往左排列/
- {flex-direction: column;}/从上往下排列/
- {flex-direction: column-reverse;}/从下往上排列/
flex-wrap 控制容器是单行还是多行
属性值有三种情况:
{flex-wrap: nowrap; } 默认值,不换行,会压缩,不会超出父级
{flex-wrap: wrap; } /*换行*/
{flex-wrap: wrap-reverse; }
只是单纯的上下反转,不是序号改变
复合属性:
- flex-flow:是 flex-direciton 和 flex-wrap两个属性综合
justify-content定义弹性元素在主轴上的对齐方式
用于控制元素在主轴上的排列方式,再次强调是主轴的排列方式。
属性值五种:
- 1 flex-start //默认值,从主轴开始部分开始排列(说白了就是左对齐)
- 2 flex-end //从主轴结束部分开始排列(说白了是右对齐)
- 3 center //居中
- 4 space-between // 两端对齐,中间有相等的间隔
- 5 space-around //环绕对齐,每个项目两边的间隔相等
- 6 space-evenly 元素间距离平均分配
align-items定义弹性元素在交叉轴上如何对齐
- align-items: stretch; //弹性元素不设置高度时被拉伸以适应容器(默认值)
- align-items: flex-end; //交叉轴下沿对齐
- flex-start 元素位于容器的交叉轴开头
- align-items: center; // 交叉轴中部对齐
- align-items: baseline; //项目里面的文字的基线对齐
align-content定义了多根主轴在(交叉轴的对齐方式)
如果项目自有一根轴线,则不起作用
只适用于多行显示的弹性容器
属性值六种
- stretch 元素被拉伸以适应容器(默认值
- flex-start //与交叉轴上沿紧密对齐
- flex-end //与交叉轴下沿紧密对齐
- center //居中
- space-between // 与交叉轴两端对齐,中间主轴宽度平均分配
- space-around //环绕对齐,中间主轴宽度平均分配
- space-evenly //元素间距离平均分配
弹性元素
弹性盒子里面的元素即为弹性元素
放在容器盒子中的元素即为弹性元素。
不能使用float与clear规则
弹性元素均为块元素
绝对定位的弹性元素不参与弹性布局
align-self
用于控制单个元素在交叉轴上的排列方式,
align-items 用于控制容器中所有元素的排列,
而 align-self 用于控制一个弹性元素的交叉轴排列。
选项 说明
stretch 不设置高,高度占满盒子的高
flex-start 元素紧靠主轴起点
flex-end 元素紧靠主轴终点
center 元素从弹性容器中心开始
flex-grow
用于将弹性盒子的可用空间,分配给弹性元素。可以使用整数或小数声明。
下例中为三个DIV 弹性元素设置了1、3、6 ,即宽度分成10等份,
第三个元素所占宽度为(宽度/(1+3+6)) X 6。
如果弹性元素设置了宽度,将把(弹性盒子-弹性元素宽度和)
后按照 flex-grow 进行分配 。
flex-shrink
与 flex-grow 相反 flex-shrink 是在弹性盒子装不下元素时定义的缩小值
案例
article {
border: solid 5px silver;
width: 400px;
height: 120px;
display: flex;
box-sizing: content-box;
}
article div:nth-child(1) {
flex-shrink: 0;
}
article div:nth-child(2) {
flex-shrink: 1;
}
article div:nth-child(3) {
flex-shrink: 3;
}
article * {
width: 200px;
height: 100px;
}
计算方式:
flex-shrink: 0; 代表不缩放,还是原来的宽度
flex-shrink: 1;
flex-shrink: 3;
父级400,3个子级每个200,所以必须缩小200,
flex-shrink0 代表不缩放,还是原来的宽度
1+3 总共把200分成4份
flex-shrink 1 就是200里面的其中1份(200-50)
flex-shrink 3 就是200里面的其中3份(200-150)
flex-basis
flex-basis的优先级高于width、height属性。
flex-basis: 100px;
flex
flex是flex-grow、flex-shrink 、flex-basis缩写组合
flex: 1 0 100px;
order
用于控制弹性元素的位置,默认为 order:0 数值越小越在前面,可以负数或整数。
弹性文本
文本节点也在弹性布局操作范围内
绝对定位
绝对定位的弹性元素不参与弹性布局
grid网格布局
弹性布局适用于一维布局,网格布局是二维布局
clip-path
offset-patch
offset-path您可以定义您想要的任何形状的特定路径
will-chang
will-change: left, top;
最后别忘记看兼容性
控制台,一般不太需要关注兼容性,移动端和官网类型的需要关注
兼容性