![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML+CSS
百岁如流富贵冷灰
17年毕业,一直从事前端开发,有小程序开发经验,react熟练工,vue开发略有接触,丰富的后端对接经验
展开
-
记录一个flex布局下宽度溢出且不会换行的问题
最近在开发当中遇到了一个属于浏览器的bug:在flex元素下,如果子元素使用display:table并且设置宽度为100%时会出现超出flex元素的情况,并且设置flex-wrap:wrap属性也不会产生换行<div style="display: flex;"> <div>left</div> <div style="flex: 1;display: table;width: 100%;background: red;">righ原创 2020-09-17 20:33:18 · 3996 阅读 · 0 评论 -
关于在less中使用calc失效的问题
最近自己也是换了一份工作,开始从事vue的开发,之后也会记录一些自己vue方面遇到的一些问题进入正题:最近在开发当中遇到了一个问题:当我在less下按照常规的方法使用calc属性的时候,发现calc计算有很大的误差:这是我书写的样式:最终渲染出来的样式:原因:从数值上看,px也被解析成%进行了运算,这个的原因是calc属性在less下解析时会忽略运算的单位,统一使用第一个数值的单位(注意:很多文章上写的是按照百分比处理,这个说法是不正确的,例如将100%换为100em,最终的结果是2原创 2020-08-14 17:58:19 · 1592 阅读 · 0 评论 -
详细了解flex布局的相关属性
flex布局相信大家已经不陌生了,越来越多的人在开发中使用flex进行自适应的布局。但是呢,有些flex的属性代表什么意思你真的了解吗?下面我就着重说一说不常用的flex属性吧(可能只是我个人不常用 (⊙﹏⊙))包含元素设置display: inline-flex顾名思义包含元素即包含inline的特性也包含flex的特性:inline-flex:flex:aline-items:baseline/flex-start/flex-end常用的center就不多说了,fle..原创 2020-07-05 16:25:40 · 1650 阅读 · 0 评论 -
关于box-shadow的一些深入使用
在以往的开发中 ‘box-shadow’这样的属性是经常使用的,相信大家都不陌生但是最近的开发中遇到了这样的需求:就是不规则形状的阴影,这种需要怎么实现呢我的思路是:将一个正方形定位到左侧中间并且旋转,然后设置阴影然后是这样可以看出右侧也有阴影产生这个明显不符合要求(box-shadow: 0px 0px 3pxrgba(0, 0, 0, 0.1))查询资料后发现:box-s...原创 2020-01-19 18:29:08 · 362 阅读 · 0 评论 -
记录两种使用CSS实现等高布局的方法
最近开发遇到的问题:一行内的两个元素需要动态的等高,即左右两个div的高度是不确定的,但是需要等高排列当时考虑了好久,网上也有很多的解决方案,但大多都是固定高度的,不太符合实际的要求,于是在此记录一下:1.使用flex布局的自适应高度(推荐)<div style="display:flex;width: 200px;"> <div style="flex:1...原创 2019-12-10 18:34:02 · 454 阅读 · 0 评论