2018年10月 存档

写给自己看的display: flex布局教程

2018年10月28日,星期日

display:flex布局

本文详尽介绍了display:flex布局的各个属性,最大的优点在于所有flex相关属性值的样式表现都是实时渲染的,点击不同的属性值,就可以立即实时看到不同的布局效果,非常直观。同时,很多属性的规则描述要比现有的很多文章介绍的要更详尽,对于初学者一定是一个很不错的学习教程。

阅读全文…

CSS margin-inline和margin-block区别是什么?

2018年10月26日,星期五

CSS margin-inline和margin-block都属于CSS逻辑属性,是CSS中比较新的一个概念,其行为表现具有逻辑特性, margin-inline和margin-block是N多CSS逻辑属性中的2个,本文以margin-inline和margin-block为代表介绍CSS逻辑属性的一些布局表现,同时演示direction和writing-mode这些属性是如何让这些CSS属性表现出“逻辑”的。

有demo有截图有必要的源代码展示,希望本文内容能够对您的学习有所帮助。

阅读全文…

数学标记语言MathML简介、工具及兼容

2018年10月24日,星期三

MathML头图缩略图

MathML指“数学标记语言”,是XML语言的一个子集,用来在web网页,甚至部分软件中显示数学公式。

简言之,就是使用特殊的类似HTML的标记在网页中显示数学公式。因为有些数学公式很复杂,普通HTML根本没法驾驭,然而MathML本身也很复杂,真要手写那真要人命了,好在有很棒的工具可以帮助我们……

阅读全文…

有人考了我一道CSS题目

2018年10月21日,星期日

考我一道CSS题目

前段时间@快叫我韩大人私信我考了我下面这个CSS题目:在不改变HTML结构,同时保留元素高度前提下,实现某一个布局效果……我觉得还挺有意思的,在征得其同意的前提下输出了这篇文章,大家若有兴趣,也可以进来看看,自己能不能实现相关需求。

文中提供了可实时编辑预览效果的demo,方便大家尝试自己思路。

阅读全文…

CSS scroll-behavior和JS scrollIntoView让页面滚动平滑

2018年10月21日,星期日

浏览器原生平滑滚动缩略图

从去年年底开始,浏览器已经开始支持的原生平滑滚动定位,CSS scroll-behavior属性和JS scrollIntoView()方法都可以。本文就将捋一捋这些平滑滚动新特性的使用方法,实际效果,以及如何在实际中应用等。一如既往,丰富配图,含GIF演示和视频截屏,必要的源代码展示和详尽的demo,希望本文内容能够对您的学习有所帮助。

阅读全文…

CSS :visited伪类选择器隐秘往事回忆录

2018年10月12日,星期五

头图

CSS :visited伪类选择器你以为很简单,麻鸭,估计是所有伪类选择器里面最不简单,最怪异的了。很多奇怪的特性你想都想不到,进来看看,一定会有别样的收获的。

阅读全文…

搞懂SVG/Canvas中nonzero和evenodd填充规则

2018年10月3日,星期三

nonzero evenodd缩略图

只要是路径填充,都有两种规则,nonzero和evenodd,无论是SVG中的路径填充,还是Canvas中的路径填充,如果还有其他和路径相关的技术(甚至设计软件),也离不开这两种填充规则。换句胡说,这是超越各种语言,普世通用的技能点。下面,看看我能不能用足够精简的语言,尽可能让大家都搞懂这两种路径填充规则。

阅读全文…