CSS
关注
分享
扫一扫
文章平均质量分 72
angulaer
这个作者很懒，什么都没留下…
展开
-
css实现跳动的心
先看效果图下面让我们开始吧先搞个div块吧<div class="box"></div>下面我们需要为div块做一些css，让其变成心型.box { position: relative; width: 120px; height: 120px; background: #ff0000; margin: 200px auto; /* 盒子旋转45度 */ transform: rotat原创 2021-09-16 14:40:04 · 1849 阅读 · 0 评论 -
CSS实现点击改变元素背景色
可通过使用css伪类实现点击元素变色的效果，两个伪类是:active, :focus:active:active选择器用于选择活动链接。当在一个链接上点击时，它就会成为活动的（激活的），:active选择器适用于所有元素，不仅限于链接a元素:focus:focus 选择器用于选取获得焦点的元素。仅接收键盘事件或其他用户输入的元素允许 :focus 选择器。由于上面的特性，如果想实现点击时变色效果，有以下两种方法，两者区别在:active，元素被点击时变色，但颜色在点击后消失:f原创 2021-08-27 18:08:21 · 7420 阅读 · 3 评论 -
z-index细解：一个z-index的值很大为何却在一个很小的值下面？
z-index看似很简单，其实其中还是有不少的探究之处！css为盒模型的布局提供了三种不同的定位方案正常文档流浮动定位最后一种方案（特指绝对定位）将会把元素从正常文档流中完全移走，其最终的落脚点将取决于开发者。通过设置 top，left，bottom 和 right 的值，你可以在二维空间中对元素进行定位，但 CSS 同时也允许你使用 z-index 把它放置在三维空间中。表面看起来，z-index 似乎是一个很简单的属性，你给它设置哪个值，元素就会位于 y 轴的哪个位置，就这样。但它实际原创 2021-03-17 16:26:13 · 10453 阅读 · 7 评论 -
element组件中关于竖直分割线的样式调整
用F12查看页面样式之后，发现是下面这个样式在起作用然后修改成符合自己的样式即可.el-divider--vertical { height: 2em; margin-left: 20px;}原创 2021-03-16 11:23:51 · 5084 阅读 · 0 评论 -
解决align-items失效，无法居中问题
在做flex布局的时候，有时候你可能会遇到align-items失效的问题，那么下面来说一下css #main{ display: flex; justify-content: center; align-items: center; } #content{ width: 100px; height: 100px; background-color: #1890FF; }此时align-items失效，只能水平居中，.原创 2020-08-29 17:17:39 · 20476 阅读 · 11 评论 -
最详细完整的flex弹性布局
初了解在学习弹性布局之前首先就要明白其概念flex 就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性任何一个容器都可以指定为flex布局.box{ display: flex;}行内元素当然也可以使用flex布局.box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: flex;}原创 2020-08-12 00:13:25 · 50544 阅读 · 35 评论 -
CSS实现3D书本效果
话不多说，先来看一下效果图源代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style原创 2020-06-10 14:41:57 · 4673 阅读 · 21 评论 -
当面试官问起CSS布局之水平垂直居中时~~
最近面试的时候，面试官问到了CSS水平垂直居中布局的方式，对于刚入前端没多久的我，无疑是一脸懵逼，闲了赶紧查阅资料分析一波，给各位分享一下，避免落坑。首先先说明一下html和一些基础css样式，下面就不再赘述！html<body> <div class="div1"> <div class="box size">垂直水平居中</div&g...原创 2020-04-11 01:12:20 · 9110 阅读 · 80 评论 -
彻底弄懂CSS选择器以及优先级
CSS选择器优先级得关系为：内联>ID选择器>类选择器>标签选择器。浏览器中也具有优先级得算法，浏览器中得优先级是由A、B、C、D的值来决定的，计算规则如下：如果存在内联样式，那么A=1,否则A=0；B的值为ID选择器出现的次数C的值为类选择器和属性选择器和伪类出现的总次数D的值为标签选择器和伪元素出现的总次数css基本选择器标签选择器：匹配所有使用p标签...原创 2020-04-05 01:28:22 · 1205 阅读 · 34 评论