技巧源于对 writing-mode 的把控，全程不需要JS，先通过 vertical-lr 改成竖列的从左到右排序，再通过子项的 horizontal-tb 把数列内容纠正成横排的从上到下叠放（这是HTML的div叠放规则） ，代码如下 <!DOCTYPE html> ...
如何巧用 margin的来进行 flex 布局的右对齐。 示例HTML： <nav> <ul> <li><a href=/about>About</a> <li><a href=/projects>Projects</a> <li><a href=/in ...
懒人得以进步。 代码不是越多就越屌，贵在精用。 :not() 的精简 not() 的妙用，去除繁琐的定义 last-child 或 first-child 。 比如一个列表，需要第一个和最后一个不变的颜色保持不变，其他的变成红色背景。 普通写法： #exa ...
通过 js 控制打印指定 div ，有几种常见办法。 1、通过替换网页原内容为 div 内容 function printdiv(obj) { var headstr = '<meta charset="utf-8" />'; // 预防中文字符乱码 var printData = document.getElementById(o ...
CSS 控制打印样式累总。 1、专属样式 CSS 有专属于打印的样式表达，通过媒体查询 @media print{ ... }表示样式在打印时才起作用，控制打印页面的有 @page { ... } 。 2、页面大小 默认的，size 的默认值为 auto ； 定义 ...
序：CSS 选择器在不断进化中，说不定某一天能飞上天。 CSS 1 ： Element 选择器 对于 Element「标签」选择器最为熟悉不过了。 如 div 标签 <div> ... </div> 例：div{ ... }。 注：不建议这样直 ...
前段时间的项目用到伪类三角形的阴影，想了及几种办法，考虑到对于兼容性要求不太高的项目。最后选择用 CSS3 中的 filter:drop-shadow 。发现还蛮配的。 伪类的阴影，如果考虑到兼容性最低兼容到ie9，则用 box-shadow + 图片大法做阴影 ...
flex 布局，是一个广义的说法，不能说：加了 display:flex 就能够实现响应式布局，以 flex 属性为中心，还有一套全家桶等着你，家庭成员有：align-content、align-items、flex( flex-grow flex-shrink flex-basis )、flex-flow ( flex- ...
趁着空余时间，回顾总结一下常用的 display 属性，总结中或许能给予你些许帮助。 block 宽度问题： 宽度以外空余地方，仍然占据，一行 对齐问题： 上级 text-align 无法作用于区块 当前 margin: auto 可以令区块居中 vertical-alig ...
CSS 选择器中的 element1 ~ element2 作用：同一父级元素下，选中当前 元素1 后面的所有 元素 2 ，元素 2 无需紧随 元素1。 如图示例： id 为 pare 的子级有 h1 p div 三个标签。指定 h1 后面所有 p 标签变绿了，而位于前面的不会变绿 ...