Css
你好,我喜欢你
卿卿qing
这个作者很懒,什么都没留下…
展开
-
vue修改elementui表格el-table选中行的高亮色highlight-current-row
css 代码::v-deep .el-table__body tr.current-row>td { color: #fff; background: #409EFF!important;}原创 2021-10-14 17:38:47 · 7004 阅读 · 3 评论 -
css 让img图片在div标签垂直居中
使用 flex 布局<div class="login"> <img class="login-img" src="images/logo.png"/> <span class="login-wel">早上好,欢迎登录 ~</span></div> .login-top { display: flex; align-items: center; .login-img { width: 34px; heig原创 2021-05-10 15:34:10 · 1011 阅读 · 0 评论 -
Css 如何快速让 button 按钮标签水平居中
button { display: block; margin: 0 auto;}原创 2021-03-31 17:22:46 · 3894 阅读 · 0 评论 -
Css 实现父元素设置 border-radius 时影响子元素圆角
实现效果代码<view class="my-group-page-card-img"> <image class="portrait-img" src="@/static/img/head portrait.jpg"></image> <image class="portrait-img" src="@/static/img/head portrait2.jpg"></image> <image class="portrait-i原创 2021-01-27 11:10:06 · 3444 阅读 · 0 评论 -
Css 解决 image 标签间距问题
开发 uni-app 时发现,同一父级元素下的多的image标签在Chrome浏览器有上下间距上图代码<view class="my-group-page-card-img"> <image class="portrait-img" src="@/static/img/head portrait.jpg"></image> <image class="portrait-img" src="@/static/img/head portrait2.jpg"&g原创 2021-01-27 10:39:02 · 781 阅读 · 0 评论 -
Css 中俩个 class 选择器紧挨在一起,空格隔开和逗号 设置样式,有什么区别?
紧挨在一起<a class="glyphicons white no-js cogwheel" href="#" target="_blank"><i></i></a>/*当有元素同时包含 "glyphicons" 和 "white" 俩个class类名的style*/.glyphicons.white i:before { color: #fff;}空格隔开css中class后面跟两个类,这两个类用空格隔开,那么这两个类对这个元素都起作用原创 2021-01-26 21:53:49 · 4027 阅读 · 2 评论 -
Css position属性absolute和relative属性值的区别
absolute 绝对定位,相对于父级元素的 relative 定义,不占位定位,没有高度支撑会被下面元素挤掉relative 相对定义,占位定位,没有高度支撑,也不会被下面元素挤掉原创 2021-01-22 20:06:29 · 163 阅读 · 0 评论 -
Css 给PNG图像设置阴影
.div { filter: drop-shadow(0px 2px 20px #ecf6ff);}原创 2021-01-04 21:31:42 · 2506 阅读 · 0 评论 -
css 如何解决子元素margin-top带动父元素问题
亲测有效原创 2020-12-22 20:25:14 · 586 阅读 · 0 评论 -
css 解决 margin: 0 auto 失效问题
margin: 0 auto 可实现水平居中,⚠️但是必须是块级元素1才会生效,实现水平居中可以先使用 display: block 转成块级元素,再设置 margin或者可以将包裹行内元素的父元素写入我们常给文字居中的代码(text-align:center;)块级元素:div、table、form、p、ul、h1,h6、hr 、pre、address、center、marquee、blockquote行内元素:span,a,img,input,textarea,select,labe原创 2020-12-10 14:18:08 · 1193 阅读 · 0 评论 -
css 解决 vertical-align: middle 失效问题
vertical-align: middle 属性只对行内元素有效,对块元素是不起作用的。当display:inline-block;为必要条件的时候,可以适当用table-cell取替,将display属性设置为table-cell,块元素转化为单元格,然后加上vertical-align:middle代码如下:<p class="time-font"> <span>{{ parseTime(today)}}</span></p>.time原创 2020-11-06 11:22:24 · 1003 阅读 · 0 评论 -
CSS cursor 光标属性
div{ cursor:default } 默认正常鼠标指针div{ cursor:hand } 和 div{ cursor:text } 文本选择效果div{ cursor:move } 移动选择效果div{ cursor:pointer } 手指形状 链接选择效果div{ cursor:url(url图片地址) } 设置对象为图片...原创 2020-09-23 15:27:05 · 127 阅读 · 0 评论 -
box-shadow属性值详解
box-shadow: 2px 3px 5px 10px #ccc; 顺序为offset-x,offset-y,blur-size(模糊程度,值越大,模糊面积越大,阴影越淡),spread-size(阴影扩大或收缩),colorblur-size 和 spread-size 是可选的(默认0)详解原创 2020-09-04 17:05:59 · 1730 阅读 · 0 评论 -
background 属性值及属性值的顺序
background: [background-color] | [background-image] | [background-position]/[background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin]原创 2020-08-27 15:32:58 · 1065 阅读 · 0 评论 -
涨芝士:inherit
color: inherit; // 继承,继承块中的颜色原创 2020-08-19 18:08:29 · 101 阅读 · 0 评论 -
涨芝士:cursor: not-allowed;
cursor: not-allowed; // 禁用图标原创 2020-08-19 18:06:41 · 230 阅读 · 0 评论 -
解锁新技能:如何使用css优美的处理图片在内容区的展示
object-fit属性object-fit: contain; // 保持原有宽高,填充盒子,宽高不匹配添加‘黑边’object-fit: cover; // 保持原有宽高,填充盒子,宽高不匹配将剪裁适应内容框object-fit: fill; // 通过拉伸使用内容框object-fit: none; // 保持原有尺寸object-fit: scale-down; // 尺寸与none或contain中的一个相同,取决于它俩之间谁得到的对象尺寸会更小一些...原创 2020-08-13 16:17:02 · 153 阅读 · 0 评论 -
涨芝士:vue 如何修改 element-ui 里的 placeholder 字体颜色
& ::placeholder { color: #000;}注意: & 后面有空格,否则不生效原创 2020-07-16 18:46:50 · 2719 阅读 · 1 评论 -
涨芝士:取消input获得焦点属性focus
watchwatch 首次变化不触发事件props: { isFlag: { type: Boolean, default: false }},watch: { 'isFlag'(val) { if (val) { doSome() } }}首次加载,如果isFlag的值改变的话,isFlag里的if判断是不会执行的解决方法:computedprops: { isFlag: { type: Boolean, default: false }原创 2020-07-13 21:29:51 · 858 阅读 · 0 评论 -
解析:focus-within css伪类
和:focus产生的效果是一样的,只是区别于产生作用的效果,:focus-within表示一个元素获得焦点,或,该元素的后代元素获得焦点。也就是元素自身或者它的某个后代匹配 :focus 伪类<form> <label for="given_name">Given Name:</label> <input id="given_name" type="text"> <br> <label for="family_name".原创 2020-07-05 23:19:31 · 166 阅读 · 0 评论 -
关于rem的进一步理解
rem是css3新增的相对长度单位,相对于根元素html的font-size计算值得大小。相当于屏幕宽度的百分比。IE,Chrome默认根元素的font-size是16px,如果想要设置12px的字体大小就是12px/16px=0.75rem如果font-size设置为62.5%,则表示默认字体大小从16px修改为10px,即10px/16px=62.5%,1rem=10pxhtml { width: 100%; height: 100%; font-size:62.5%; // fo.原创 2020-06-30 21:41:42 · 206 阅读 · 0 评论 -
快速解决适配问题
场景:PC端,H5,切换不同的分辨率或切换不同的手机,宽高始终铺满全屏,不溢出屏幕解决方法:使用vw,vh给html或父元素设置宽高原创 2020-06-30 21:21:49 · 456 阅读 · 0 评论 -
自定义 elementui 的样式,实现样式穿透
出现的情况:组件内引用第三方组件,不加scoped,第三方组件设置的样式生效,页面可以显示内容,加了scoped,页面内容不显示解决方案:引用了第三方,scoped加了局限性,样式不会进行穿透// 使用less用>>>进行穿透>>> .video { .video-player { .vjs-fluid { width: 390px; height: 690px;原创 2020-06-16 14:30:17 · 1299 阅读 · 0 评论 -
transform:rotate(45deg)不生效
设置在内联元素上才生效display: inline-block;transform: rotate(45deg);原创 2020-04-26 15:41:05 · 2439 阅读 · 0 评论 -
vue 搭配 Element UI库开发时,如何自定义样式?
使用 /deep/,用 buttom 举例<div class="WrapBtn"> <el-button type="primary">主要按钮</el-button></div><style>/deep/.WrapBtn{ width: 100%;}.el-button{ background:...原创 2019-10-17 16:58:22 · 521 阅读 · 3 评论 -
css 伪类
伪类专门用来表示元素的一种特殊状态:focus 出现光标的状态:active 超链接点击的状态:hover 移入的状态:first-letter 修饰标签的第一个字符:first-line 修饰段落标签的第一行:before 给段落另加文本:after 给段落另加文本...原创 2019-10-09 21:59:20 · 120 阅读 · 0 评论 -
移动端开发的时候,一般怎么实现自适应
remrem 是 css3 新引入的单位,在pc端会有兼容性的问题,对移动端比较友好。简而言之就是通过动态设置 html 根元素的 fontsize ,等比缩放元素大小来自适应移动设备.vw和vhvw是浏览器窗口宽度,vh是高度响应式布局用一些css框架,比如:媒体查询(bootstrap),queryUI,主要是根据浏览器窗口宽度或高度,进行响应式选择显示哪个css...原创 2019-08-22 15:06:01 · 1128 阅读 · 0 评论 -
CSS 样式
强制在一行显示{ width: 650px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}原创 2019-07-23 10:24:11 · 130 阅读 · 0 评论