css
关注
分享
扫一扫
K3v
这个作者很懒，什么都没留下…
展开
-
【CSS】不定高度的弹框水平垂直居中
why 对于特定的高度的弹框这个问题很好处理，计算好弹框离父元素的的高度，使用margin处理即可。 但是为了通用性，不必每一次都去计算，有没有通用一点的方法呢，是有的, 通过vertical-aign来做。 css 代码： .container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* for IE8 */ background: url(data:image/原创 2020-07-25 10:54:13 · 970 阅读 · 0 评论 -
【css】多行多列流式布局
要达到这种效果，自动换行，并且左右等距离对齐：方法一，使用grid布局： .container-1 { padding: 20px; width: 800px; border: 1px solid black; margin: 0 auto; margin-bottom: 50px; ...原创 2019-11-09 15:41:41 · 4769 阅读 · 0 评论 -
【CSS】关于content
content实际上我们大部分情况已经用过了，今天阅读《css权威指南》发现有很多之前不知道的点，现加以记录。 content只适用于:before 和:after这两个伪元素。MDN 上面关于content的语法解释如下：Formal syntax: normal | none | [ <string> | <uri> | <counter> | a...原创 2017-05-03 00:31:39 · 556 阅读 · 0 评论 -
【CSS】关于background-position
background-position 的取值 有几种情况（在此之前请先去阅读关于background-origin的信息）关键字： center top right bottom left（可以用百分比转换)长度值： 这个长度值解释为 从内边距区左上角的偏移。便宜点是背景图像的左上角。 background-position: 20px 30px;说明背景图像的左上角这个点...原创 2017-04-03 18:02:16 · 703 阅读 · 0 评论 -
【CSS】css grid 布局
css grid布局出来很久了，可以翻译成栅栏布局，或者网格布局，看到了一个很好的应用，所以写下此篇基础教程。比如我们要达到下面这样一个效果要怎么做？图中有16个元素，我们要其自适应宽度，按照我们以前的想法肯定是直接通过media，媒体查询来完成这个，但是代码肯定不会简洁，但是我们通过grid 布局只需要几行代码! 代码长这样：CSS：#container { display: grid; ...原创 2018-05-14 23:59:56 · 651 阅读 · 0 评论 -
【CSS】使用css绘制一个沙漏
现在有一个需求，绘制一个沙漏，像下面这样：其实如果单纯绘制这样一个 “静态”的沙漏，很简单，因为我们都知道怎么画三角形，使用border即可做到，黑边我们在外面增加一个div即可。或者给一个上下边框为黑色2px的div增加一个::after or ::before伪元素即可。但是我们需要这个沙漏是“动态”的，比如说我们可以控制并且显示它的进度，就像下面这样：当然仍然是比较简陋的，原创 2018-06-11 11:55:49 · 2645 阅读 · 0 评论 -
【svg】svg动画
如果你之前没有接触过svg，可以看下这个简略图： https://www.processon.com/view/link/5ae205a2e4b0411f64d1f65a最近在看svg，发现svg和css animation结合起来，能够做一些很好玩儿的动画效果。比如看这个： 其实这个怎么做的呢？我们继续往下看我们知道stroke为描边，可以暂且理解为border，关键的是...原创 2018-07-31 23:16:13 · 2161 阅读 · 0 评论 -
【css】div父元素根据子元素高度自适应高度
两种情况(无特殊说明子元素都是指代父元素的第一级子元素)第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题.第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高度为０,因为float浮动元素脱离了正常的文档流,父元素相当于没有了这两个儿子！解决这个问题的根源就是清除浮动：1 , 给父节点增加样式overflow:hidden或者over...转载 2016-04-24 14:34:04 · 19202 阅读 · 0 评论 -
【CSS】css特殊性-优先级-权重
注：文章来源：《css权威指南》 第三章。 部分未予记录css选择器可以用多种方式去选择元素，实际上一个元素可以由使用两个或者多个规则来匹配，每个规则都有各自的选择器。请看例子CSS: h1 {color: red;} body h1 {color: green;} h2.grade {color: purple;} h2 {color: ...原创 2017-03-05 10:05:51 · 677 阅读 · 0 评论 -
【CSS 】动画animation
作为博主简单记录： 深入学习请查看文末参考资料前面有提到过过渡效果css transition,实际上过渡效果也可以算作一种动画,这是这种动画是单次的不重复的，而且过渡中我们可能需要其他精细操作办不到，这个时候我们需要用到animation了。 举个简单的例子:<!DOCTYPE html><html><head><style> ...原创 2017-01-01 17:25:11 · 605 阅读 · 0 评论 -
css的z-index属性
当我们设置css 中的z-index 的时候 想使这个元素浮动与其他元素之上。但是查看w3c的文档：定义和用法z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释：元素可拥有负的 z-index 属性值。注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！必须原创 2014-12-24 10:44:02 · 549 阅读 · 0 评论 -
推荐几个优秀的UI素材网站！做网站不发愁了。
转载链接：http://blog.youkuaiyun.com/u013628152/article/details/42441175（1）优设网http://www.uisdc.com/（2）站酷网http://www.zcool.com.cn/（3）千图网http://www.58pic.com/（4）懒人图库http://www.lanrentuku.com/（5）UiMaker转载 2015-01-06 22:02:37 · 765 阅读 · 0 评论 -
【CSS基础】琐碎记录<二>
Tips: 大部分都摘自w3c一,关于选择器后代选择器,什么是后代选择器,h1标签所有子孙元素为em的都会起效果:h1 em {color:red;} 子元素选择器,什么是子元素选择器 ,h1标签下面的子元素为em的元素.请注意只是儿子元素,孙子元素以及更下层的h1 > em {color:red;} >号两边可以有空格符 相邻兄弟选原创 2015-03-12 13:04:19 · 485 阅读 · 0 评论 -
【CSS基础】琐碎记录<一>
近日被虐得不行,全栈式工程师可没有那么容易.css js jquery 这些看似简单,要把做到极致真的需要平时多加修炼。被面试官的一个div的宽度指那几部分给难住了.虽然平时都有在写div代码,但是真的不确定..当时心里面万只羊驼在奔腾啊 当时不是说面试官,是气自己没有搞好.Tips:这些东西都摘录自W3C...我做个记录能够帮助到人,我很开心,帮不到我也无能为力了首先得了解盒子模型(原创 2015-03-10 16:57:09 · 502 阅读 · 0 评论 -
【CSS基础】琐碎记录<三>
关于属性 vertical-align 今天出现一个问题，table里面的一个单元格有一个text类型的input,然后有一张图片.我搞了很久，图片不能垂直居中，我把input去掉，发现自适应又居中了后来发现vertical-align属性.css基础···· 以下内容来自w3c官方解释：vertical-align属性设置元素的垂直对齐方式原创 2015-05-06 21:56:18 · 396 阅读 · 0 评论 -
让div在浏览器可视范围居中
我们这里讨论的是在可视范围居中，其他情况请朋友们自行查找资料。这里我们要用到定位,绝对布局，html代码如下,在页面载入的时候或者手动控制的时候： $('#loginContent').css({ //display:'block', //zIndex:400, position: 'absolute', left: (document.bo转载 2015-02-28 09:55:53 · 3495 阅读 · 0 评论 -
【CSS基础】css3 transition过渡属性<四>
transition 过渡，顾名思义就是说一种变化是循序渐进的走过去，而不是瞬间变化(博主的烂理解)。 请查看mdn的解释： transition实际上 transition 是 简写，它包含4个属性 - transition-property - transition-duration - transition-timing-function - transition-dela原创 2016-12-01 00:37:13 · 3446 阅读 · 0 评论 -
【CSS】css三角提示框
现在我们有一个需求，就是三角提示框 像这样： 注意这个三角导航，我们需要达到这样的效果。第一种办法：现在有两种方案，第一种需要用到css3的transform。这种方式我感觉最简单，用伪元素实现，但是记得要给wrapper元素增加position 为relative 和 增加一个background-color。我们直接上代码： .second-triang...原创 2017-01-08 20:17:28 · 791 阅读 · 0 评论