CSS笔记

flex: 1;

即为flex-grow:1，经常用作自适应布局。将父容器的display：flex，侧边栏大小固定后，将内容区flex: 1，内容区则会自动放大占满剩余空间。

flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。

• flex-grow：定义项目的的放大比例；

• flex-shrink：定义项目的缩小比例；

• flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值

line-height

设置行高line-height和盒子高度相等时，实现显示一行的效果。

换行溢出内容省略号

overflow: hidden;			//隐藏溢出内容
white-space: nowrap;		//不换行
text-overflow: ellipsis;	//溢出字符省略号代替

图片在盒子内圆角效果失效border-radius

给img标签的父级元素添加圆角时，需要给父级元素设置overfloor: hidden;

.box{
	height: 340rpx;
	border-radius: 30rpx;	//uniapp单位
	overfloor: hidden;		//解决圆角失效问题
	.image{
		width: 100%;
		height: 100%;
	}
}

磨砂玻璃效果

background: rgba(0,0,0,0.2); //添加半透明背景颜色
backdrop-filter: blur(20rpx); //添加失焦磨砂效果

.box {
	height: 340rpx;
	border-radius: 10rpx;
	overflow: hidden;	//溢出部分隐藏，使圆角效果生效
	position: relative;

	.pic {
		width: 100%;
		height: 100%;
	}
			
	.tab{
		position: absolute;
		top: 0;
		left: 0;
		color: #fff;
		border-radius: 0 0 20rpx 0;
		background: rgba(250,129,90,0.7);	//添加背景颜色
		backdrop-filter: blur(20rpx); 		//添加失焦磨砂滤镜效果
		font-size: 22rpx;
		transform: scale(0.8);				//缩放
		transform-origin: left top; 		//左上为基准
		padding: 6rpx 10rpx;
	}
			
	.mask{
		position: absolute;
		width: 100%;
		height: 70rpx;
		bottom: 0;
		left: 0;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0,0,0,0.2);		//添加半透明背景颜色
		backdrop-filter: blur(20rpx);		//添加失焦磨砂效果
	}
}

网格布局

grid-template-columns 属性用于设置网格布局中的列数及宽度。

grid-template-rows 属性用于设置网格布局中的行数及高度。

gap:网格间距

display: grid;
grid-template-columns: repeat(3,1fr);	//3列
gap: 10px;

渐变背景

以下实例演示了从左侧开始的线性渐变，从红色开始，转为黄色:

background-image: linear-gradient(to right, red , yellow); 

以下实例演示了从左上角到右下角的线性渐变:

background-image: linear-gradient(to bottom right, red , yellow);

以下实例演示了线性渐变指定一个角度:

background-image: linear-gradient(180deg, red, yellow); 

以下实例演示了多个终止色:

background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

以下实例使用了透明度:

grad {  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

两个方向进行层叠：实现从从右到左渐变，上到下淡化的效果。

• color 50%指定渐变中的颜色起始点
• color 400px指定渐变中的颜色起始点

background: 
	linear-gradient(to bottom,rgba(0,0,0,0) 0%,#fff 50%),//透明到白色，rgba(0,0,0,0)和transparent一样都是透明色，透明从0开始，白色50%开始
	linear-gradient(to left,red,blue);

background: 
	linear-gradient(to bottom,transparent,#fff 400rpx),	//transparent透明色，白色400rpx时开始
	linear-gradient(to right,#beecd8 20%,#F4E2D8);		//#beecd8从20%开始渐变

定位元素居中方式

1. left:0; right:0;，将拉伸宽度；
2. width: fit-content;，宽度根据内容自适应
3. margin: auto;，居中

position: absolute;
left: 0;
right: 0;
margin: auto;
width: fit-content;	//宽度根据内容自适应

css选择器

scss：&>view：选择所有父级是&的view

选择器	示例	示例说明	CSS
.class	.intro	选择所有class=”intro”的元素	1
#id	#firstname	选择所有id=”firstname”的元素	1
*	*	选择所有元素	2
element	p	选择所有 元素	1
element,element	div,p	选择所有 元素和 元素	1
element*.class*	p.hometown	选择所有 class=”hometown” 的 元素	1
element element	div p	选择 元素内的所有 元素	1
element>element	div>p	选择所有父级是 元素的 元素	2
element+element	div+p	选择所有紧跟在 元素之后的第一个 元素	2
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target=”-blank”的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词”flower”的所有元素	2
[attribute|=language]	[lang|=en]	选择 lang 属性等于 en，或者以 en- 为开头的所有元素	2
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:active	a:active	选择活动链接	1
:hover	a:hover	选择鼠标在链接上面时	1
:focus	input:focus	选择具有焦点的输入元素	2
:first-letter	p:first-letter	选择每一个 元素的第一个字母	1
:first-line	p:first-line	选择每一个 元素的第一行	1
:first-child	p:first-child	指定只有当 元素是其父级的第一个子级的样式。	2
:before	p:before	在每个 元素之前插入内容	2
:after	p:after	在每个 元素之后插入内容	2
:lang(language)	p:lang(it)	选择一个lang属性的起始值=”it”的所有 元素	2
element1~element2	p~ul	选择p元素之后的每一个ul元素	3
[attribute^=value]	a[src^=”https”]	选择每一个src属性的值以”https”开头的元素	3
[attribute$=value]	a[src$=”.pdf”]	选择每一个src属性的值以”.pdf”结尾的元素	3
[attribute*=value]	a[src*=”runoob”]	选择每一个src属性的值包含子字符串”runoob”的元素	3
:first-of-type	p:first-of-type	选择每个p元素是其父级的第一个p元素	3
:last-of-type	p:last-of-type	选择每个p元素是其父级的最后一个p元素	3
:only-of-type	p:only-of-type	选择每个p元素是其父级的唯一p元素	3
:only-child	p:only-child	选择每个p元素是其父级的唯一子元素	3
:nth-child(n)	p:nth-child(2)	选择每个p元素是其父级的第二个子元素	3
:nth-last-child(n)	p:nth-last-child(2)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数	3
:nth-of-type(n)	p:nth-of-type(2)	选择每个p元素是其父级的第二个p元素	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数	3
:last-child	p:last-child	选择每个p元素是其父级的最后一个子级。	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择每个没有任何子级的p元素（包括文本节点）	3
:target	#news:target	选择当前活动的#news元素（包含该锚名称的点击的URL）	3
:enabled	input:enabled	选择每一个已启用的输入元素	3
:disabled	input:disabled	选择每一个禁用的输入元素	3
:checked	input:checked	选择每个选中的输入元素	3
:not(selector)	:not(p)	选择每个并非p元素的元素	3
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3
:out-of-range	:out-of-range	匹配值在指定区间之外的input元素	3
:in-range	:in-range	匹配值在指定区间之内的input元素	3
:read-write	:read-write	用于匹配可读及可写的元素	3
:read-only	:read-only	用于匹配设置 “readonly”（只读） 属性的元素	3
:optional	:optional	用于匹配可选的输入元素	3
:required	:required	用于匹配设置了 “required” 属性的元素	3
:valid	:valid	用于匹配输入值为合法的元素	3
:invalid	:invalid	用于匹配输入值为非法的元素	3
:has	:has	允许根据其后代元素来选择一个元素。	3
:is	:is	接收任何数量的选择器作为参数，并且返回这些选择器匹配的元素的并集。

Donate