qq_39706777的博客

现象：给 el-popover 标签设置 popover-class 属性，为popover添加类名，样式却不生效

当使用不同的选择器，选中同一个元素时，并且设置相同的样式时，这时样式之间产生冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级决定。规则：(由上至下，优先级依次降低)！important 行内样式 1000id选择器 100类/伪类选择器 10元素选择器 1通配* 0继承浏览器默认属性继承的样式 没有优先级当选择器包含多种选择器，应将选择器权值相加再比较选择器的优先级计算不会超过它的最大数量级如果选择器一样，则选择靠后的样式并集选择器中的优先级是单独计算可以在样式最后

input::placehodler{}

输入框默认聚焦后会有一个边框样式想去掉这个样式先了解下border和outlineborder&outlineborder 和 outline 都绘制于元素周围，它们的区别是 outline 不占据空间。outline属性值可以设置宽度、样式、颜色，顺序无所谓，同border样式。注意：对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式（style）的默认值是 none。但 input 元素是例外，其样式默认值由浏览器决定。将 outline 设置为 0 或 none 会

transition在CSS3引入 transition 前，CSS是没有时间轴的，所有的变化都是即时完成的。transition四个属性transition-property 指定transition适用的属性默认值all，用于所有变化的属性设置多个属性的过渡使用逗号分隔例如：分别设置width和height的过渡效果:transition: width .5s,height .8s;transition-duration 指定属性过渡时间默认0s0.3s可以缩写为.3str

盒模型CSS在处理网页时，认为每个元素都包含在一个不可见的盒子里，盒子的大小由内容区，内边距，边框组成。有两种盒模型1.标准盒模型width = content宽度box-sizing：content-box (默认)2.IE盒模型width = content宽度 + 左右padding + 左右borderbox-sizing：border-box...

定位 position1.相对定位 relative开启元素相对定位，是相对于元素在文档流中原本的位置定位的，不脱离文档流，如果不设置偏移量，元素不会发生任何变化不改变元素性质（块级/内联元素）2.绝对定位 absolute绝对定位的元素，是相对于最近开启定位的父元素定位，如果没有，则相对于窗口定位脱离文档流会改变元素性质，内联元素会转换为块元素3.固定定位 fixed固定定位永远相对于窗口定位，不随滚动条滚动4.默认值 static没有定位偏移量当开启了元素的定位时（

1.位置属性position, top, left,z-indexdisplayfloat…2.大小width, heightpadding, margin…3.文字系列font,line-height,letter-spacing,colortext-align…4.背景backgroundborder…5.其他animationtransition…

涉及知识点CSS盒模型transition过渡定位JS操作class属性介绍css实现switch开关按钮。代码HTML: <button class="switch"> <span class="switch_circle circle_left"></span> </button> <button class="switch"> <span class="switch_circle circ

放三个div，正常情况下没有浮动是这样的：div从上至下排列<style> .div1{ width: 100px; height: 200px; background-color: red; } .div2{ width: 200px;...

:root代表文档的根元素，在:root中声明的属性是全局属性，都可以通过var()引用var( )var(属性名) 可以代替元素任何属性中的任何值:root{ --normal-color: pink;}.bg{ background-color: var(--normal-color);}var( )回退值没有声明–active-color，则回退到 blue:root{ --normal-color: pink;}.bg{ background

介绍鼠标移入元素时，背景颜色从左侧滑倒右侧水平过渡代码html：<div class="bg"></div>css::root{ --normal-color: pink; --active-color: blue; } .bg{ position: relative; width: 100px; height: 30px; background-color: var(--normal-color); } .b