![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML
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用两张图片叠加实现进度条
HTML代码如下:<div class="downImg"> <div class="upImg" style="width:50%;"> </div></div>CSS代码如下:.downImg { margin-top: 5px; width: 100%; height: 16px; position: relative; background: url(../img/2_reward/welfare_pic_.png) .原创 2021-05-26 17:07:04 · 816 阅读 · 0 评论 -
div的高度为什么会比子元素多几个像素
例如:<div class="relative"> <img src="img/1_sign_in/ico_ckao.png" > <div class="absolute"> XXX </div> <div class="absolute"> XXX </div></div>运行结果:除了img以外的元素都是绝对定位,希望最外层div的高度跟img高度一致最外层div的是白色边框.原创 2021-05-20 14:51:39 · 649 阅读 · 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 评论 -
微信小程序中wx:for怎么嵌套两层循环
<view wx:for="{{orderList}}" wx:key="item"> <view wx:for="{{item.order_info}}" wx:key="idx" wx:for-item="pro"> </view></view>只需要在内层循环中设置一个wx:for-item 属性即可原创 2020-05-11 20:09:57 · 10497 阅读 · 1 评论 -
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 评论 -
flex弹性布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html博主写得非常详细原创 2019-10-08 16:36:29 · 130 阅读 · 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 评论 -
为什么给元素添加了z-index却没有效果
要想给元素设置z-index样式,必须先让它变成定位元素,即要设置position属性,值包括relative,absolute,fixed如果不想给本元素设置,那么可以给他的父元素设置position属性,效果是一样的...原创 2019-09-23 11:04:11 · 2801 阅读 · 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 评论