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