在组件中绑定官方提供的属性：popper-class，选择器下拉菜单的自定义类名 再添加一个标签 ，样式写在这个标签里即可
tailwindcss（类似内联样式）前言​ 使用后的感受是它和内联样式的使用基本相似，除了一些名词的拼写（内联样式：background: skyblue; tailwindcss：bg-sky-200; ），最主要的是它比内联样式更好的特点：可以写鼠标悬停，光标聚焦等样式，可以写响应式布局，直接写在class中就行...虽然对比内联样式有很多好的地方，但是在开发中不推荐使用：在一个项目中，有多个人共同开发，你使用tailwindcss写的样式，别人在没接触过tailwindcss看你的代码时会非常麻烦，特别是由其他人修改、调整你绘制的页面样式时非常的吃力，而且一些相同的样式大量重复的编写也不好，对于后期的维护也不方便，因此在没有统一的沟通使用某种样式时，最好将css抽取出来，方便调整，修改，维护安装引入安装 Tailwind CSStailwindcss通过 npm安装，并创建您的tailwind.config.js 文件。npm install -D tailwindcss npx tailwindcss init配置您的模板路径在文件中添加所有模板文件的路径tailwind.config.js。module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }将 Tailwind 指令添加到您的 CSS@tailwind将Tailwind 的每个层的指令添加到您的主 CSS 文件中。@tailwind base; @tailwind components; @tailwind utilities;启动 Tailwind CLI 构建过程运行 CLI 工具来扫描您的模板文件中的类并构建您的 CSS。npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch开始使用 Tailwind将已编译的 CSS 文件添加到 并开始使用 Tailwind 的实用程序类来设置您的内容样式。 Hello world! 常用配置响应式：sm640像素@media (min-width: 640px) { ... }md768像素@media (min-width: 768px) { ... }lg1024像素@media (min-width: 1024px) { ... }xl1280像素@media (min-width: 1280px) { ... }2xl1536像素@media (min-width: 1536px) { ... } Display：blockdisplay: block;inline-blockdisplay: inline-block;inlinedisplay: inline;flexdisplay: flex;hiddendisplay: none; Floats：浮动float-rightfloat: right;float-leftfloat: left;float-nonefloat: none;Clear：清除clear-leftclear: left;clear-rightclear: right;clear-bothclear: both;clear-noneclear: none;Flex Direction：设置主轴的方向flex-rowflex-direction: row;flex-row-reverseflex-direction: row-reverse;flex-colflex-direction: column;flex-col-reverseflex-direction: column-reverse;Flex Wrap：设置子元素是否换行flex-wrapflex-wrap: wrap;flex-wrap-reverseflex-wrap: wrap-reverse;flex-nowrapflex-wrap: nowrap;Justify Content：设置主轴上的子元素排列方式justify-startjustify-content: flex-start;justify-endjustify-content: flex-end;justify-centerjustify-content: center;justify-betweenjustify-content: space-between;justify-aroundjustify-content: space-around;justify-evenlyjustify-content: space-evenly;Justify Items：子元素以默认方式沿适当轴线对齐到每个盒子justify-items-startjustify-items: start;justify-items-endjustify-items: end;justify-items-centerjustify-items: center;justify-items-stretchjustify-items: stretch;Align Content：设置侧轴上的子元素的排列方式(多行)content-centeralign-content: center;content-startalign-content: flex-start;content-endalign-content: flex-end;content-betweenalign-content: space-between;content-aroundalign-content: space-around;content-evenlyalign-content: space-evenly;Align Items：设置侧轴上的子元素的排列方式(单行)items-startalign-items: flex-start;items-endalign-items: flex-end;items-centeralign-items: center;items-baselinealign-items: baseline;items-stretchalign-items: stretch;Width：宽w-0width: 0px;w-pxwidth: 1px;w-0.5width: 0.125rem; / 2px /w-1width: 0.25rem; / 4px /w-1.5width: 0.375rem; / 6px /w-2width: 0.5rem; / 8px /w-2.5width: 0.625rem; / 10px /w-3width: 0.75rem; / 12px /w-autowidth: auto;w-1/2width: 50%;w-1/3width: 33.333333%;w-2/3width: 66.666667%;w-1/4width: 25%;w-fullwidth:100%Min-Width：最小宽度min-w-0min-width: 0px;min-w-fullmin-width: 100%;min-w-minmin-width: min-content;min-w-maxmin-width: max-content;min-w-fitmin-width: fit-content;Max-Width：最大宽度max-w-0max-width: 0rem; / 0px /max-w-nonemax-width: none;max-w-xsmax-width: 20rem; / 320px /max-w-smmax-width: 24rem; / 384px /max-w-mdmax-width: 28rem; / 448px /max-w-lgmax-width: 32rem; / 512px /max-w-xlmax-width: 36rem; / 576px /max-w-2xlmax-width: 42rem; / 672px /Height：高和宽配置相同Min-Height：最小高度....Max-Height：最大高度....Padding：内边距p-0padding: 0px;px-0padding-left: 0px; padding-right: 0px;py-0padding-top: 0px; padding-bottom: 0px;pt-0padding-top: 0px;pb-0padding-bottom: 0px;pl-0padding-left: 0px;pr-0padding-right: 0px;p-[1px]padding: 1pxMargin：外边距m-0margin: 0px;mx-0margin-left: 0px; margin-right: 0px;my-0margin-top: 0px; margin-bottom: 0px;mt-0margin-top: 0px;mr-0margin-right: 0px;mb-0margin-bottom: 0px;ml-0margin-left: 0px;m-[1px]margin: 1px;Space Between：控制子元素之间空间距离space-x-0 > + margin-left: 0px;space-y-0 > + margin-top: 0px;space-x-0.5 > + margin-left: 0.125rem; / 2px /space-{x\y}-[2px]margin-left: 0.125rem; / 2px /Font Size：字体大小text-xsfont-size: 0.75rem; / 12px / line-height: 1rem; / 16px /text-smfont-size: 0.875rem; / 14px / line-height: 1.25rem; / 20px /text-basefont-size: 1rem; / 16px / line-height: 1.5rem; / 24px /text-lgfont-size: 1.125rem; / 18px / line-height: 1.75rem; / 28px /text-xlfont-size: 1.25rem; / 20px / line-height: 1.75rem; / 28px /Font Style：字体样式italicfont-style: italic;not-italicfont-style: normal;Font Weight：字体粗细font-thinfont-weight: 100;font-mediumfont-weight: 500;font-semiboldfont-weight: 600;font-boldfont-weight: 700;font-extraboldfont-weight: 800;font-blackfont-weight: 900;Text Color：文本颜色text-[#000000]color: #000000text-inheritcolor: inherit;text-currentcolor: currentColor;Background Color：背景颜色bg-[#000000]background-color: #000000; bg-inheritbackground-color: inherit; bg-currentbackground-color: currentColor; 修饰词伪类, :hover, :focus,:first-child和:required伪元素, ::before, ::after, ::placeholder, 和::selection媒体查询，例如响应式断点、暗模式和prefers-reduced-motion属性选择器，例如[dir="rtl"]和[open] Save changes Save changes
C3过渡：2D转换之移动translate语法：transfom：translate（x，y）； transfom：translateX（n）； transfom：translateY（N）； 重点：定义2D转换中的移动，沿着X和Y轴移动元素translate最大的优点：不会影响到其它元素的位置translate中的百分比单位是相对于自身元素的translate:(50%,50%);对行内标签没有效果2D转换之旋转rotate语法：transform：rotate(度数);重点：rotate里面跟度数，单位是deg，比如rotate(45deg);角度为正时，顺时针，负时，为逆时针默认旋转的中心点时元素的中心点2D转换中心点translate-origin;语法：translate-origin:x y;重点：注意后面的参数 X 和 Y 用空格隔开x y 默认转换的中心点是像素的中心点（50% 50%）还可以给 x y 设置像素 或者方位名词（top bottom left right center）2D转换之缩放 scale语法：transform: scale(x, y);注意：注意其中的x和y用逗号分隔transform(1, 1);宽和高都放大一倍，相当于没有放大transform(2, 2);宽和高都放大两倍transform(2);只写一个参数，第二个参数则和第一个参数一样，相当于scale(2, 2)transform(0.5, 0.5) 缩小scale缩放时最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其它盒子2D转换综合写法同时使用多个转换，格式为：transform: translate() rotate() scale()...;顺序会影响转换的效果。先旋转会改变坐标轴方向当同时有位移和其它属性的时候，记得要将位移放到最前面2D转换总结转换transform 简单理解就是变形有2D和3D之分2D移动translate(x, y)最大的优势是不影响其他盒子 ，里面参数用% ,是相对于自身宽度和高度来计算的可以分开写比如translateX(x)和translateY(y)2D旋转rotate(度数)可以实现旋转元素 度数的单位是deg2D 缩放sacle(x,y)里面参数是数字不跟单位可以是小数最大的优势 不影响其他盒子设置转换中心点 transform-origin:xy;参数可以百分比、 像素或者是方位名词当我们进行综合写法 ,同时有位移和其他属性的时候,记得要将位移放到最前C3动画动画基本使用制作动画分为两步： 1.先定义动画 2.再使用/调用动画用keyframes定义动画（类似定义类选择器）@keyframes 动画名称 { 0% { transfrom:translate(0, 0); } 100% { transfrom:translate(100px, 0); } 元素使用动画div { width:200px; height:200px; background-color:aqua; margin:100px auto; /* 调用动画 */ animation-name:动画名称; /* 持续时间 */ animation-duration:持续时间; } 动画序列0%是动画的开始, 100%是动画的完成。这样的规则就是动画序列在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果动画是使元素从一种样式逐渐变化为另一种样式的效果。 可以改变任意多的样式任意多的次数请用百分比来规定变化发生的时间,或用关键词"from"和"to" ,等同于0%和100%动画常用属性属性简写：animation :动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;简写属性里面不包含animation-play-state暂停动画：animation-play-state: puased; 经常和鼠标经过等其它配合使用想要动画走回来，而不是直接跳回来：animation-direction:alternate;盒子动画结束后，停在结束位置：animation-fill-mode: forwards;3D移动transform: translateZ(npx);3D转换透视 perspective // 写到父盒子上在2D平面产生近大远小视觉立体,但是只是效果二维的如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内模拟人类的视觉位置,可认为安排一只眼睛去看透视我们也称为视距:视距就是人的眼睛到屏幕的距离距离视觉点越近的在电脑平面成像越大,越远成像越小透视的单位是像素3D旋转 rotate3d3D旋转指可以让元素在三维平面内沿着X轴，Y轴，Z轴或者自定义轴进行旋转语法transform:rotateX(45deg) :沿着x轴正方向旋转45度transform:rotateY(45deg) : 沿着y轴正方向旋转45degtransform:rotateZ(45deg) :沿着Z轴正方向旋转45degtransform:rotate3d(x,y,z,deg) :沿着自定义轴旋转deg为角度(了解即可)3D呈现 transform-style控制子元素是否开启三维立体环境transform-style: false子元素不开启3d立体空间默认的transform-style: preserve-3d;子元素开启立体空间代码写给父级,但是影响的是子盒子
CSS的三大特性：层叠性： 样式不冲突，不会层叠 样式冲突，遵循就近原则，哪个样式离结构近执行哪个继承性： 恰当的使用继承可以简化代码，降低CSS样式复杂性 子元素可以继承父元素的样式（text-、font-、line-这些元素开头的可以继承，以及color属性优先级： 选择器相同，执行层叠性 选择器不同，则根据选择器权重执行 选择器权重：!important > 行内样式 > ID选择器 > 类选择器，伪类选择器 > 元素选择器 > 继承或者 * 权重叠加：如果是复合选择器，则会有权重叠加，需要重新计算CSS盒子阴影：语法：box-shadow:h-shadow v-shadow blur spread color inset;CSS清除浮动：为什么要清除浮动： 父级没有高度 子盒子浮动了 影响下面的布局 清除的方式： CSS属性书写顺序：布局定位属性:display / position / float / clear / visibility / overflow (建议display第一个写，毕竟关系到模式)自身属性: width / height / margin / padding / border / background文本属性:color / font / text-decoration / text-align / vertical-align/white-space / break-word其他属性(CSS3 ) : content / cursor / border-radius / box-shadow /text-shadow / background:linear-gradient...页面布局思路：必须确定页面的版心(可视区），我们测量可得知分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置.页面布局第二准则制作HTML结构，遵循先有结构，后有样式的原则。结构永远最重要所以，先理清楚布局结构，再写代码尤为重要CSS定位：定位 = 定位模式 + 位偏移定位模式：用于指定一个元素在文档中的定位方式位偏移：决定该元素的最终位置定位叠放次序：z-index定位：position static：静态定位 relative：相对定位 absolute：绝对定位 fixed：固定定位 sticky：粘性定位位偏移： top：顶端偏移量，定义元素相对于父元素上边线的距离 bottom：底部偏移量，定义元素相对于父元素下边线的距离 left：左侧偏移量，定义元素相对于父元素左边线的距离 right：右侧底部量，定义元素相对于父元素右边线的距离总结：CSS显示/隐藏：display：隐藏元素后，不占有原来的位置 display:none 隐藏 dispaly:block 显示visibility：隐藏元素后，继续占有原来的位置 visibility:visible 显示 visibility:hidden 隐藏overflow：溢出部分做处理 overflow:visible 不剪切内容也不显示滚动条 overflow:hidden 不显示超出对象尺寸的内容，超出的部分隐藏掉 overflow:scroll 不管是否超出对象尺寸，都显示滚动条 overflow:auto 超出自动显示滚动条，不超出不显示滚动条鼠标样式：a { cursor:pointer; } default：默认 pointer：小手 move：移动 text：文本 not-allowed：禁止CSS用户界面样式：轮廓线：outline input { outline : none; }防止拖拽：resize textarea { resize: none; }图片文字垂直居中：vertical-alige vertical-alige: baseline | top | middle | bottom baseline：默认，元素放置在父元素的基线上 top：把元素的顶端与行中最高元素的顶端对齐 middle：把此元素放置在父元素的中部 bottom：把元素的底端与行中最低元素的底端对齐单行溢出文字显示省略号white-space：nowrap；强制一行显示overflow：hidden；溢出隐藏text-overflow：ellipsis；文字溢出用省略号显示CSS清除浮动：.clearfix:after{ visibility:hidden; clear:both; display:block; content:"."; height:0; } .clearfix{ *zoom:1; } 伪元素清除浮动：.clearfix: before ,.clearfix:after { content : ""; display:table; } .clearfix:after { clear :both; }
CSS语法：CSS基础选择器：标签选择器： 定义：把HTML标签作为选择器，按标签名称分类 作用：可以把某一类标签全部选出来 优点：能快速为页面中同类标签统一设置样式 缺点：不能设置差异化样式，只能选择全部的当前标签类选择器： 作用：差异化选择不同的标签，单独选一个或者几个标签 语法：用class属性来调用（class：类）.类名 {属性1：属性值1 ...}多类名选择器：各个类之间用空格隔开 可以把一些标签元素相同的样式（共同的部分）放到一个类里面 这些标签都可以调用这个公共的类，然后再调用自己独有的类 从而节省CSS代码，统一修改也比较方便 id选择器： 定义：为标有特定id的HTML元素指定特定的样式（HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义） 语法：#id名 {属性1：属性值1 ...}id选择器和类选择器的区别： 类可以有多个，id只能有一个 类选择器在修改样式中使用的多，id选择器一般用于页面唯一性元素上，经常和JavaScript搭配使用通配符选择器： 定义：通配符选择器使用 “ * ” 定义，表示选取页面中所有的元素（标签） 语法：*{属性1: 属性值1 ...}使用：不需要调用，自动给所有元素使用样式，特殊情况使用：清除所有标签的内外边距 总结：CSS字体属性：作用：用于定义字体系列、大小、粗细、文字样式字体系列：使用font-family属性定义 p {font-family:"微软雅黑";}字体大小：使用font-size属性定义字体大小 p {font-size:20px;}字体粗细：使用font-weight属性设置文本字体的粗细 p {font-weight:bold;}文字样式：使用font-style属性设置文本的风格 p {font-style:normal;}字体复合属性：不能更换顺序，font-size和font-family不可以省略，其他的可以不写 body {font:font-style font-weight font-size/line-height font-family;}字体属性总结：CSS文本属性：作用：定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。文本颜色：color属性div { color: skyblue; } 对齐文本：text-align属性用于设置元素内文本内容的对齐方式div { text-align: center;} 装饰文本：text-decoration属性规定添加到文本的修饰可以给文本添加下划线、删除线、上划线等div { text-decoration：underline;} 文本缩进：text-indent属性用来指定文本的第一行缩进，通常是将段落的首行缩进 em：是一个相对单位，就是当前像素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小div { text-indent: 20px;} /* 向右缩进20像素 */ p { text-indent: 2em;} /* 向右缩进两个字的距离 */行间距：line-height属性用于设置行间距离（行高），可以控制文字行与行之间的距离p { line-height: 26px;}文本属性总结： CSS引入方式：内部样式表（嵌入式）： 写到HTML页面内部，将所有CSS代码抽取出来，单独放到一个 标签中 标签理论上可以放在HTML文档的任何地方，但一般会放在文档的 标签中 代码结构清晰，但是并没有实现结构与样式完全分离`div { color: skyblue; font-size: 14px; width: 400px; height: 200px; }`行内样式表（行内式）： 在元素标签内部的style属性中设定CSS样式，适合于修改简单样式 天蓝色，14像素 外部样式表（链接式）： 适合样式比较多的情况：样式单独写到CSS文件里，之后把CSS文件引入到HTML页面中使用 1.新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中 2.在HTML页面中，使用标签引入这个文件 link rel="stylesheet" href="css文件路径" CSS引入方式总结： Emmet语法：快速生成HTML结构语法 生成标签，直接输入标签名，按tab键即可，比如div，然后tab键，就可以生成 如果想要生成多个相同标签，加上*号就可以了，比如 div*3 就可以快速生成3个div 如果有父子级关系的标签，就可以用 ">" 比如 ul>li 就可以了 如果有兄弟关系的标签，用 "+" 就可以了，比如div+p 如果生成带有类名或者id名的，直接写.demo 或 #nav 按tab键就可以了 如果生成的div类名是有顺序的，可以用自增符号 "$" 如果想要在生成的标签内部写内容可以用 {...} 表示快速生成CSS样式语法 CSS基本采取简写形式即可 比如w200 按 tab 键可以生成 width:200px; 比如 lh26 按 tab 键可以生成 line-height:26px;复合选择器：复合选择器可以更准确、更高效的选择目标元素（标签）由两个或多个基础选择器，通过不同的方式组合而成的常用：后代选择器、子选择器、并集选择器、伪类选择器等后代选择器： 定义：又称为包含选择器，可以选择父元素里面子元素 写法：把外层标签写在前面，内层标签写在里面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代 语法：元素1 元素1的后代 { 样式声明; }子选择器： 用法：只能选择作为某元素最近一级子元素 语法：元素1 > 元素2 { 样式声明; }并集选择器： 定义：并集选择器可以选择多组标签，同时为它们定义相同的样式，通常用于集体声明 写法：各选择器通过英文 (,) 连接而成，任何形式的选择器都可以作为并集选择器的一部分 语法：元素1，元素2 { 样式声明; }伪类选择器： 定义：用于向某些选择器添加特殊的效果，比如给链接添加特殊的效果，或选择第1个，第n个元素 写法：用冒号（ : ）表示，比如 :hover 、:first-child链接伪类选择器： a:link：选择所有未被访问的链接 a:visited：选择所有已被访问的链接 a:hover：选择鼠标指针位于其上的链接 a:active：选择活动链接（鼠标按下未弹起的链接）focus伪类选择器： 用法：用于选取获得焦点的表单元素 写法： `input:focus { background-color:yellow;}`复合选择器总结： 元素显示模式： 定义：元素（标签）以什么方式显示，比如` `自己独占一行，比如一行可以放多个``块元素： 常见： ~ 、 、 、 、 、 ... 特点： 独占一行 高度、宽度、外边距以及内边距都可以控制 宽度默认是容器（父级宽度）的100% 是一个容器及合资，里面可以放块元素和行内元素行内元素： 常见：、、、、、 、、 、、... 特点： 相邻行内元素在一行上，一行可以显示多个 宽、高直接设置是无效的 默认宽度是它本身内容的宽度 行内元素只能容纳文本或其它行内元素行内块元素： 常见： 、 、 ... 特点： 和相邻行内元素（行内块）在一行，但是它们之间有空白间隙，一行可以显示多个 默认宽度就是它本身内容的宽度 高度、行高、外边距以及内边距都可以控制元素显示模式总结： 元素显示模式转换： 转换为块元素：display:block; 转换为行内元素：display:inline; 转换为行内块元素：display:inline-block;CSS的背景：背景颜色：background-color:颜色值 / 十六进制 / RGB代码;注：一般情况下元素背景颜色默认值是透明（transparent）背景图片：background-image:none | url(url)背景平铺：background-repeat:repeat | no-repeat | repeat-x | repeat-y背景图片位置：background-position:x y;背景图像固定：background-attachment:scroll | fixed背景属性复合写法：background:背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置背景总结：