Skip to content

Latest commit

 

History

History
242 lines (180 loc) · 8.42 KB

CSS-Note-2.md

File metadata and controls

242 lines (180 loc) · 8.42 KB
Raw

nth-child负值

nth-child可以接受负值

/* 第 1 到 3个元素字体颜色为 red */
li:nth-child(-n+3) {
  color: red;
}

可以配合 :not()

/* 选择除前3个之外的所有元素，设置颜色为 red */
li:not(:nth-child(-n+3)) {
  color: red;
}

:nth-of-type同上用法

利用属性选择器来选择空链接

当 元素没有文本内容，但有 href 属性的时候，显示它的 href 属性：

a[href^="http"]:empty::before {
  content: attr(href);
}

图片链接无效的处理

当 img元素 src指向的地址无效时，会呈现为一种不太友好的样子，例如破碎图片的图标或者干脆什么都不显示，利用下述 css可以在图片链接失效时，呈现指定的内容：

img::before {
  /* 显示文字 */
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img::after {
  /* 显示链接 */
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

上述原理是，当 src地址无效，则显示 ::before 和 ::after的内容，否则这两个伪元素将不显示

相同属性就近覆盖原则

<div class="red blue">first</div>
<div class="blue red">second</div>
.red {
  color: red;
}
.blue {
  color: blue;
}

上述两个元素中的 字体分别是什么颜色？答案：都是 blue

原因是元素最终应用的 class是 定义在样式表最靠后位置的那个，跟元素 class属性值的书写顺序无关

提前加载体积较大图片

有些懒加载图片，需要等到我们触发了相应操作才进行加载，例如点击某个按钮，但是由于图片体积较大，或者网络信号不好，操作完毕之后，图片需要一定的时间才能完全加载完毕并显示，用户体验不好，这里有一个小技巧可应用于提前加载此图片

.box:before {
  display: none;
  content: url(https://dummyimage.com/200x200/fafff0)
}

通过这种手段，不会在页面上添加额外的 DOM元素，也不会对页面显示产生什么影响，但浏览器会提前缓存 https://dummyimage.com/200x200/fafff0，需要使用的时候可以实现即时地展现，提升用户体验

借助 wbr标签实现连续英文字符的精准换行

既能换行，又不影响单词阅读，借助 <wbr>标签，相比于直接设置 word-break:break-all 或 word-wrap:break-word更加智能

<div style="width:150px; background:#cd0000; word-wrap:break-word;">
  CanvasRenderingContext2D.globalCompositeOperation
</div>

除了 IE不支持此属性外，其他浏览器支持度很好，对于 IE浏览器，可以通过 css进行兼容

wbr:after { content: '\00200B'; }

CSS Sub-pixel

指当给元素设置一个浮点数的 css属性时，例如 width: 3.2px;，某些浏览器会将浮点数四舍五入，实际给元素设置了一个整数值

另外，canvas绘图时，可能也会出现这种问题，例如计算某个元素持续性移动的坐标，可能会得到浮点数值的坐标 (20.3, 30.8)，当给某些 api，例如 drawImage传入 这种浮点数值的时候，实际渲染出来的坐标就会变成 (20, 31)，导致元素出现抖动

解决的办法是尽量让计算出来的坐标为整数

是否阻塞文档

使用link标签引用的 css文件，会异步加载，所以不会阻塞 DOM的 解析，但是会阻塞 DOM的 渲染

多行省略

  • -webkit-line-clamp

-webkit内核浏览器的私有特性，一般移动端浏览器都是使用这种内核，所以可以使用，作为渐进增强的体验方案

需要注意的是，如果是英文，则长英文不会自动换行，需要增加额外代码：

word-wrap:break-word;
word-break:break-all;
  • 利用 float的特性
<div class="box">
  <div class="box1">腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。</div>
  <div class="box2">placeholder</div>
  <div class="box3">...更多</div>
</div>
.box {
  height: 108px;
  overflow: hidden;
}
.box1 {
  float:right;
  margin-left:-50px;
  width:100%;
  background: hsla(229, 100%, 75%, 0.5);
}
.box2 {
  float:right;
  width:50px;
  height:108px;
  color:transparent;
  background: hsla(334, 100%, 75%, 0.5);
}
.box3 {
  float:right;
  width:50px;
  height:18px;
  position: relative;
  background-color: yellowgreen;
  left: 100%;
  transform: translate(-100%,-100%);
}

iphoneX 刘海屏适配

通过以下几个步骤，即可实现所有 IOS11.x系统的适配了，也就是主体内容显示在安全区域内，包括横屏情况

  • 设置网页在可视区域的布局方式

新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
  • 让主体内容控制在安全区域内

可以通过 constant() 可以获取到非安全边距，再结合 padding 或 margin 来控制页面元素避开非安全区域。 Webkit 在 iOS11中新增CSS Functions: env()替代 constant()，constant() 从 Safari Techology Preview 41 和 iOS11.2 Beta开始会被弃用。在不支持env()的浏览器中，会自动忽略这一样式规则，不影响网页正常的渲染。为了达到最大兼容目的，可以 constant() 和 env() 同时使用

body {
  padding-bottom: constant(safe-area-inset-top); /* iOS 11.0 */
  padding-top: env(safe-area-inset-top); /* iOS 11.2+ */
  padding-right: constant(safe-area-inset-right);
  padding-right: env(safe-area-inset-right);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: constant(safe-area-inset-left);
  padding-left: env(safe-area-inset-left);
}

box-shadow技巧

单侧投影

如果阴影的模糊半径，与负的扩张半径一致，那么我们将看不到任何阴影，因为生成的阴影将被包含在原来的元素之下，除非给它设定一个方向的偏移量。所以这个时候，我们给定一个方向的偏移值，即可实现单侧投影，例如：

单左侧投影：

box-shadow: -7px 0 5px -5px red;

单下测投影：

box-shadow: 0 7px 5px -5px red;

投影背景 / 背景动画

当 box-shadow 的模糊半径和扩张半径都为 0 的时候，我们也可以得到一个和元素大小一样的阴影，只不过被元素本身遮挡住了，我们尝试将其偏移出来：

width: 80px;
height: 80px;
border: 1px solid #333;
box-sizing: border-box;
box-shadow: 80px 80px 0 0 #000;

box-shadow 是可以设置多层的，也就是多层阴影，而且可以进行过渡变换动画（补间动画）。但是 background-image: linear-gradient()，也就是渐变背景是不能进行补间动画的，例如 box-shadow实现背景动画

立体投影

  • 立体投影的关键点在于利于伪元素生成一个大小与父元素相近的元素，然后对其进行 rotate 以及定位到合适位置，再赋于阴影操作
  • 颜色的运用也很重要，阴影的颜色通常比本身颜色要更深，这里使用 hsl 表示颜色更容易操作，l 控制颜色的明暗度

示例：立体投影

FLIP

即First, Last, Invert, Play，一种让 css动画更流畅和更简单的技术，具体参见 FLIP技术给Web布局带来的变化

网站主题色切换方案

详见 聊一聊前端换肤

nth-child 进阶用法

上面的用法中的第三部分，一般都是使用 n，而有时候也会用到 -n，比如选取前2个元素就是：nth-child(-n + 2)

为什么是这样呢？其实运算：-n + 2 ≥ 0，就可以推出 n ≤ 2。

由此，结合两者自动取交集，我们就可以限制选择某一范围。比如选择第 6个到第 9个，就是：:nth-child(-n+9):nth-child(n+6)

注意：不是 nth-child(2 - n)，-n要写在一起！