目录
一 介绍
CSS（Cascading Style Sheets，层叠样式表）是前端开发中最重要的技术之一，负责网页的布局和样式。无论是简单的网页布局，还是复杂的交互动画，CSS 都发挥着至关重要的作用。
二 深入
css选择器：
-
元素选择器：选择所有指定类型的元素。
p { color: red; } -
类选择器：选择所有具有指定类名的元素。
.button { background-color: blue; } -
ID 选择器：选择具有特定 ID 的单个元素。
#header { font-size: 20px; } -
组合选择器：通过组合多个选择器来指定更精确的目标元素。
.h.a /* 选择 class类有h和a的元素 */ h1,h2 /* 选择 h1 和 h2 */ div > span /* 选择 div下的span子元素 */ div span /* 选择后代元素 */ + 相邻 ~ 兄弟 [属性名] 含有指定属性的元素 [属性名=属性值] 含有指定属性和属性值的元素 [属性名^=属性值] 属性值以指定值开头的元素 [属性名$=属性值] 属性值以指定值结尾的元素 [属性名*=属性值] 属性值含有某值的元素 */ -
伪类选择器：选中特定状态的元素。
:hover 用于指定当鼠标悬停在元素上时应用的样式 :focus 用于指定当元素获得焦点时应用的样式 :active 用于指定当元素被激活时应用的样试 :empty 用于选择没有子元素(包括文本)的元素。 :checked 用于选择被选中的 <input> 元素（如复选框、单选框等） :disabled 和 :enabled 用于选择禁用或启用的元素。 :first-child 第一个子元素 :last-child 最后一个子元素 :nth-child() 选中第n个子元素 下面功能跟上面相似，不同的是，这是在同类型的子元素中去选择 :first-of-type :last-of-type :nth-of-type() :not() 否定伪类 -将符合条件的元素从选择器中去除 -
伪元素选择器：用于选择元素的特定部分。
a::before { content: "▶"; /* 使用 Unicode 字符表示箭头 */ margin-right: 5px; /* 为箭头和链接文本之间添加间距 */ } ::before 用于在元素的内容之前插入内容。通常用于添加装饰性元素， 例如图标、引号等，而无需在 HTML 中添加额外的元素。 ::after 用于在元素的内容之后插入内容。 ::first-letter 用于选中元素的首个字母，并为其应用样式。 ::first-line 用于选中元素的首行文字，并为其应用样式 ::selection 用于选择用户选中的文本，并应用样式。 ::placeholder 用于选中 <input> 或 <textarea> 元素中的 placeholder 文本
盒子模型 ：
-
内容区域（Content）：显示元素内容的区域。
-
内边距（Padding）：围绕内容区域的空白区域。
-
边框（Border）：围绕内边距的边框。
-
外边距（Margin）：元素与其他元素之间的空白区域。
div { width: 200px; height: 100px; padding: 20px; border: 5px solid black; margin: 30px; } 在这段代码中，div 元素的实际占用空间为： 宽度 200px + padding 20px + border 5px + margin 30px， 所以它的总宽度为 200 + 20 + 5 * 2 = 230px， 总高度为 100 + 20 + 5 * 2 = 130px。
字体样式：
-
长度单位
1:像素 px - 像素是我们在网页中使用的最多的一个单位， 一个像素就相当于我们屏幕中的一个小点， 我们的屏幕实际上就是由这些像素点构成的 但是这些像素点，是不能直接看见。 - 不同显示器一个像素的大小也不相同， 显示效果越好越清晰，像素就越小，反之像素越大。 2:百分比 % - 也可以将单位设置为一个百分比的形式， 这样浏览器将会根据其父元素的样式来计算该值 - 使用百分比的好处是，当父元素的属性值发生变化时， 子元素也会按照比例发生改变 - 在我们创建一个自适应的页面时，经常使用百分比作为单位 em - em和百分比类似，它是相对于当前元素的字体大小来计算的 - 1em = 1font-size 浏览器默认字体大小是16px - 使用em时，当字体大小发生改变时，em也会随之改变 - 当设置字体相关的样式时，经常会使用em rem -rem是相对于根元素(html)的字体大小来计算的 * */ -
颜色单位
颜色单位： 1:在CSS可以直接使用颜色的单词来表示不同的颜色 红色：red 蓝色：blue 绿色：green 黄色：yellow 注意： 这种用的比较少 不好描述，难记 2:使用RGB值来表示不同的颜色 - 所谓的RGB值指的是通过Red Green Blue三元色， 通过这三种颜色的不同的浓度，来表示出不同的颜色 - 例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度); - 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有 - 浓度也可以采用一个百分数来设置， 需要一个0% - 100%之间的数字 使用百分数最终也会转换为0-255之间的数 0%表示0 100%表示255 -语法：RGB(红色，绿色，蓝色) -注意：比较常用，计算机可以很好的识别 3:RGBA -语法：RGBA(红色，绿色，蓝色，透明度) a:透明度（0-1） 1不透明，0透明 4:使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样， 十六进制： 0 1 2 3 4 5 6 7 8 9 a b c d e f 00 - ff 00表示没有，相当于rgb中的0 ff表示最大，相当于rgb中255 只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色 每组表示一个颜色 第一组表示红色的浓度，范围00-ff 第二组表示绿色的浓度，范围是00-ff 第三组表示蓝色的浓度，范围00-ff 语法：#红色绿色蓝色; 红色： #ff0000 像这种两位两位重复的颜色，可以简写 比如：#ff0000 可以写成 #f00 #abc #aabbcc 常用的十六进制颜色：#f00 红色 #f60 橘色 #ccc 灰色 #0f0 绿色 #000黑色 #fff 白色 5:HSL值 HSLA值 H 色相 （0-360）hue [hju:] S 饱和度 saturation [,sætʃə'reiʃən] 颜色浓度0%-100% L 亮度 lightness [ˈlaɪtnəs] 颜色亮度0%-100% A 透明度 alpha ['ælfə] -
字体样式
.p1 { /*1:color 设置字体颜色,也可以设置其他颜色*/ color: red; /* 2:font-size 注意： (1)、设置的并不是文字本身的大小，在页面中，每个文字都是处 在一个看不见的框中 的 我们设置的font-size实际上是设置格的高度，并不是字体的大小,一般情况 下文字都要比这个格要小一些，也有时会比格大,根据字体的不同，显示效果也不能 (2)、设置文字的大小,浏览器中一般默认的文字大小都是16px,默认的最小的字体是12px (3)、常用的单位 px，rem，em * */ font-size: 12px; /* 3:font-family可以指定文字的字体 /* font-family: 华文彩云 , arial , 微软雅黑; */ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; }
.p1{
color: red;
font-size: 30px;
font-family: "微软雅黑";
/*
* 1:font-style可以用来设置文字的斜体
* - 可选值：
* normal，默认值，文字正常显示
* italic [i'tælik] 文字会以斜体显示
* oblique [ə'bli:k]文字会以倾斜的效果显示
* - 大部分浏览器都不会对倾斜和斜体做区分，
* 也就是说我们设置italic和oblique它们的效果往往是一样的
* - 一般我们只会使用italic
*/
font-style: italic;
/*
* 2:font-weight可以用来设置文本的加粗效果：
* 可选值：
* normal，默认值，文字正常显示
* bold，文字加粗显示
*
* 该样式也可以指定100-900之间的9个值，
* 但是由于用户的计算机往往没有这么多级别的字体，所以达到我们想要的效果
* 也就是200有可能比100粗，300有可能比200粗，但是也可能是一样的
*/
font-weight: bold;
/*
* 3:font-variant ['vεəriənt] 可以用来设置小型大写字母
* 可选值：
* normal，默认值，文字正常显示
* small-caps 文本以小型大写字母显示
*
* 小型大写字母：
* 将所有的字母都以大写形式显示，但是小写字母的大写，
* 要比大写字母的大小小一些。
*/
font-variant: small-caps ;
}
.p2{
color: red;
/*设置一个文字大小*/
font-size: 50px;
/*设置一个字体*/
font-family: 华文彩云;
/*设置文字斜体*/
font-style: italic;
/*设置文字的加粗*/
font-weight: bold;
/*设置一个小型大写字母*/
font-variant: small-caps;
}
.p3{
/*
* 在CSS中还为我们提供了一个样式叫font，
* 使用该样式可以同时设置字体相关的所有样式,
* 可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开
*
* 使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，
* 如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式
* 大小必须是倒数第二个样式
*
* 实际上使用简写属性也会有一个比较好的性能
*/
/* font: small-caps bold italic 60px "微软雅黑"; */
font: 60px "微软雅黑";
}
-
字体分类
p { font-family:Verdana, Geneva, Tahoma, sans-serif } /* 可以将服务器中的字体直接提供给用户去使用 属性： 给字体起的名字 */ @font-face { /* 给字体起的名字 */ font-family: 'xiyangyagn'; /* 字体路径 */ src: url("./字体/ZCOOLKuaiLe-Regular.ttf"); } span { font-family:'xiyangyagn'; font-size: 40px; }
<!--
在网页中将字体分成5大类：
serif ['serif]（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive ['kə:siv]（草书字体）
fantasy ['fæntəsi]（虚幻字体）
可以将字体设置为这些大的分类,当设置为大的分类以后，
浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底
-->
<p style="font-size: 20px; font-family: serif">衬线字体：
我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 20px; font-family: sans-serif">非衬线字体：
我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 20px; font-family: monospace">等宽字体：
我是一段文字，IHABCDEFGabcdefg</p>
<p style="font-size: 20px; font-family: cursive">草书字体：
我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 20px; font-family: fantasy">虚幻字体：
我是一段文字，ABCDEFGabcdefg</p>-
行间距
/* 行高（line height）- -文字占有的实际高度 * 使用line-height来设置行高 * 行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高， 控制文字行与行之间的距离 * 网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示 —— 可接收的值： 1.直接就写一个大小，eg：22px 2.可以指定一个百分数，则会相对于字体去计算行高，eg：30% 3.可以直接传一个数值，则行高会设置字体大小相应的倍数，eg：2 —— 行高经常还用来设置文字的行间距 行高=上间距+文字高度+下间剧 行间距 = 行高 - 字体大小 */ /* 字体框 字体框是字体纯在的格子，设置font-size实际上就是在设置字体框的高度 总结： 行高会在字体框的上下平均分配 */ .p1 { font-size: 20px; height: 100px; /* line-height: 100px; */ border: 1px solid red; /* line-height: 200%; */ line-height: 2; /* 默认行高 */ /* line-height: 1.333; */ } .box { width: 200px; height: 100px; background-color: #bfa; /* * 对于单行文本来说，可以将行高设置为和父元素的高度一致， * 这样可以是单行文本在父元素中垂直居中 */ line-height: 100px; } .p2 { /* * 在font中也可以指定行高 * 在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值 */ font: 30px/50px "微软雅黑"; border: 1px solid red; /* line-height: 50px; */ } -
文本样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> .p1 { /* 1: text-transform 可以用来设置文本的大小写 transform [træns'fɔ:m] 是变形的意思，使变化的意思 可选值： none 默认值，该怎么显示就怎么显示，不做任何处理 capitalize [ˈkæpɪtəlaɪz] 单词的首字母大写，通过空格来识别单词 uppercase [ˈʌpəˌkeɪs] 所有的字母都大写 lowercase ['ləuə,keis] 所有的字母都小写 */ text-transform: uppercase; } .p2 { /* 2: text-decoration [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰 可选值： none：默认值，不添加任何修饰，正常显示 underline 为文本添加下划线 overline 为文本添加上划线 line-through 为文本添加删除线 */ text-decoration: none; } a { /*超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline 如果需要去除超链接的下划线则需要将该样式设置为none */ text-decoration: none; } .p3 { /* 3: letter-spacing可以指定字符间距 */ /* letter-spacing: 30px; */ /* 4: word-spacing可以设置单词之间的距离 实际上就是设置词与词之间空格的大小 */ word-spacing: 120px; } .p4 { /* 5: text-align用于设置文本的对齐方式 可选值： left 默认值，文本靠左对齐 right ， 文本靠右对齐 center ， 文本居中对齐 justify ， 两端对齐 - 通过调整文本之间的空格的大小，来达到一个两端对齐的目的 也可以让图片水平居中 */ text-align:center; /* text-transform: uppercase; */ } .p5 { font-size: 20px; /* *6: text-indent 设置首行缩进 -指定一个正值时，会自动向右侧缩进指定的像素 -指定一个负值，则会向左移动指定的像素, 通过这种方式可以将一些不想显示的文字隐藏起来 这个值一般都会使用em作为单位 */ text-indent: 2em; } .box2 { /*7: white-space: ; 设置网页如何处理空白 可选值： normal 正常 nowrap 不换行 per 保留空白 */ /*8: text-overflow 文本溢出包含元素时发生的事情。 可选值： clip 修剪文本。 ellipsis [i'lipsis] 显示省略符号来代表被修剪的文本。 */ width: 300px; white-space: nowrap; /* 裁剪多余 */ overflow: hidden; /* 多余部分设置省略号 */ text-overflow: ellipsis; } span { font-size: 30px; } .img1 { width: 400px; vertical-align:bottom; /*9:vertical-align 设置元素垂直对齐的方式 可选值： baseline 默认值 基线对齐 top 顶部对齐 bottom 底部对齐 middle 居中对齐 应用：1:图文垂直对齐方式 2:图片三像素的问题 父元素如果不设置高，由图片撑开，此时图片的底部就会有三像素的空白 解决方式一：vertical-align属性值不为默认值 解决方式二：给图片转成块元素 解决方式三：给父元素设置font-size为0 解决方式四：使元素脱离文档流，如浮动，绝对定位，弹性盒子等 注意 vertical-align 只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素。 */ } .img2{ vertical-align: middle; } .box{ border: 1px solid red; width: 300px; /* font-size: 0; */ } .box>img{ /* vertical-align:baseline; */ display: block; } h1 { text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /*10: text-shadow: h-shadow v-shadow blur color; 参数1:必需。水平阴影的位置。允许负值。 参数2: 必需。垂直阴影的位置。允许负值。 参数3: 可选。模糊的距离。 参数4:可选。阴影的颜色 一般用rgba */ } </style> </head> <body> <img src="./img1.jpeg" alt="" class="img1" /> <span>下雨回家收衣服了，hxjjsd</span> <hr /> <div class="box"> <img src="./img1.jpeg" alt="" style="width: 300px;"/> <img src="./img1.jpeg" alt="" style="width: 300px;"/> </div> <p class="p5"> 六也掉年反法耐的以耐要韩沫，人两也的心为次弟为心上司洪善有想，币无将持说在屯了如一老洪已人，不俭是失家是单，一衣在马挟会负，陈骨派逃向高关动要太导韩气我入，回今台国降变呼蒲使他生，奔未韩法的春其如不少因，骨是气评不杀话拆氏郭他司到，当劫会惊藏，联沫褒娟才。 </p> <h1 class="p4">我是一个h1</h1> <p class="p4"> 好又反之韩勇未你生介九杂，希禀揽韩有到找，韩样人唯因这落尘匹说人绪平仍德仆，揽那俭生搏杨身才人让视生五留心哉在报人，他皇吴我之德害使方来同仆秦落持家词，圣力乐化是助沫此中来一实流太以太，哉于马孔为那使他妄也耐帮通书，是兄之永谢派的，胜光君第，答她老，李持。 </p> <p class="p4"> e had been four years on the Wall. The first time he had been sent beyond, all the old stories had come rushing back, and his bowels had turned to water. He had laughed about it afterward. He was a veteran of a hundred rangings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him. </p> <p class="p3"> 普德弟上而，而宋子孔足来魂要笔游我入帅或感清商绛李，了一拢自慧考人的秦血考派用是承，满由釜找夭乐风惜等了之不王，畴艳者司皇尝台入国是重说人，妙场关了活百绝是，才是之无斯笔土的杨千娟姑在亡高不不，了为人道在皮以到降为是公下一魂反不，化则月，谭德兴褒皇有彷慨。 </p> <p class="p3">ings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him.</p> <a href="#">我是超链接</a> <p class="p2">gings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him.</p> <p class="p1">ve we?” “Will saw them,” Gared said. “If he says they are dead, that’s proof enough for me.</p> <div class="box2"> 法今厅法，中五的制以，杨道作说才气欲知为死支是保，斯过何，尝位他畴清反流当定予人夫秦么至程了，天韩说名可太若欲，没己别哥天病九着罪得是对圣况诗善洪策开，主责是天守活罪他水，九和沉，一不其皇样卅给气脱乡，价了是家下在得说特航大得搏，可给锐得，挟一词不百怎之。 </div> </body> </html> -
多行文本省略号
p { width: 300px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* 适用范围： 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端； 注： -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的 排列方式 。 */
背景样式
-
基础
1: background-color 设置背景颜色 2:background-image来设置背景图片 - 语法：background-image:url(相对路径); -可以同时为一个元素指定背景颜色和背景图片， 这样背景颜色将会作为背景图片的底色 3:background-repeat用于设置背景图片的重复方式 可选值： repeat，默认值，背景图片会双方向重复（平铺） no-repeat ，背景图片不会重复，有多大就显示多大 repeat-x， 背景图片沿水平方向重复 repeat-y，背景图片沿垂直方向重复 4:background-position可以调整背景图片在元素中的位置 背景图片默认是贴着元素的左上角显示 可选值： 该属性可以使用 top right left bottom center中的两个值 来指定一个背景图片的位置 top left 左上 bottom right 右下 如果只给出一个值，则第二个值默认是center 也可以直接指定两个偏移量，(x,y) -
雪碧图
图片整合技术（CSS-Sprite） 优点： 1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片， 提高访问效率，提高了用户体验。 2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验雪碧图使用步骤 1:先确定要使用的图标 2:测量图标的大小 3:根据测量结果创建一个元素 4:将雪碧图设置为元素的背景 5：设置一个偏移量以显示正确的图片 -
渐变
渐变：通过渐变可以设置一些复杂的背景颜色，可以从实现一个颜色向其他颜色过渡的效果
渐变是图片，通过 background-image设置
可选值
1：linear-gradient(方位,颜色1,颜色2) ['ɡreidiənt]
线性渐变，颜色沿着一条直线发生变化
参数1:表示方位，（可选值，不写默认是to bottom）
(1)to left，to right, to bottom, to top
(2)xxxdeg 表示角度，度数，会更灵活
(3)turn 表示圈 .5turn
参数2:颜色1
参数3:颜色2
注意：
可以写多个颜色，默认情况下，颜色是均分占比的
也可以手动的指定渐变的分布情况
background-image:linear-gradient(red 50px,yellow) ;
颜色后直接跟占比
2:repeating-linear-gradient()
可以平铺的线性渐变
background-image: repeating-linear-gradient(yellow 0px, red 50px);
参数跟linear-gradient是一样的
参数2-参数1，中间部分是渐变的颜色，拿总高度/差值，就是颜色重复出现的次数
3:radial-gradient() ['reidiəl] ['ɡreidiənt]
经向渐变（放射性的效果）
默认情况下，圆心是根据元素的形状来计算的
正方形-->圆形
长方形-->椭圆型
参数1:圆心的形状
（1）circle圆形，ellipse椭圆，
（2）设置的大小 at 位置==>像素1 像素2 at 0px 0px
background-image: radial-gradient(100px 100px at 100px 0px,red,yellow);
参数2:颜色1
参数3:颜色2
······
弹性盒子
-
容器属性
flex(弹性盒子，伸缩盒) -是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局 -flex可以使元素具有弹性，让元素可以根据页面的大小的改变而改变 -弹性容器 -要使用弹性盒，必须先将一个元素设置为弹性容器 -通过display来设置弹性容器 display:flex 设置块级弹性容器 display:inline-flex 设置为行内的弹性容器 -弹性元素 -弹性容器的直接子元素是弹性元素（弹性项） 注意：一个元素可以同时是弹性容器和弹性元素flex-direction 设置元素排列方向 row row-reverse column column-reverse flex-wrap: 设置弹性元素是否在弹性容器中是否自动换行 nowrap wrap wrap-reverse flex-wrap和direction的简写属性，且没有顺序要求 justify-content 如何分配主轴上的空白空间（主轴上的元素如何排列） align-items 在辅轴上如何对齐-元素间的关系 -
元素样式
flex-grow: ;指定弹性元素的伸展的系数 -当父元素有多余的空间的时候，子元素如何伸展，0 默认值 是不伸展 -父元素的剩余空间，会按照比例进行分配 flex-shrink: ; 指定弹性元素的收缩系数 -当父元素中的空间不足以容纳所有的子元素时，如果对子元素进行收缩， 默认值，按照同比例1:1的比例一起缩放，也可分别设置 flex-basis 元素的基础长度，指定的是元素在主轴上的基础长度，跟你设置的宽高会冲突 如果主轴是横向的，则该值指定的就是元素的宽度 如果主轴是纵向的，则该值指定的是元素的高度 -默认值是auto，表示参考元素自身的高度或宽度 -如果传递了一个具体的数值，则以该值为准 flex：可以设置弹性元素所有的三个样式 flex: 增长 缩减 基础 initial 'flex: 0 1 auto' 弹性元素不增，可减 auto 'flex: 1 1 auto'弹性元素可增，可减 none 'flex: 0 0 auto'弹性元素没有弹性
定位
-
概述
定位： 更加高级的布局手段 - 定位指的就是将指定的元素摆放到页面的任意位置 通过定位可以任意的摆放元素 - 通过position属性来设置元素的定位 -可选值： static： ['stætik] 默认值，元素没有开启定位 relative： ['relətiv] 开启元素的相对定位 absolute： ['æbsəlju:t] 开启元素的绝对定位 fixed：开启元素的固定定位（也是绝对定位的一种） sticky： ['stiki] 开启元素的粘滞定位 偏移量 当开启了元素的定位（position属性值是一个非static的值）时， 可以通过left right top bottom四个属性来设置元素的偏移量，越大越向反方向移动 left：元素相对于其定位位置的左侧偏移量， right：元素相对于其定位位置的右侧偏移量 top：元素相对于其定位位置的上边的偏移量 bottom：元素相对于其定位位置下边的偏移量 -
相对定位
相对定位： 当元素的position属性设置为relative时，则开启了元素的相对定位 ==》自恋型 1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化 2.相对定位是相对于元素在文档流中原来的位置进行定位（top:0;left:0;） 3.相对定位的元素不会脱离文档流 4.相对定位会使元素提升一个层级 5.相对定位不会改变元素的性质，块还是块，内联还是内联 -
绝对定位
当position属性值设置为absolute时，则开启了元素的绝对定位 绝对定位： 1.开启绝对定位，会使元素脱离文档流 2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化 3.绝对定位是相对于离他最近的包含块定位的 （一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'） 4.绝对定位会使元素提升一个层级 5.绝对定位会改变元素的性质，开启BFC属性 内联元素变成行内块元素， 块元素的宽度和高度默认都被内容撑开 包含块：containing block -正常情况下： 离当前元素最近的祖先块元素 -定位情况下： 离他最近的开启了定位的祖先元素 如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位 html （根元素，初始包含块） -
固定定位
当元素的position属性设置fixed时，则开启了元素的固定定位 （1）用于固定在浏览器页面上，不随浏览器的滚动而改变位置； （2）以浏览器为参照物，和父元素没有任何关系； （3）固定定位不占有原来的位置，即脱离标准流 (4)应用场景 - 固定导航 - 固定侧边栏 - 广告 -
粘性定位
粘滞定位 （一般用于页面导航的吸顶效果) -当元素的position属性设置为sticky时，则开启了元素的粘滞定位 （1）以浏览器为参照物（体现固定定位特点）； （2）占有原来位置（体现相对定位特点）； （3）粘滞定位可以在元素到达某个位置时，将其固定 (4)没有达到top值之前正常显示，达到top值之后类似于固定定位， 不会跟随滚动条滚动而滚动
动画
-
过渡
过渡（transition）[træn'siʒən]
-通过过渡可以指定一个属性发生变化时的切换方式
-通过过渡可以创建一些非常好的效果，提升用户体验
属性（4个）
(1)transition-property ['prɔpəti] 指定执行过渡的属性，多个属性，使用逗号隔开，
如果所有的属性都要过渡，就使用all关键词，大部分属性都支持过渡效果
注意过渡时，必须是从一个有效数值向另一个有效数值进行过渡
只要值可以计算的，就可以过渡
(2)transition-duration [djuə'reiʃən] 指定过渡效果的持续时间
时间的单位：s和ms 1s=1000ms
(3)transition-timing-function: ;过渡的时序函数
指定过渡的执行的方式
可选值：ease [i:z] 默认值，慢速开始，先加速，然后再减速
linear 匀速运动
ease-in 慢速开始，加速运动
ease-out 快速开始，减速运动
ease-in-out 先加速，后减速
steps()分布执行过渡效果
可以设置一个第二个值
end，在时间结束时执行过渡（默认值）
start，在时间开始时执行过渡
(4)transition-delay: ;过渡效果的延迟，等待一段时间后执行过渡
transition：；可以同时设置过渡相关的所有属性，
只有一个要求，如果要写延迟，则两个时间中,第一个写延迟，第二个写持续时间
*/
-
动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box1 {
width: 600px;
height: 600px;
background-color: silver;
}
.box1 div {
width: 100px;
height: 100px;
margin-bottom: 50px;
margin-left: 0;
}
/*
动画和过渡类似，都是可以实现一些动态效果，不同的是过渡需要在某个
属性发生变化时才能触发，动画可以自动触发动画
设置动画效果，必须先要设置一个关键帧，关键帧设置了动画每一个步骤
@keyframes 动画名 {}
*/
/* 第一步：设置关键帧 */
@keyframes text {
/* from表示动画开始位置 也可以使用0%*/
from {
margin-left: 0;
}
/* to动画的结束位置 也可以使用100%*/
to {
margin-left: 500px;
}
}
/*第二步 设置box2的动画 animation [ˌænɪˈmeɪʃ(ə)n] */
.box2 {
background-color: #bfa;
/*1:animation-name
设置动画的名字，和@keyframs相对应 */
animation-name: text;
/*2:animation-duration
动画执行时间 duration [djuə'reiʃən] */
animation-duration: 1s;
/*3:animation-delay
动画执行延时 */
animation-delay: 1s;
/*4:animation-timing-function
动画执行的方式 */
animation-timing-function: ease-in-out;
/* 5:animation-iteration-count [,itə'reiʃən]
动画执行的次数
可选值：次数（数字）
infinite ['infinət] 无限循环 */
animation-iteration-count: 2;
/* 6:animation-direction
指定动画运行的方向
可选值
normal 默认值： 从from向to运行，每次都是这样
reverse 从to到from运行，每次都是这样
alternate 从from向to运行，重复执行动画时反向执行
alternate-reverse 从to向from运行，重复执行动画时反向执行*/
animation-direction: alternate-reverse;
/* 7:animation-play-state
设置动画的执行状态
可选值：running 默认值 动画执行
paused 动画暂停 */
animation-play-state: running;
/* 8:animation-fill-mode
动画的填充模式
可选值：
none默认值 动画执行完毕 元素回到原来的位置
forwards 动画执行完毕，会停止在动画结束的位置
ackwards 动画延时等待时，元素就会处于开始位置
both 结合了forwards和ackwards的特点*/
animation-fill-mode: forwards;
/* 简写模式 */
/* animation: text 2s 2 2s alternate-reverse; */
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
-
变形
变形是通过css来改变元素的形状或位置 -变形不会影响到页面的布局(只折腾自己) -transform: ;用来设置元素的变形效果 ,尽量变形写在一个transform里， 不然下面再写一个，就会覆盖上面 /* 可选值： -平移： translateX()沿着x轴方向平移 translateY()沿着y轴方向平移 translateZ()沿着z轴方向平移 -平移元素，可以是数字，可以是百分比，百分比是相对于自身计算的 perspective [pə'spektiv] 设置当前网页的视距，人眼距离网页的距 离，一般不小于600px(谷歌要直接设置在transform里面 ) z轴平移，调整元素在z轴的位置，正常情况下调整元素和人眼之间的距离 距离越大，元素离人越近 z轴平移属于立体效果（近大远小），默认情况下网页不支持透视 如果需要看到效果，必须要设置网页的视距 通过旋转可以使元素沿着x y或者z旋转指定的角度 rotateX() 沿着x轴旋转 rotateY() 沿着y轴旋转 rotateZ() 沿着z轴旋转 deg 度 turn 圈 对元素进行缩放的函数 scale（）双方向缩放 scaleX() x轴方向缩放 scaleY() y方向缩放*/ */ backface-visibility: ;设置是否显示元素的背面 可选值：visible 默认值，显示 hidden 不显示
响应式
-
像素
<!-- 像素 -屏幕是由一个个发光的小点构成的，这一个个的小点就是像素 -分辨率 说的就是屏幕中小点的数量 -在前端开发中像素要分成两种情况讨论，css像素和物理像素 -物理像素，上述所说的小点点就是属于物理像素 -css像素，编写网页时，我们所用的像素都是css像素 -浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现 -一个css像素最终由几个物理像素显示，由浏览器决定 默认情况下，在pc端，一个css像素=一个物理像素 视口 （viewport） -视口就是屏幕中用来显示网页的区域 -不同的设备完美视口大小是不一样的，可以通过查看视口的大小，来观看css像素和物理像素的比值 -默认情况下： 视口的宽度与屏幕的大小即物理像素相同，所以物理像素跟css像素1:1比例 -放大两倍的情况 css像素跟物理像素的比是1:2 .... 我们可以通过改变视口的大小，来改变css像素跟视口的比值 --> -
移动端
移动端默认的视口大小是980px（css像素） 默认情况下，移动端的像素比就是980/移动端的宽度 如果我们直接在网页中编写移动端代码，这样在980的视口下 像素比是非常不好的，导致网页的内容非常小 编写移动端页面时，必须要确保一个比较合理的像素比 1css像素，对应2个物理像素 1css像素，对应3个物理像素 可以通过meta标签来设置视口的大小 每一款移动设备设计时，都有会有一个最佳的像素比 一般我们只要值需要将像素比设置为该值，即可得到一个最佳的效果 将像素比设置为最佳像素比的视口大小，我们称其为完美视口 <meta name="viewport" content="width=device-width, initial-scale=1.0"> -
响应式布局
响应式： 在不同的设备上都能给用户再好的体验 响应式开发： 随着移动互联网的兴起，不同设备的分辨率相差比较大，如果在不同设备上显示同一个页面，则用户体验差。 响应式页面设计是一种方法，使得一个网站能够兼容多个终端，而不用为每个终端制作特定的版本。 它使一个网站在任何类型的屏幕上，都能被轻松浏览使用，采用响应式设计，在不同设备中，网站会重新排列 展现出不同的设计风格，以完美的适配任何尺寸的屏幕 响应式设计原则 渐近增强 基本需求==>更好体验 优雅降级 完备功能==>向下兼容 移动优先的响应式布局采用的是渐进增强原则 响应式布局三个要素 1:viewport视口设置 2:@meida媒体查询 3:不要写死尺寸 多用百分比宽度来确定布局尺寸 多用rem、em来确定布局尺寸 多用vh、vw来确定布局尺寸 使用媒体查询 语法：@media 查询规则 媒体类型（可以同时用多个媒体类型，用逗号隔开,这样他们之间就是或的关系） all 所有设备 print 打印设备 screen 带屏幕的设备（电脑，手机） speech 屏幕阅读器 媒体特性 max-width 视口的最大宽度（视口小于指定宽度时就生效） min-width 视口的最小宽度（视口大于指定宽度时就生效） max-height 最大高度 min-width 最小高度 orientation:landscape 横屏 orientation:portrait 竖屏 可以多写，中间用and或者，来连接 and 和 , 或<!-- 样式切换的分界点，我们称其为断点，也就是网页的样式 会在这个点发生变化 一般常用的断点 小于768 超小屏幕 max-width=768px 大于768 小屏幕 min-width=768px 大于992 中型屏幕 min-width=992px 大于1200 大屏幕 min-width=1200px -->
变量
CSS 变量的定义以 -- 前缀开始，通常定义在 :root 选择器下，这样变量就可以全局访问。
:root {
--primary-color: #3498db;
--font-size: 16px;
}
使用变量时，可以通过 var() 函数来引用它们。
body {
color: var(--primary-color);
font-size: var(--font-size);
}
var() 函数可以接受第二个参数作为默认值，当指定的变量未定义时，使用这个默认值
document.documentElement.style.setProperty('--primary-color', '#e74c3c');优化与最佳实践
预编译
作者写不动了，点赞过30更
原子化
作者写不动了，点赞过50更
三 相关面试题
如何计算 CSS 的优先级？
CSS 样式的优先级是通过一个特定的计算规则来确定的，其计算方法如下
1、优先级等级：
从高到低，依次为：
! important
内联样式（直接在 HTML 元素上的 style 属性）。
ID 选择器（如 #id）。
类选择器、属性选择器和伪类选择器（如 .class、[attr=value]、:hover）。
元素选择器和伪元素选择器（如 div、::before）。
通配符选择器（如 *）、后代选择器（如 div p）、子选择器（如 div > p）
等组合选择器。
2、 优先级计算：
按照以下方式计算选择器的权重：
每个内联样式加 1000 分。
每个 ID 选择器加 100 分。
每个类选择器、属性选择器和伪类选择器加 10 分。
每个元素选择器和伪元素选择器加 1 分。
3、比较优先级：
根据上述计算结果进行比较，分数高的优先级高。若优先级相同，则后定义的样式优先。
<div id='div' class='div'>测试 CSS 优先级</div>
// 优先级为 `100`
#div {
width: 100px;
height: 100px;
color: red;
}
// 优先级为 `10`
.div {
border: 1px solid #333;
color: green;
}
// 优先级为 `1`
div {
font-size: 16px;
color: #333;
}
CSS 中可继承与不可继承属性有哪些？
CSS 中的属性分为可继承和不可继承两类。
可继承属性会从父元素传递给子元素，而不可继承属性则只应用于定义它们的元素。
一般来说，可继承属性主要涉及文本和字体相关的属性，以及一些布局相关属性。
1、可继承属性：
color font-family font-size font-style font-variant font-weight
letter-spacing line-height text-align text-indent text-transform
visibility white-space word-spacing
2、不可继承属性：
background border display height margin padding width position
top, right, bottom, left z-index float clear
利用 CSS 隐藏元素的方法有哪些？
/* display: none; - 元素不显示，并且不占据任何空间。 */
.display-none {
display: none;
}
/* visibility: hidden; - 元素不可见，但仍占据空间。 */
.visibility-hidden {
visibility: hidden;
}
/* opacity: 0; - 元素完全透明，但仍占据空间并且可以交互。 */
.opacity-zero {
opacity: 0;
}
/* position: absolute; left: -9999px; - 将元素移出可视区域。 */
.position-absolute {
position: absolute;
left: -9999px;
}
/* height: 0; overflow: hidden; - 将元素高度设为0，并隐藏其内容。 */
.height-zero {
height: 0;
overflow: hidden;
}
/* clip: rect(0, 0, 0, 0); - 将元素裁剪为不可见的区域。 */
.clip-rect {
position: absolute;
clip: rect(0, 0, 0, 0);
}
/* transform: scale(0); - 将元素缩放到不可见。 */
.transform-scale {
transform: scale(0);
}
扩展知识
display: none; 和 visibility: hidden; 是最常用的隐藏元素的方法，
分别适用于完全移除和保留布局空间的场景，适用于大多数情况。
opacity: 0; 适用于需要隐藏但仍希望元素保持交互的情况。
height: 0; 和 overflow: hidden; 适用于需要在动画中隐藏和显示元素的情况。
负的 z-index 和 clip-path 适用于需要特殊裁剪和层级控制的情况。
移出视口 适用于临时将元素从可视区域移除的情况。
transform: scale(0); 适用于通过变换效果隐藏元素的情况。
性能影响：display: none; 和 visibility: hidden; 通常对初始渲染性能友好，
但动态操作时可能有性能影响。其他方法由于元素仍然参与渲染和布局，
对性能有一定影响。说说你对盒模型的理解
1.标准盒模型和IE盒模型：
标准盒模型（W3C Model）：内容宽度只包含 content 部分，padding、border 和
margin 会额外增加到总宽度和高度。
IE盒模型（怪异盒模型）：内容宽度包含 content + padding + border，也就是
说设置的宽度就包括了 padding 和 border。
.box {
box-sizing: content-box; /* 标准盒模型 */
}
.box {
box-sizing: border-box; /* IE盒模型 */
}
2、应用场景：
标准盒模型在做精确的尺寸和间距控制时更方便，适用于大多数场景。
IE盒模型在处理多层嵌套的布局时，更容易调整和理解整体宽度和高度。
CSS3 中有哪些新特性？
1、盒子模型（Box Model）
在 CSS3 中，box-sizing 属性可以设置为 content-box 或 border-box。前者是默认值，
后者则包括内边距和边框，使得盒子的尺寸计算更直观。
2、背景与边框（Backgrounds and Borders）：
多重背景允许你为一个元素设置多个背景图片，并使用不同的位置和大小。
border-image 属性可以使用图片作为边框，这使得设计更加灵活和生动。
3、文本效果（Text Effects）：
text-shadow 可以为文本添加阴影效果，增加视觉层次感。
word-wrap: break-word 可以在必要时断行，避免长单词溢出容器。
4、变形和过渡（Transforms and Transitions）：
transform 属性可以对元素进行平移（translate）、旋转（rotate）、缩放（scale）等变形操作。
transition 属性可以为元素的属性变化设置动画效果，参数包括属性名、持续时间、过渡效果等。
5、动画（Animations）：
使用 @keyframes 规则定义动画的各个关键帧，然后通过 animation 属性引用这些动画。
6、多列布局（Multi-column Layout）：
通过 column-count 和 column-gap 等属性，可以简单地将文本内容分为多列。
7、Flexbox 和 Grid 布局：
Flexbox 布局是一维的，专注于行或列的布局，常用于简单的导航菜单和弹性盒子布局。
Grid 布局是二维的，可以同时控制行和列，更适合复杂的布局。
8、媒体查询（Media Queries）：
媒体查询让开发者可以针对不同设备和屏幕尺寸编写不同的样式，从而实现响应式布局。
9、自定义属性（CSS 变量）：
使用 --variable-name 的格式定义变量，然后通过 var(--variable-name) 引用这些变量。
适用于重复使用的值，如颜色、字体大小等。
10、伪类和伪元素：
:nth-child() 允许更复杂的元素选择规则，适用于样式交替或循环的情况。
::before 和 ::after 可以在元素内部添加内容，常用于装饰性效果。CSS 优化和提高性能的方法有哪些？
CSS 优化和提高性能的方法主要有以下几种：
1、合并和最小化 CSS 文件：
合并 CSS 文件可以减少 HTTP 请求数，因为每个请求都会带来额外的网络开销。
最小化 CSS 文件可以减少文件大小，通过删除空格、注释等无用字符，使得传输
速率更快。常用的工具有 CSSNano、UglifyCSS 等。
2、使用 CSS 预处理器：
预处理器能够帮助我们编写更具逻辑性和可维护性的代码，比如利用变量存储重复
的值，使用嵌套减少选择器层级等。此外，预处理器还支持混入和函数。
3、减少使用高级选择器：
比如后代选择器（div p）和通配符选择器（*）会让浏览器遍历更多的 DOM 节点，
从而增加渲染时间。使用更具体的类选择器（.class）可以迅速定位到目标元素。
4、避免冗余样式：
通过工具（如 PurifyCSS、UnCSS）可以自动检测和删除未使用的 CSS 规则。
保持 CSS 文件干净整洁，对维护也非常友好。
5、合理使用 CSS Sprite：
将多个图标合并成一张大图，并通过背景定位显示特定部分，可以显著减少 HTTP
请求数，提高加载速度。工具 SpriteSmith 可以帮助生成 Sprite 图。
6、CSS 动画的调优：
对比普通的属性，transform 和 opacity 不会触发布局和绘制，只会触发合成，
这使得它们在渲染过程中更高效。例如，可以用 transform: translateX(100px)
代替 left: 100px。
7、CSS 放置位置：
如果将 CSS 文件放在 body 底部，在样式加载完成之前页面内容可能没有样式，
会影响用户体验。所以一般情况下会将 CSS 文件放在 head 中，以保证样式尽
快加载和解析。
8、使用内联样式进行关键渲染路径优化：
对于初次加载页面的关键样式，可以直接写在 HTML 中，这样浏览器就不必等待外
部 CSS 文件加载完成，能够更快呈现出内容。例如，可以在 head 中通过 <
style> 标签添加。怎么实现元素的水平垂直居中？
flex
absolute
line-height + text-align: center;为什么需要清除浮动？清除浮动的方式有哪些？
清除浮动主要是为了避免由于浮动元素脱离正常文档流而引发的布局问题。
当一个元素浮动时，它从普通文档流中脱离，常常会影响到其父元素和后续兄弟元素的显示
效果。典型问题包括父元素无法包裹浮动元素的高度等。清除浮动是为了解决这些布局上的
紊乱问题，确保页面布局按照预期运行。
清除浮动的方式有以下几种：
使用空的清除浮动元素（clearfix hack）。
使用伪元素 ::after 清除浮动。
使用 overflow 属性清除浮动。
设置BFC,例如，使用 display: flow-root 清除浮动
说说你对 BFC 的理解，如何创建 BFC？
BFC（块级格式化上下文，Block Formatting Context）是 CSS 中一种非常重要的布局概念，
是一个独立的渲染区域，使其内部的布局不受外部元素影响。了解 BFC 有助于解决浮动、清
除浮动、边距重叠等常见布局问题。
元素设置以下属性创建创建：
float: left 或 right;
position: absolute 或 fixed;
display： inline-block table 或 flow-root;
overflow： hidden、auto 或 scroll;
扩展知识
简单总结之后，我再详细说说BFC的几个常见使用场景和影响规则吧。
1、浮动元素的清除：
当在设计页面布局时，需要清除浮动影响来保证父元素正确的高度，这时可以利用创建 BFC
来实现。这种方法比给父元素添加一个空的div进行清除浮动更优雅。
2、防止外边距（Margin）重叠：
如果两个相邻的普通流定位的块元素相遇，它们的垂直外边距会发生重叠（取较大值）。通过
创建 BFC，可以将两个元素的外边距分离，避免重叠现象。
3、自适应容器：
BFC 可以包含浮动元素。例如，在一个浮动子元素里，如果父元素也是 BFC，则父元素就会
包含子元素的高度。
4、隔离 float 元素：
上面提到，float 元素被包含在BFC里会被包含其高度，如果我们不想其他元素被 float 元素
影响布局，那么我们可以给该元素创造一个 BFC。如何用 CSS 实现一个三角形？
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
红色的等腰三角形。
.triangle-equilateral {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86.6px solid pink; // 边长的 sqrt(3)/2 倍
}
等边三角形
如何在网页中画一条 0.5px 的线？
在网页中画一条 0.5px 的线主要可以通过以下几种方法实现：
1）使用 CSS transform ：通过 CSS 样式将 height 或 width 设置为 1px，然后用 scale 缩放。
.line {
width: 100%;
height: 1px;
background-color: black;
transform: scaleY(0.5);
}
2）使用 border 和 transform ：用一个元素的边框绘制，再通过缩放调整。
.line {
width: 100%;
border-top: 1px solid black;
transform: scaleY(0.5);
transform-origin: center;
}
3）使用 background-image ：通过 CSS 的背景图设置一种线性渐变，只显示所需要的部分。
.line {
width: 100%;
height: 1px;
background-image: linear-gradient(to right, black 50%, transparent 50%);
background-size: 2px 1px;
}
如何利用 CSS 实现一个自适应的渐变背景效果？
利用 CSS 实现一个自适应的渐变背景效果，可以使用 linear-gradient 或 radial-gradient 等
CSS 属性，并结合一些灵活的单位如百分比来确保背景能自适应不同屏幕尺寸。以下是一个具体的
实现步骤：
1）首先，为目标元素添加一个渐变背景属性，例如 linear-gradient。
2）其次，使用百分比作为颜色过渡的控制点。
3）最后，确保目标元素能自适应父容器的大小，即设置宽度和高度为100%。
/* 针对整个页面应用全屏渐变背景 */
body {
margin: 0;
height: 100vh;
width: 100vw;
background: linear-gradient(to right, #ff7e5f, #feb47b);
/* 或者你可以使用 radial-gradient 等其他渐变方式 */
}
扩展知识
现在我们进一步看看和渐变背景相关的一些知识点。
1）更多渐变类型：
radial-gradient：从中心向四周辐射的渐变。
conic-gradient：类似于饼图切割的渐变。
2）多重背景： 可以给一个元素同时应用多个背景，只需使用逗号分隔不同的 background 值。
body {
background:
linear-gradient(to right, #ff7e5f, #feb47b),
url('path/to/image.jpg');
}
3）自适应技巧： 对于高度和宽度的自适应，掌握一些常用单位如%、vh、vw等是非常有用的。
vh：视口高度的百分比。
vw：视口宽度的百分比。
4）浏览器兼容性： 虽然大部分现代浏览器都支持渐变背景，但为确保兼容性，建议对渐变背景
添加前缀。
body {
background: -webkit-linear-gradient(to right, #ff7e5f, #feb47b); /* Safari 5.1-6.0 */
background: -o-linear-gradient(to right, #ff7e5f, #feb47b); /* Opera 11.1-12.0 */
background: -moz-linear-gradient(to right, #ff7e5f, #feb47b); /* Firefox 3.6-15 */
background: linear-gradient(to right, #ff7e5f, #feb47b); /* Standard syntax */
}
5）交互性 gradient： 我们可以用CSS 动态变化的方向或者颜色，例如：hover伪类结合渐变背景，
创造一些有趣的交互效果。
button {
background: linear-gradient(to right, #ff7e5f, #feb47b);
border: none;
padding: 10px 20px;
color: white;
cursor: pointer;
transition: background 0.5s ease;
}
button:hover {
background: linear-gradient(to right, #feb47b, #ff7e5f);
}
https://developer.mozilla.org/zh-CN/docs/Glossary/CSS
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
