![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css笔记
css一些知识点总结
SuperHaker~
这个作者很懒,什么都没留下…
展开
-
实现卡片的展开缩放动画
原理,外层包裹一个元素,子元素分别是展开和收起的元素,然后对展开的元素添加动画,动画内容是随时间变化,将卡片的transform:rotateX属性进行调整,因为改变的是子元素的旋转,父元素高度并没变,不会影响列表大体布局。原创 2024-06-12 21:13:52 · 211 阅读 · 0 评论 -
css字体渐变
background: linear-gradient(99.65deg, #ff5959 -3.13%, #9069ff 35.06%);margin-right: 12px;-webkit-background-clip: text;-webkit-text-fill-color: transparent;原创 2023-11-16 17:15:12 · 95 阅读 · 0 评论 -
css 定位与布局
文档流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。原创 2023-04-06 14:48:31 · 77 阅读 · 0 评论 -
css的继承
总而言之:一些设置在父元素上的css属性是可以被子元素继承的,比如 color、font-size,每个在里面的元素也都会有相同的属性,除非你直接在元素上设置属性。font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母。font-stretch:允许你使文字变宽或变窄。font-size-adjust:为某个元素规定一个 aspect 值。均会被转换为大写,但是所有使用小型大写字体的字母与其余文本。text-indent:文本缩进。:规定元素的字体系列。:规定文本的书写方向。原创 2023-03-17 11:30:15 · 276 阅读 · 0 评论 -
css层叠和css选择器优先级
下面的例子中,我们有两个关于 h1 的规则。优先级虽然我们考虑的是选择器,以及应用在选中对象上的规则,但不会覆盖所有规则,只有相同的属性。不同类型的选择器有不同的分数值,把这些分数相加就得到特定选择器的权重,然后就可以进行匹配。警告: 在进行计算时不允许进行进位,例如,20 个类选择器仅仅意味着 20 个十位,而不能视为 两个百位,也就是说,无论多少个类选择器的权重叠加,都不会超过一个 ID 选择器.一个类选择器稍微具体点,它会选择该页面中有特定 class 属性值的元素,所以它的优先级就要高一点。原创 2023-03-17 11:19:02 · 89 阅读 · 0 评论 -
px,rem,em,vw,vh区别
的元素是相对于已定位的父元素,即上一个有非static的position属性的上级元素;的元素是相对于ViewPort(可视窗口)vw是相对视口(viewport)的宽度而定的,长度等于视口宽度的1/100。vh是相对视口(viewport)的高度而定的,长度等于视口高度的1/100。假如浏览器的宽度为200px,那么1vw就等于2px(200px/100)假如浏览器的高度为500px,那么1vh就等于5px(500px/100)1、对于普通定位元素就是我们理解的父元素。一般来说就是相对于父元素。原创 2023-03-17 09:26:53 · 252 阅读 · 0 评论 -
css基础知识
属性(property)是您希望设置的样式属性(style attribute)。属性和值被冒号分开。CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明;CSS声明总是以分号;CSS注释以 /* 开始, 以 */ 结束。每条声明由一个属性和一个值组成。原创 2023-03-17 09:34:16 · 36 阅读 · 0 评论 -
css选择器和伪类
CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素,叫做“选择器的对象”。原创 2023-03-17 10:58:40 · 112 阅读 · 0 评论