随笔分类 -  HTML+CSS

上一页 1 2
用animation的steps属性制作帧动画
摘要：昨天火急火燎地接到一个任务，说是要做一个掷骰子的游戏，关于掷骰子期间的过渡动画，我本来是想用css 3d制作一个立体的骰子，然后叫UI给6张平面图贴上去。再用translate3d来操作。然而UI考虑得十分周到，直接就给了我一个雪碧图，并告诉我在photoshop中可以用帧动画来播放几张图片，达到类 阅读全文
posted @ 2019-04-17 17:21 陌上兮月 阅读(1293) 评论(0) 推荐(1)
对requestAnimationFrame的一点理解
摘要：假设一个web页面为60fps（fps意为frame per second）,这意为着这个页面每秒钟能重新渲染60次，60帧/1000ms换算过来约为16.6ms/帧。 requestAnimationFrame的意义正在于此，此时你使用requestAnimationFrame等价于 看见了吗，这 阅读全文
posted @ 2018-10-23 16:03 陌上兮月 阅读(437) 评论(0) 推荐(0)
一些不常用但又很有用的css小tips
摘要：1.box-sizing:border-box box-sizing有三个属性：content-box(默认值) || border-box || inhreit。第一个自然不用说，比如我们设置一个div，宽度和高度都是100px，此时你给它加了padding:2px和border:1px soli 阅读全文
posted @ 2018-10-18 19:55 陌上兮月 阅读(605) 评论(0) 推荐(1)
flex布局常见用法小结
摘要：1，display：flex 这个在父容器中声明； 2，flex-direction:row / column 默认为横向，也在父容器中设置，定义flex布局的主轴方向；一条轴为主轴，那么另一条轴自然而然就是副轴； 3，flex：1 在子元素中设置，表示所有的子元素不管内容如何，其宽度和高度都完全一 阅读全文
posted @ 2018-06-21 15:28 陌上兮月 阅读(610) 评论(0) 推荐(0)
less用法小结
摘要：1，采用koala进行编译，可以实时地在vscode这样的工具中看到less到css的转换； 2，均支持/**/以及//两种形式的注释，由于后期维护是维护less，因此推荐使用后者，因为后者不会被编译； 3，less的变量必须要用@开头； 4，支持类样式的挂载，这个类可以是HTML中指明的，也可以是 阅读全文
posted @ 2018-06-13 15:11 陌上兮月 阅读(263) 评论(0) 推荐(0)
用canvas画一个等腰三角形
摘要：上图是代码，注意，宽高只有在canvas标签内部设置宽高，绘制的路径显示才是正常的；效果如下： 阅读全文
posted @ 2018-03-23 10:14 陌上兮月 阅读(684) 评论(0) 推荐(0)
三种隐藏元素方法的区别
摘要：这三种方法分别是：display:none、visibility:hidden、opacity:0; display:none 元素在页面上将消失，不占据页面空间，会导致浏览器的回流与重绘,不能响应交互类事件； visibility:hidden 元素在页面占据的空间不变，所以它只会导致浏览器重绘而 阅读全文
posted @ 2018-03-22 17:22 陌上兮月 阅读(831) 评论(0) 推荐(0)
CSS有哪些属性是可以继承的？
摘要：个人总结的，虽然不全，但是常见： 1、字体系列属性 font-family：字体系列 font-weight：字体的粗细 font-size：字体的大小 font-style：字体的风格 2、文本系列属性 text-indent：文本缩进 text-align：文本水平对齐 line-height： 阅读全文
posted @ 2018-03-22 16:22 陌上兮月 阅读(15678) 评论(0) 推荐(0)
实现未知元素垂直居中的方法
摘要：如果我们一个有一个元素，并不知道宽高，要让它相对于父元素垂直居中，应该如何实现呢？我这里总结了两种常用方法，供大家参考。 1，利用弹性盒子模型 首先呢，让父级容器display:flex;然后子元素align-self:center即可实现垂直居中。 当然如果要让所有的子元素都居中，可以直接在父元素 阅读全文
posted @ 2018-03-22 15:55 陌上兮月 阅读(260) 评论(0) 推荐(0)
css自适应布局之“圣杯双飞翼”
摘要：首先，这个这么扯淡又装逼的名字不知道是谁起的，大意就是说：中间的内容随着浏览器宽度的不同，进行宽度自适应操作，而两边的内容固定宽度。 来，上个代码演示一下： 然后出来的效果是这样的： 这个大块头的中间部分确实可以随着浏览窗口宽度的改变而改变： 但是，卧槽，很猎奇啊有木有？！中间的主体叉在两侧内容上方 阅读全文
posted @ 2018-03-15 21:33 陌上兮月 阅读(388) 评论(0) 推荐(0)
BFC是个什么概念？
摘要：在布局中一般就三种定位方式：普通流、浮动、绝对定位。 BFC，译过来叫作“块级格式化上下文”，听起来贼高大上，它属于普通流的一种。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部的布局。 假如我在body里面写两个div如下： 给他们都添加如下样 阅读全文
posted @ 2018-03-15 20:02 陌上兮月 阅读(278) 评论(0) 推荐(0)
几种常用的清除浮动影响的方法
摘要：这是css里面一个比较常见的操作，现在稍微小小地总结一下，虽然没什么技术含量，但也可以作为一种复习。 1，给父级元素添加overflow:hidden可以清除浮动； 2，给父级元素添加after伪类，并定义其样式如下： 这种写法比较高大上，推荐使用； 3，在父容器的末尾添加一个毫无意义的子标签，然后 阅读全文
posted @ 2018-03-15 19:13 陌上兮月 阅读(457) 评论(0) 推荐(2)
XSS和CSRF
摘要：说到XSS这个问题，XSS又叫跨站请求攻击，大意是说比如我发表了一篇博客，然后我在自己博客里面插入了一段恶意的js脚本代码，这段代码用于获取当前用户的cookie，并发送到我的服务器，当你们在看到这篇文章的时候，你们的cookie就已经被我盗了。 当然，善良的我是不会做这种事的，我只是小小地搞了一波 阅读全文
posted @ 2018-03-15 12:35 陌上兮月 阅读(246) 评论(0) 推荐(0)
Canvas的drawImage方法使用
摘要：canvas是HTML5中的一个新元素，这个元素可以通过JavaScript用来绘制图形。例如可以用它来画图、合成图象、做一些动画等。 通常呢，我们在canvas上画图的方法是使用Image对象。基本上一些典型的图片格式(png，jpg，gif等都没有问题。好，那接下来我们就来使用它。 这是在我一个 阅读全文
posted @ 2018-02-24 20:22 陌上兮月 阅读(21410) 评论(1) 推荐(1)
浏览器内核趣对话
摘要：Chrome:老哥我当初开始搞的时候实力不够，只能偷苹果的WebKit过来用着先,但现在翅膀硬了，想自己开发一款blink内核，尽早摆脱苹果的影子； Safari:独一无二的高贵，WebKit，我的原创发明！ FireFox:原创Gecko,独一无二，爵士人生！ Opera:我唯谷歌爹马首是瞻，现在 阅读全文
posted @ 2018-02-04 21:09 陌上兮月 阅读(277) 评论(1) 推荐(0)
block,inline,inline-block的区别
摘要：最近正在复习，紧张地准备几天后的笔试，然后刚好看到这个地方。 block：块级元素，会换行，如div,p,h1~h6,table这些，可以设置宽高； inline:行内元素，不换行，挤在一行显示，如span,a,i,em,strong,mark,input,button之类,不能设置宽高。 inli 阅读全文
posted @ 2018-02-02 17:37 陌上兮月 阅读(400) 评论(0) 推荐(0)
关于CSS的外边距合并问题
摘要：首先，需要明确的是只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。 而在普通文档流中，这又分两种情况，分别是父子元素之间和相邻元素之间。 先把代码贴上，引用一张领袖的图片，在两个相邻元素之间，把第一张图片的下外边距和第二张图片的上外边距分别设置为10 阅读全文
posted @ 2018-02-01 15:57 陌上兮月 阅读(339) 评论(0) 推荐(0)

上一页 1 2