选择器
一般选择器
/*id选择器*/
#id名
/*class选择器*/
.class名
/*多选*/
h1,h2,h3
/*选择h1中的所有div标签*/
h1 div
/*选择h1下一级的所有div标签*/
h1>div
/*选择所有带有class属性的div标签*/
div[class]
/*选择class属性中包含字符red的div标签*/
div[class*=red]
/*选择class属性中字符以red开头的div标签*/
div[class^=red]
/*选择class属性中字符以red结尾的div标签*/
div[class$=red]
/*选择紧靠h1的同级p标签*/
h1+p
/*选择h1后面的所有p标签*/
h1~p
伪类
/*未被访问时*/
a:link
/*被点击时*/
a:active
/*鼠标悬停时*/
a:hover
/*已经被访问时*/
a:visited
/*获得焦点时*/
input:focus
/*被选中时*/
input:checked
/*启用时*/
input:enabled
/*禁用时*/
input:disabled
/*向前插入内容*/
p:before
/*向后插入内容*/
p:after
/*首行文本样式*/
p:first-line
/*第一个字符样式*/
p:first-letter
结构伪类
/*ul中的第一个li*/
ul li:first-child
/*ul中的最后一个li*/
ul li:last-child
/*ul中的第n个li*/
ul li:nth-child(n)
/*ul下级的第一个li*/
ul li:first-of-type
/*ul下级的最后一个li*/
ul li:first-of-type
/*ul下级的第n个li*/
ul li:nth-of-type(n)
/*样式穿透*/
el-input >>> input /*可以穿透组件,修改里面的元素*/
提高权重
div{
/*width属性拥有最高的优先级*/
width:20px!important;
}
文本
/*行高*/
line-height
/*字体大小*/
font-size:
/*字体优先级*/
font-family:Arial,Verdana/*优先字体Arial,如果不支持则Verdana*/
/*字体风格*/
font-style:oblique/*倾斜*/ italic/*意大利体*/
/*字体粗细*/
font-weight:normal/*细400*/ bold/*粗800*/ /*100~900,无单位*/
/*对其方式*//*会影响到子集的内联元素*/
text-align:justify/*两端对齐*/
/*文本修饰*/
text-decoration:line-strough/*删除线*/ underline/*下划线*/ overline/*上划线*/
/*首行缩进*/
text-indent:-20px/*可以是负数*/
/*字母控制*/
text-transform:capitalize/*首字母大写*/ oppercase/*全大写*/ lowercase/*全小写*/
/*文本阴影*/
text-shadow:阴影类型 颜色 x y 模糊半径/*多组阴影,隔开*/ inset/*内阴影*/
/*字间距*/
word-spacing:2px
/*文本颜色*/
color:rgba(0,0,0,0.5)/*透明度50%的黑色*/
/*文本方向*/
direction:ltr;/*默认左到右*/ rtl/*右到左*/ inherit/*继承*/
背景
/*平铺方式*/
background-repat:repat-x/*沿X轴平铺*/ no-repeat/*不平铺*/ hidden/*继承*/ repeat/*默认水平平铺*/
/*背景尺寸*/
background-size:X Y percentage/*拉伸*/ cover/*填充*/ contain/*适应*/
/*背景定位*/
background-position:
/*背景颜色*/
background-color:
/*背景图片*/
background-image:url()
/*渐变背景*/
background-image:linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
/*综合写法*/
background:#333 url() X Y no-repeat;
渐变函数
/*线性渐变*/
linear-gradient(to left top,rgb() 20px,#666 50%)
linear-gradient(90edg,rgb() 20px,#666 50%)
/*径向渐变*/
radial-gradient()
列表
/*列表项样式*/
list-style-type:none/*无*/ circle/*圆*/ square/*方*/ decimal/*数字*/ disc/*默认*/
/*列表项图片*/
list-style-image:
/*列表项定位*/
list-style-poisition:inside/*缩进*/
/*复合写法*/
list-style:
表格
/*表格边框分离*/
border-collapse:collapse/*分边框*/ separate/*默认边框*/
/*相邻边框距离*/
border-spacing:
/*表格标题位置*/
caption-side:
/*垂直对齐方式*/
vertical-align:middle/*垂直居中*/
pandding-left:
select
/*聚焦时的边框*/
outline: none;
/*select的下拉图标*/
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
盒子布局
/*盒子尺寸计算方式*/
box-sizing:border-box/*不被内边距及边框影响*/ inherit/*继承*/
/*外边距*/
margin-left:10px
margin:0 auto/*当自己为块级元素时自动水平居中*/
盒子水平垂直居中
/*添加一个看不见的元素,父级元素需要有尺寸*/
外部盒子::before{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
/*使用浮动加边距*/
内部盒子{
float:left;
margin-top: calc(50% - 盒子高一半px);
margin-left:calc(50% - 盒子宽一半px);
}
/*将外部盒子伪装成表格*/
外部盒子{
display: table-cell;
vertical-align:middle;
}
内部盒子{
display:inline-block;
}
/*使用flex布局*/
外部盒子{
display:flex;
align-items:center;
justify-content:center;
}
/*使用fixed定位*/
外部盒子{
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
/*使用相对定位*/
内部盒子{
position:relative;
top:50%;
transform:translateY(-50%);/*尺寸的一半*/
margin: auto;
}
/*使用绝对定位*/
外部盒子{
position:relative;}
内部盒子{
position: absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
}
/*使用绝对定位*/
外部盒子{
position:relative;}
内部盒子{
position: absolute;
top:50%;
left:50%;
margin-top:-盒子高一半;
margin-lfet:-盒子宽一半;
}
阴影
box-shadow:阴影类型 rgb() x y 模糊半径, inset/*内阴影*/ #666 30px 30px 10px
倒影
-webkit-box-reflect:below 间距 渐变;below/*朝下*/ above/*朝上*/left,right repeating-渐变/*使用重复的渐变遮盖倒影*/
边框
/*边框样式*/
border-style:dashed/*虚线*/ dotted/*点线*/ double/*双线*/ solid/*实线*/
/*边框颜色*/
border-color:/*两值上下-左右*//*三值上-左右-下*//*四个值从上开始顺时针*/
/*边框宽度*/
border-width:
/*复合写法*/
border:1px solid #000;
/*圆角*/
border-radius:
遮罩
/*模糊遮罩*/
filter:blur(30px)
/*亮度遮罩*/
filter: brightness(200%);
/*对比度遮罩*/
filter: contrast(200%);
/*阴影遮罩*/
filter: drop-shadow(8px 8px 10px #000);
/*灰阶遮罩*/
filter: grayscale(50%);
/*色相遮罩*/
filter: hue-rotate(180deg);
/*不透明度遮罩*/
filter: opacity(30%);
/*饱和度遮罩*/
filter: saturate(800%);
/*复古遮罩*/
filter: sepia(100%);
浮动
float:left/*左浮动*/ right/*右浮动*/
清除浮动
clear:both;/*清除左右浮动*/ left right
防止父级边框塌陷
:after{
content: '';
display: block;
clear: both;
visibility: hidden;/*元素不可见*/
}
盒子溢出
overflow:hidden;/*不显示溢出部分*/ scrool/*显示滚动条*/ auto/*自动适应*/ visible/*默认允许溢出*/
/*Y轴方向的溢出规则*/
overflow-y:auto
文本溢出显示省略号
/*单行文本*/
span{
white-space: nowrap;/*禁止换行*/
overflow: hidden;/*溢出隐藏*/
text-overflow: ellipsis;/*溢出代替*/
}
/*多行文本*/
overflow: hidden;
display: -webkit-box;/*弹性盒子*/
-webkit-line-clamp: 2;/*文本行数限制*/
-webkit-box-orient: vertical;
三角形
输入框::after{
content:'';
width: 10px;
height: 10px;
display: block;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
}
div{
width: 0px;
height: 0px;
line-height: 0px;
font-size: 0px;
border: solid 100px rgba(0, 0, 0, 0);
border-top-color: rgba(0, 0, 0, 1);
}
定位
position:relative/*相对定位*/ absolute/*绝对定位*/ fixed/*固定定位*/
子集若使用绝对定位父级需使用相对定位
层级
z-index:999
透明度
opacity:0.5
自由变换函数
transform:rotate(90deg)/*旋转*/ translate();/*平移*/ scale(xy);/*缩放*/ skew();/*斜切*/
/*旋转中心点*/
transform-origin: x y;
三维自由变换
/*父级元素透视*/
perspective;0px;
/*2D3D切换*/
transform-style:preserve-3d;/*3D呈现开关*/ flad/*默认2D呈现*/
transform:rotate3d(x y z);/*3d旋转(deg)*//*3d位移*/
动画
transition:属性-时间-曲线-开始时间
transition: height 2s linear 0s,width 2s linear 0s;
/*要过渡的属性*/
transition-property:arr/*全选*/
/*过渡时间*/
transition-duration:2000ms 2s
/*动画过渡曲线*/
transition-timing-function:linear/*匀速*/ ease-in/*逐加速*/ ease-out/*逐减速*/ ease-in-out/*逐加速再逐减速*/ ease;/*默认*/
关键帧动画
/*定义动画*/
@keyframes 定义名称{
from{
效果}/*等价0%*/
30%{
效果}
60%{
效果}
100%{
效果}/*等价to*/
}
/*引用动画*/
animation:名称 10s linear 0s;
animation-name:名称;
/*循环次数*/
animation-iteration-count: infinite;/*无限循环*/ 1/*默认一次*/
/*循环方法*/
animation-direction: alternate;/*倒放1-0*/ reverse;/*0-1-0-1*/ alternate-reverse/*1-0-1-0*/
/*暂停动画*/
animation-play-state: pause;
/*结束后初始化动画*/
animaiton-fill-mode:backwards/*结束动画后初始化*/ forwards/*不初始化*/
鼠标样式
cursor: pointer/*手*/ efault/*小白默认*/ move/*移动*/ text/*文本*/ not-allowed/*禁止*/
文本域
resize:none/*禁调宽高*/ horizontal//*禁调高*/ vethical/*禁调整宽*/ both;/*默认可调宽高*/
表单
/*取消表单轮廓*/
outline:none;
弹性布局
拥有display为flex的为容器,子元素为成员(flex item)
容器:
/*启用flex布局*/
display: flex/*块级元素flex*/ inline-flex/*行内元素flex*/ -webkit-flex; /*兼容*/
/*内容超出换行开关*/
flex-wrap:wrap/*换行*/ nowrap/*默认不换*/
/*flex主轴布局方向*/
flex-direction:column/*上到下*/ row-reverse/*右到左*/ column-reverse/*下到上*/ row/*默认左到右*/
flex-flow:/*主轴布局方向和换行的复合写法*/
/*flex主轴布局方式*/
justify-content:space-between/*两端对齐*/ space-around/*平均分布*/ center/*居中*/ flex-end/*尾到头*/ flex-start/*默认头到尾*/
/*flex侧轴多行布局方式*/
align-content:space-around/*两端对齐*/ space-between/*平均分布*/ flex-start flex-end center/*居中*/ stretch/*默认平分大小*/
/*flex侧轴单行布局方式*/
align-items: flex-start;/*头到尾*/ baseline/*首行文本基线对齐*/ flex-end;/*尾到头*/ center;/*居中对齐*/ stretch;/*默认拉伸*/
成员:
/*放大优权重*/
flex-grow:0/*平均划分0份*/ 2/*平均划分2份*/
/*缩小优权重*/
flex-shrink:1/*默认1,如果空间不足则缩小*/ 0/*缩小不优先*/
/*固有大小*/
flex-basis:20px/*元素会在flex分配大小的基础上增加20px*/ auto/*默认自动分配*/
/*复合写法*/
flex:1 1 30px/*放大优先级-缩小优先级-固有宽度*/ 1 30px/*缩小优先级-固有宽度*/
/*子项侧轴排列方式*/
align-self:
/*排列顺序*/
order:-1;/*值越小,排面越前*/
宫格布局
拥有display为grid的为容器,子元素为成员(grid item)
display:grid;
/*垂直 列*/
grid-template-columns:200px 100px/*两列*/
/*水平 行*/
grid-template-rows:[命名]100px auto [命名]100px/*三行,中间自适应大小*/ 1fr/*弹性网格,像flex属性*/
/*分配区域*/
grid-template-areas:
'box1 box1 box3'
'box1 box1 box4'
'box2 box5';/*像画表格一样书写box*/ ./*占位符,表示空一格*/
/*垂直间距*/
column-gap:
/*水平间距*/
row-gap
/*综合写法*/
gap
/*水平对齐方式*/
justify-items:start/*左对齐*/ end/*右对齐*/ center/*居中对齐*/ stretch/*拉伸*/
/*垂直对齐方式*/
align-items:start/*上对齐*/ end/*下对齐*/ center/*居中对齐*/ stretch/*拉伸*/
/*网格在网格容器中的水平位置*/
justify-content:start end center stretch/*拉伸*/ space-around/*均匀排列*/ space-between/*两端对齐均分间距*/ spaceeveny/*均分间距*/
/*网格在网格容器中的垂直位置*/
align-content:start end center stretch/*拉伸*/ space-around/*均匀排列*/ space-between/*两端对齐均分间距*/ spaceeveny/*均分间距*/
/*为隐式网格指定大小*/
grid-auto-columns:
grid-auto-rows:
/*自动排列方式*/
grid-auto-flow:column;/*按列排列*/ row
成员属性
/*成员命名*/
grid-area:box1;
grid-area:box2;
grid-area:box3;
grid-area:box4;
grid-area:box5;
/*成员区域绘制*/
grid-row-start:2/*占位开始列*/
grid-row-end:3/*占位结束列*/
grid-column-start:1/*占位开始行*/
grid-column-end:3/*占位结束行*/
/*等价写法*/
grid-row:2 / 3
grid-column:1 / 3/*数字可以用网格线名代替*/
/*单独的对齐方式*/
justify-self:start/*左对齐*/ end/*右对齐*/ center/*居中对齐*/ stretch/*拉伸*/
align-self:start/*上对齐*/ end/*下对齐*/ center/*居中对齐*/ stretch/*拉伸*/
裁剪
clip-path: circle(40%);/*圆形剪裁*/
ellipse(宽度 50px at X定位 50%);/*椭圆剪裁*/
clip-path: polygon(点1X位置 点1Y位置%, 点2X位置 50%, 50% 100%, 0 50%);/*多边形剪裁*/
CSS 全局变量
:root{
--mainColor:#fff;
}
color:var(--mainColor);
计算函数
width: calc(100px - 50px)/*返回50px*/
less定义全局变量
@mainColor:red
background:@mainColor;
less样式穿透
/*样式穿透*/
el-input /deep/ input /*可以穿透组件,修改里面的元素*/
sass样式穿透
/*样式穿透*/
el-input ::v-deep input /*可以穿透组件,修改里面的元素*/