IceHoneyIceHoney
IceHoney

css

CSS技巧和工作总结

css

工作确实是两点一线的生活。而且偶尔还加班，不过也算是正规的做一些东西了，个人成长来说也还不错。很多稍微有深度的知识也有所接触。于是想写点东西记录下自己的成长。以后再回顾的时候也算有所收获。

CSS 层叠水平 ​

CSS 的层叠看起来很简单，可以通过z-index来进行调整，但是实际上并没有那么简单。层叠水平总共有 7 阶，我们实际在使用中的时候要充分考虑。

  1. 形成堆叠上下文环境的元素的背景与边框
  2. 拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）
  3. 正常流式布局，非 inline-block，无 position 定位（static 除外）的子元素
  4. 无 position 定位（static 除外）的 float 浮动元素
  5. 正常流式布局， inline-block 元素，无 position 定位（static 除外）的子元素（包括 display:table 和 display:inline ）
  6. 拥有 z-index:0 的子堆叠上下文元素
  7. 拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

这里有个重点概念是堆叠上下文，那么元素是如何形成堆叠上下文呢？

  1. 根元素 (HTML)
  2. z-index 值不为 "auto"的 绝对/相对定位
  3. 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex
  4. opacity 属性值小于 1 的元素
  5. transform 属性值不为 "none"的元素
  6. mix-blend-mode 属性值不为 "normal"的元素
  7. filter 值不为“none”的元素
  8. perspective 值不为“none”的元素
  9. isolation 属性被设置为 "isolate"的元素
  10. position: fixed
  11. 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
  12. -webkit-overflow-scrolling 属性被设置 "touch"的元素

如果符合上面规则，会形成层叠上下文。层叠上下文的背景一定是最下面的，想要通过z-index来调整浮动在其他元素上方是不可能的。

DOM Ready ​

如果巧妙的在 DOM 加载完成之后来执行 JS 呢，最简单的方法是把 JS 放在 body 的最下方。但这样处理有些麻烦，最简单的方法是使用setTimeout方法，设置延迟时间为 0。延迟时间为 0 并不意味着这段代码会立即执行，而是等到所有 JS 加载和执行完毕，DOM 也加载完毕的时候才执行。

Safari Scroll ​

手机版 Safari 在滑动的时候如果有动画执行，会导致整个页面空白。当滑动结束的时候才会渲染。我们不得不采用给所有元素添加transform: translate3d(0,0,0)属性， 来使 Safari 强制使用 GPU 加速。

CSS 动画性能加速 ​

CSS 动画尽量使用transform: translate3d(0,0,0)来实现，因为 ransform3d api 会强制开启 GPU 加速提高页面的流畅度。在公司的项目中，从使用background-position进行动画效果换成transform之后，动画流畅度得到了显著的改善。

参考：

Stack Overflow

The stacking context

层叠顺序（stacking level）与堆栈上下文（stacking context）知多少？

CSS笔记和杂谈

css

这应该是最长的一次博客断更吧。。。因为年后辞职加上来日本工作的原因。导致很长时间都没有更新自己的博客了。很是惭愧，本来定的目标就是每月一篇很简单的任务。但居然空档了这么长时间，这就是正所谓的生于忧患死于安乐吧。找到了工作就松懈了，所以今天又重新捡起来继续写。公司的新人课题是做一个简单的 CMS 网站，也算重新复习了一下网页制作吧，因为一直在写 JS 的项目，基本的 HTML 和 CSS 的设计都有点生疏了。。。

CSS 一行多列设计 ​

这是一个最基本的设计布局。在一行上有多列的内容，最简单的例子是导航栏。HTML 的大致结构是这样的：

html
<ul>
  <li>HTML/CSS</li>
  <li>JavaScript</li>
  <li>CMS</li>
</ul>

默认的话，这三列内容是向下排列的，如何让它们横着排列呢？这时候有三种解决方案：第一，是采用float使得所有的li列表浮动表示在一行。但这时候记得使用clear去清除浮动属性。这种设计方案的好处是兼容性强，但新手容易处理不好float属性对布局的影响和忘记清除float属性。第二种解决方案是对li使用display:inline-block;使得li并排一行，这种方案的好处是容易理解和兼容性高。但如果li之间的 HTML 源代码有回车的话会导致相邻的li有很细微的间距。所以对像素级别的设计方案来说并不推荐。第三种方案是使用flex布局。这是目前来说最灵活的一种布局方案了，特别对于多屏幕自适应来说非常友好。但是对浏览器版本要求比较高，IE11 以下都不支持。所以这个简单的布局方案要根据自己的业务情况进行具体选择，并没有银弹。

子 DIV 溢出方案 ​

有些时候根据需求我们设计的子 DIV 要比父 DIV 超出一定范围，这时候要怎么设计才好呢？有时候会想到利用position: relative;来改变子 DIV 的文档流进行实现。但这种方式实在是不推荐，因为会影响父 DIV 在页面的布局。我建议的解决方案是使用margin来进行溢出，margin不仅可以输入正数，也可以使用负数。当使用负数的时候就会朝反方向扩展达到溢出的目的。

多行文字垂直居中 ​

实际开发中，我们经常会遇到这种常见的需求，对于一行文字来说，很简单，我们只要把height和line-height设置成一样的高度就可以了。但是对于多行文字的话，我们还是需要一些技巧的。首先，我们需要在文字外面再套一层元素进行设置。HTML 结构大致是这样：

html
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

然后我们在div上设置height和line-height一样高，使得span元素保持垂直居中。然后再修改span元素的 CSS 属性，设置正常的 line-height 和display: inline-block;以及vertical-align: middle;。

参考 ​

remove-whitespace-inline-block

display

Vertical align multiple lines of text

CSS使用box-shadow和border-radius的妙用

css

使用 CSS 画出一个圆角矩形很简单，但是要画出一个和圆角接近平行的月牙就是需要一点技巧了。 例如下面这个图片：

css

“首页”左边的那个白色和圆角平行的弧形就是我们要用 CSS 设计实现的。

先使用 box-shadow 制造一个长条： ​

css
box-shadow: 10px 0 0 0 rgba(245, 245, 245, 0.7);

效果如下图：

css

再使用 border-radius 使这个长条变成弧形： ​

css
border-radius: 0 0 100px 0;

效果如下图：

css

最后再嵌套一个 DIV 截取我们所需要的部分 ​

css
overflow: hidden;

css

这样就达到我们一开始的图片效果了～

示例代码：点我点我