![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
mini_qiu
这个作者很懒,什么都没留下…
展开
-
滚动条出现挤压页面宽度,影响布局
问题描述:当页面突然出现滚动条的时候,页面会突然被挤压,因为滚动条也是需要占位的呀。解决思路:现在目标就是滚动条出现,但是内容位置不变,依然不动。1、新属性overlaychrome下overflow有个新的属性值overlay,这个属性简直就是为了这个问题而生,他和auto有点像,但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾,这个属性值目前只有chrome支持。html { overflow-y: overlay;}2、margin-right: calc(100%转载 2022-05-27 11:03:10 · 2313 阅读 · 4 评论 -
CSS实现button按钮闪烁效果
```<el-button type="success" class="flash animated infinite">按钮</el-button>``````.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both}.animated.inf...原创 2022-04-26 16:46:00 · 2374 阅读 · 0 评论 -
element ui 怎么样修改组件样式 (如何在Scoped CSS规范下 修改第三方组件中的样式)
产生原因:由于组件之间需要做样式隔离(也就是<style scoped lang="scss">中的scoped属性)所以我们定义的样式类在打包时会在后面自动带一个不重复的后缀,以防止组件之间的样式相互影响,这样我们如果要通过组件内部的类名来修改样式就会出问题,因为我们定义的类名总是会被修改例如我们要修改el-input组件,它内部的类名有一个是el-input__inner如果我们要修改他,直接定义一个.el-input__inner类,由于组件样式隔离的原因是..原创 2021-01-08 13:47:08 · 958 阅读 · 2 评论 -
input修改placeholder样式、去掉点击时的边框样式
placeholder样式:input::-webkit-input-placeholder { font-size: 17px !important; color: #CCCCCC !important;}点击样式: input:focus { outline: none; }原创 2020-09-07 14:52:01 · 441 阅读 · 0 评论 -
css实现水平垂直居中常用的几种方式
1、绝对定位:父元素:position: relative;子元素:position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);2、flex布局&margin:父元素:display: flex;子元素:margin: auto auto;3、纯flex布局:(要注意主轴方向)父元素:display: flex;justify-content:..原创 2020-08-11 15:25:49 · 101 阅读 · 0 评论 -
HTML自带的滚动条的样式怎么修改
/* 滚动条样式修改 *//* 纵向滚动条和横向滚动条宽度 */.scroll::-webkit-scrollbar { width: 7px; height: 5px;}/* 滚动条按钮样式 */.scroll::-webkit-scrollbar-thumb { border-radius: 10px; background: #868686;}/* 滚动条背景条样式 */.scroll::-webkit-scrollbar-track { border-radiu.原创 2020-07-09 10:04:58 · 468 阅读 · 0 评论 -
not(:last-child)的用法
网上看资料时看到的用法,以前没接触过,看到之后不禁感叹这用法太人性化了,极大方便了敲代码:<style> ul{ list-style: none; } li{ display: inline; } li:not(:last-child)::after{ content: "|"; }...原创 2020-01-02 10:59:32 · 8993 阅读 · 2 评论 -
微信小程序弹窗会出现遮罩层滚动穿透的问题
1.如果弹出层没有滚动事件,就直接在蒙板上加catchtouchmove="move" move:function(){};2.如果弹出层有滚动事件,那么在弹出层出现的时候给底部的containerView加上一个样式。<view class="{{showSearchView?'tripList_root':''}}">.tripList_root{ ...原创 2019-10-12 10:30:25 · 1668 阅读 · 0 评论 -
flex弹性布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html博主写得非常详细原创 2019-10-08 16:36:29 · 130 阅读 · 0 评论 -
微信小程序中设置了flex-direction之后,水平居中跟垂直居中的设置反过来了
设置flex-direction: column;之后,盒子中的元素以列的方式排列,这个时候,跟行排列中,主轴的位置会互换,横轴会变成竖轴,竖轴会变成横轴,所以这个时候设置水平居中其实是行排列时的垂直居中即:align-items: center;会使元素水平居中,而行排列中的水平居中justify-content: center;则会使元素垂直居中...原创 2019-09-25 09:57:05 · 3081 阅读 · 0 评论 -
伪元素nth-child()与nth-of-type()有什么区别
p:nth-child(4)指的是p元素的第四个兄弟元素,如果这个元素是p元素就会选中,如果不是就不会p:nth-of-type(4)指的是第四个p元素例:<p></p><p></p><a></a><a></a> <!-- p:nth-child(4)会选中这个,但是由于...原创 2019-09-23 16:23:23 · 512 阅读 · 2 评论 -
怎么分别设置各个边框的阴影效果box-shadow
各个参数的说明:(以上部边为例进行说明)1. 对于上边,沿x轴方向的偏移量显然没有意义,设为0px;2. 沿y轴正方向阴影进入div内部,不显示,因此写为负数;3. 模糊程度按需要自定;4. 扩展半径不要写,或者写成0px,这样就不会影响其他的边;5. 颜色自定;6. 下、左、右边阴影按规律类推。 box-shadow: 0px -10px 0px 0px #ff0000...原创 2019-09-23 11:16:51 · 814 阅读 · 0 评论 -
为什么给元素添加了z-index却没有效果
要想给元素设置z-index样式,必须先让它变成定位元素,即要设置position属性,值包括relative,absolute,fixed如果不想给本元素设置,那么可以给他的父元素设置position属性,效果是一样的...原创 2019-09-23 11:04:11 · 2801 阅读 · 0 评论 -
使用nth-of-type来实现的小程序列表布局小技巧
要实现这种布局该怎么做,这个水果列表是从后台api得到的通过wx:for循环出来的如果不处理,会是这个效果:要实现就需要将左边的一列向上移,那么怎么才能只操作到左边列呢?这里我们可以用.list-item:nth-of-type(2n){position: relative;top: -155rpx;}通过伪类选择器选择,然后设为相对布局,相对自己向上移...原创 2019-09-19 17:13:21 · 385 阅读 · 0 评论 -
CSS中相对定位relative跟绝对定位absolute的详细作用
absolute:首先讲一下absolute, 设置absolute时他的父标签一定要设一个relative,因为absolute就是相对它来绝对布局的,这个时候只能用top、left、right、bottom来进行布局了,像margin就没用了,那么这些上下左右就是相对那个最近的带relative的父元素来定位的relative:再就是relative,元素自己设置relative就...原创 2019-09-19 14:48:13 · 308 阅读 · 0 评论 -
设置了margin:0 auto; 和宽度,为什么还是不能水平居中?
解决方法:父元素设为相对定位,将需要居中定位的元素设为绝对布局,并添加以下两行代码: position:absolute; left: 50%; transform: translateX(-50%);原创 2019-09-17 15:00:43 · 1695 阅读 · 0 评论 -
学习前端的一些笔记
原创 2018-10-16 10:52:21 · 123 阅读 · 0 评论 -
css实现三角形
首先我们来看一下这种效果:div{ width: 0; height: 0; border-left: 80px solid red; border-right: 80px solid yellow; border-top: 80px solid pink; border-bottom: 80px solid black; }就是一个...原创 2018-08-22 17:33:32 · 159 阅读 · 0 评论 -
解决子标签浮动后父级标签边框塌陷问题
啥都不说咋们直接上解决办法:第一种方法:父标签div中添加overflow:hidden;第二种方法:子标签中添加clear:both;(如果子元素都需要添加float浮动,可以在父标签里面再添加一个空的div,div样式里面添加clear:both;);第三种方法:给父级元素设置高度。第四种方法:给父标签的伪类编写代码(假设类名为clear) .clea...原创 2018-08-10 16:00:18 · 1065 阅读 · 0 评论