css
文章平均质量分 70
FuChenRenShen
喜欢git/react(hooks)/css,欢迎讨论
展开
-
关于背景图替换等实现有感
引子:好久没登录掘金了,昨天登录掘金的时候,才发现登录框的有趣之处:点击了密码框时,框上的熊猫图被替换成了闭眼状态,研究了源码之后,发现是对背景图做了display的替换,但是个人认为,这触发了元素的回流,因为是3个背景图的不断替换,碰巧个人灵光一现,之前看过的例子油然而出,总而言之,这不就是个活生生的替换嘛?替换?多么熟悉的概念,是的,就是替换元素这个概念,那么替换元素相关的最重要概念之一是什么?当然就是content了,也即content-box作用范围,content属性!思路:由上述可以发现,我原创 2020-06-20 12:40:49 · 265 阅读 · 0 评论 -
关于实现文字分割线的一些问题
引子:最近看小说的时候发现每章之间出现了文字分割线的提示实现的效果如:------------广告是为了更多免费内容,感谢支持-------------顿时脑海中就浮现了实现方案:两个伪元素 + 文本内容就可以实现了,然而事实上真的那么简单么?那么我们就来看看吧思路:伪元素实现线条效果(前后都有),高宽啥的嗯都很好实现,加上文本内容效果轻而易举,稍微需要思考下的无非就是如何实现线条的居中,一个合适的宽度代码:html代码:<div class="wrapper原创 2020-06-06 17:10:21 · 462 阅读 · 0 评论 -
关于好用的伪类选择器:checked与兄弟选择器~
明天引用一个示例原创 2020-05-29 23:04:40 · 437 阅读 · 0 评论 -
关于inline元素与inline-block元素在width层面的区别(附加了部分block元素的区别)
inline-block/inline/block内部的原理推测原创 2020-05-29 23:02:58 · 886 阅读 · 0 评论 -
关于height: auto值与normal流渲染之间不得不说的一些相关性
原创 2020-05-29 19:16:21 · 512 阅读 · 0 评论 -
关于仿制Win10桌面日历鼠标悬浮效果有感
今天,正好在群里看见一位小伙伴在求助实现这种win10日历的效果-----> 此处暂无图片,具体效果可以去网上查阅相关效果于是,我开启了自己的实现之路: 思路:将这种边框透明的渐变效果转为一张具有这种实现的图片,这样在每次hover的时候替换图片就可以了 html实现: <div class="test"> <ul&...原创 2019-01-30 21:29:52 · 3448 阅读 · 0 评论 -
关于word-break/word-wrap/white-space的一些认知
今天正好看到一篇介绍这3个属性的文章,想想以前确实有看过一篇还不错的,只不过记不得当时区分的详情了,我想,很多人应该也和我一样,经常被这些属性给弄晕了吧,正好结合我的测试,就来献丑了,好了,话不多说: 话题要从文字的形式展开,大家应该知道咱们亚洲大多数国家的语言都是一些字(而不是字母)构成的,因此实在不好直接断掉,你想,一个文字断掉一半,那还是字么?字母就不然,断掉了至少你看下一行还能拼...原创 2019-01-14 15:59:53 · 236 阅读 · 0 评论 -
关于使用position:fixed之后附加margin/padding的一些影响细节
① 未设置(left/right/top/bottom属性)方位 -> 该元素表现为包裹性(与内联元素的效果相似,目前来说margin和padding与内联元素中的margin/padding的表现是一样的) 1.能由包裹的span撑开 2.未设置方位时,margin无效,padding却是有效的,且其百分比是按照bo...原创 2019-01-02 15:21:04 · 5647 阅读 · 0 评论 -
提问: 子容器为什么无法通过百分比计算div父容器由另外一个子元素撑开的高度
首先,记录一下我看到这个问题的出处:https://blog.csdn.net/m0_38005587/article/details/81292339好了,问题开始: 父容器未设置高度,反而由一子容器高度撑开,为什么其他子容器就是计算不了?结构不复杂,1层div,里面包上1个span,1个div:效果的话可以自己写写看看效果,总而言之,.cover元素不具备高度!查看父容器高...原创 2019-01-04 12:49:01 · 422 阅读 · 0 评论 -
关于IFC(涉及line-height、vertical-align、font-size等概念)的纠误与理解
①font-size font-size是什么?个人理解就是指定字体的大小。 细心的你会发现,实际上哪怕设置了font-size: 自定义值,字体真正显示的高度也不会是自定义值。 那这是为什么? 此时,你需要了解字体的度量,了解设计师们是怎么对字体进行定义的。详情请前往:https://zhuanlan.zhihu.com/p/25808995(注,其中...原创 2018-12-11 18:27:22 · 416 阅读 · 0 评论 -
关于inline/inline-block级别元素的margin属性以及padding属性的一些理解
总的来说,margin和padding属性作为新手入门时常用的属性,很多人都不陌生,相信理解起来都很简单,margin代表外边距,padding代表内边距,至少当时我们老师是这样讲的。虽然使用起来很简单,但是真正将其实用的又能有多少人,以padding为例,作为一个内边距,就我而言,我会在使用 背景 以及 box-sizing 的时候使用的多,padding-box所占据的无非就是一点...原创 2018-11-10 16:49:10 · 2518 阅读 · 0 评论 -
关于又见绝对定位元素受限于父容器宽度的问题
再一次的发现了这个问题,无论是绝对定位元素还是浮动元素,他们有一个特性:受限于父容器的宽度原创 2018-09-29 11:20:32 · 2881 阅读 · 0 评论 -
关于line-height的三两理解
说句实话,IFC这一块儿的东西真的有点难搞,刚开始是门儿都看不到,到后来用line-height做多了,又牵扯到了vertical-align,再到后来合起来用都实现不了效果,再到逐渐去理解IFC,现在也没理解得很明白。认识line-height和vertical-align是从垂直居中对齐开始的,垂直居中本质是什么?那就是文字的基线问题,当你正确使用了line-height和vertical...原创 2018-09-19 14:18:36 · 245 阅读 · 0 评论 -
关于浮动元素宽度自适应父容器宽度的问题
希望有朋友能帮忙解答!自己对于这块的理解:作为一个浮动元素,其应该是脱离了文档流的,而其父容器是属于文档流的,那这个浮动元素的宽度又是根据什么来计算的呢?为什么其脱离了文档流,却会去适应文档流的父容器的宽度呢?样例如下列格式:(样例参照张鑫旭老师《css世界》6.1章节魔鬼属性float 所写,当然前提是排除掉文字不换行和长串英文字符)<div class="parent">...原创 2018-08-31 18:35:28 · 4907 阅读 · 3 评论 -
关于inline-block元素所产生的三两影响及问题
设置inline-block属性既可以省略掉float所带来的影响,又能同时展示在一行,且能设置高度,效果是挺好的。但是在研究中,也发现了一些问题,而这些问题也让我绞尽脑汁的思考,但最后仍然不得甚解。首先,inline-block父元素的包裹性:众所周知,父元素设置inline-block是可以清除掉子浮动元素所带来的影响的,在这儿我所碰到的问题就是当父元素宽度缩小到小于2个元素的...原创 2018-09-02 14:18:44 · 554 阅读 · 0 评论