HTML & CSS collections

[lbwa]

CSS values

• 滚动条出现时，防止页面跳动

html
  width: 100vw
  overflow-x: hidden

100vw 表示撑满整个视口，overflow-x: hidden 表示隐藏横向的溢出，那么此时即使横向内容溢出，横向滚动条也不会出现。

vw 本质是忽略了滚动条宽度。（w3c）

when the value of overflow on the root element is auto, any scroll bars are assumed not to exist. Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.

那么在 vw 生效时，当 overflow-y （此时不是 overflow-x）为 auto 时将忽略 所有 上下滚动条的宽度。vh 同理。

[lbwa]

background

The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. Margin backgrounds are always transparent.

background property 用于定义盒模型中的 border、 padding、content 区域的背景样式。另外 margin 区域的背景 永远 都是 transparent 透明的（w3c box model）。因为 margin 本意即是表明不同元素之间的间隙，间隙不存在背景，那么也就是永远透明的。

背景图中心始终与视口中心重合

实现：background-position，background-size

.img
  background-image: url('./a.jpg')
  background-size: cover
  background-position: 50% 50%
  background-repeat: no-repeat

background-position 初始值为 0% 0%，存在缺省值时，第二个参数将被设置为 center。该属性定义了背景图的缩放原点。即应该以图像的何处为基准进行背景缩放以适应背景图容器的变化。在设置了 center 值之后，那么不论容器如何变化，都将以图像的中心点作为缩放原点，这也避免因容器变化导致背景图的 跳动。

另外，以上的原点是以 background-origin 做为参考系。

多个背景图组合，可用于实现 背景图滤镜

实现：background-image

.img
  // 越靠前的背景图越接近用户，即 linear-gradient 在 a.jpg 之上
  background-image: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)), url('./a.jpg')
  // 在不拉伸背景图的情况下，尽可能的缩放背景图，在容器宽高比与背景图宽高比不同时，将裁剪图片
  // 至没有背景空白出现
  background-size: cover

定义背景图定位源点，即是否排除边框或内边距

实现：background-origin

.img
  background-image: url('./a,jpg')
  background-origin: border-box // 包含边框
  background-origin: padding-box // 不包含边框，包含内边距
  background-origin: content-box // 仅包含内容区域

背景图不随容器滚动，相对于视口位置保持固定

实现： background-attachment

.img
  background-attachment: fixed

Notice：在该属性为 fixed 值时将覆盖 background-origin 属性（detail），即 background-origin 失效。

[lbwa]

元素裁剪 & 倾斜

元素裁剪

实现：clip-path

.some
  // 裁剪出 v 字形
  clip-path: polygon(50% 0%, 100% 0, 100% 65%, 50% 100%, 0 65%, 0 0)

元素倾斜

实现： tranform: skew(<angle> [, <angle> ]? )，transform: skewX( <angle> )，transform: skewY( <angle> )

.some
  transform: skewX(10deg)

[lbwa]

CSS 实现三角形

原理利用盒模型中的任意两边或三边 border 实现三角形画法，本质任意相邻两边的 border 相接触时，会形成一个斜边，那么我么就可以使用该斜边作为三角形的斜边即可。

直角三角形

Play on the playground

.app
  width: 0
  height: 0
  border-top: 50px solid transparent
  border-right: 50px solid transparent
  border-bottom: 50px solid dodgerblue

图示中的黑框三角形即是示例代码的最终显示结果。

正三角形

Play on the playground

.app
  width: 0
  height: 0
  border-top: 50px solid transparent
  border-bottom: 50px solid transparent
  border-right: 50px solid red

正三角形的实现原理与直角三角形原理一致。

技巧

推荐在伪元素三实现该样式，避免向 DOM tree 添加不必要节点。

Play on the playground

.app::before
  content: ' '
  display: block // 转变为块级元素，避免块级元素与行内元素之间的空白
  width: 0
  height: 0
  border-right: 50px solid transparent
  border-bottom: 50px solid dodgerblue