随笔分类 -  CSS

摘要:1. 首先,我们先来看看下面这段代码的效果,设置div块的宽、高,以及四周的boder,其中,四个border颜色不同,得到的结果如下图所示: <style> .triangle { width: 100px; height: 100px; border-left: 100px solid gree 阅读全文
posted @ 2021-07-27 15:24 二森 阅读(292) 评论(0) 推荐(0)
摘要:一个炫酷的网页离不开css的transform、transition、animation三个属性,之前一直没有涉及到这块内容,刚好最近要做一个相关东西,趁此机会好好学一学这三个属性。 一、功能 实现元素的平移、旋转、缩放或倾斜。 二、 实现条件 只能转换由盒模型定位的元素。 三、 基本语法 tran 阅读全文
posted @ 2021-07-05 11:25 二森 阅读(2121) 评论(2) 推荐(0)
摘要:本篇是我的碎碎念,感觉价值不太大 需求是这样的,如下图所示,侧边栏是可拖动的,页面刚加载出来时,侧边菜单比较窄,随着拖动,要逐渐显示未显示出来的字。 我一开始是想着,实时计算侧边的宽度,除以字体的大小,得到能够显示出来的字数。 然后不知怎得,脑子一灵光,直接用 overflow: hidden 不就 阅读全文
posted @ 2021-06-16 16:51 二森 阅读(107) 评论(0) 推荐(0)
摘要:提起盒子模型,我想无论是对于一个前端资深开发人员还是前端入门开发人员来说都不陌生,这是CSS最基础的知识。 但是惭愧地说,我之前理解的盒子模型,只是文字上的理解。我知道定义一个元素的宽度和高度时,设置的仅仅是内容(content)区域,也知道内边距、外边距、边框,但是都没有动手尝试过…之前没想着好好 阅读全文
posted @ 2021-06-02 17:00 二森 阅读(7137) 评论(0) 推荐(0)
摘要:###padding中的负值 padding不支持负值!!!(仔细想一想,内边距确实没必要设置负值) 如下图,如果给padding设置了负值,则显示该属性无效。 ###margin中的负值(转自:https://www.cnblogs.com/xiaohuochai/p/5314289.html#a 阅读全文
posted @ 2021-06-02 16:34 二森 阅读(4609) 评论(0) 推荐(1)