CSS基本使用小记

选择器

一般选择器

/*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 /*可以穿透组件,修改里面的元素*/