🐯好让人傻傻分不清—CSS篇

2,855 阅读3分钟

我正在参加「掘金·启航计划」

前言

生活中有很多傻傻分不清的东西比如:凤梨和菠萝、土豆和马铃薯、西红柿和番茄、汤圆和元宵,当然还有屏幕的你和帅哥/美女。前端领域也存在各种让人傻傻分不清的知识点,接下来我们一起来看看。

clientHeight(Top) / offsetHeight(Top) / scrollHeight(Top)

这几种的区分主要还是在计算的范围:

  • clientHeight = 元素的 height + 垂直的 padding
  • offsetHeight = 元素的 height + 垂直的 padding + 上下 border + 水平滚动条高度 (如果存在)
  • scrollHeight = 元素的 height(包括滚动到屏幕外的部分) + 垂直的 padding
  • clientTop = 元素顶部边框的高度,不包括顶部外边距或内边距。
  • offsetTop = 距离 offsetParent(最接近的祖先) 的高度,不包括其外边距或内边距
  • scrollTop = 元素的内容垂直滚动的距离 image.png

clientY / pageY

前者相对于窗口,类似于 position:fixed,从窗口的顶部/左侧边缘计算得出;后者相对于文档根,类似于position:absolute从文档的顶部/左侧边缘计算得出。两者之间的区分点就是如此。 image.png

break-all / break-word

word-break: break-all的表现如下: image.png word-break: break-all 将尽量在每行中放入最大的字符,所以有些单词被分成不同的行。 word-break: break-all的表现如下: image.png image.png word-break: break-word不会断行,每一行中能够容纳的单词,但是有个特殊的情况,就是容器的宽度不足以正常展示单词,依然会被断行。

content-box / border-box

content-box(默认样式)和border-box都是box-sizing的属性,两者间唯一的区别就是border-box计算元素宽度的时候是到 border 维度。 contetn-box的表现如下: image.png border-box的表现如下: image.png

display:none / opacity:0 / visibility:hidden

这三种方式都可以让元素隐藏,但三者之间还是有不同点的:

  • display: none在呈现元素时不占用空间,其他两种方式仍然会正常占用其空间。
  • 浏览器不会响应使用 display: nonevisibility: hidden 的元素的任何事件。
  • opacity: 0 仅仅改变了元素的透明度,所以元素的内容还是可以被屏幕阅读器读取到。

border / outline

  • outline 不会占用空间,这就意味着用 outline 不会影响元素的尺寸。
  • border 可以用 border -radius 属性实现圆角效果,但是 outline 不支持。
  • 我们可以通过 border-topborder-leftborder-bottomborder-right 属性为每一侧定义边框样式,但是 outline 却不能这么做。
  • outline通常是矩形,但也可以是非矩形的,例如多行文本换行的情况下。

样式 width / 属性(attributes) width

我们知道有两种方式来定义元素的尺寸:

  1. 使用元素的 heightwidth 属性
<img height="100" />
  1. 使用样式控制 heightwidth
<img style="height: 100px" />

区别在于

  • 样式应用于所有的元素,但是元素属性只有一些特定的元素如:canvas, image, table, td等。
<img width="200px" />

<!-- 以下将不生效 -->
<div width="200px"></div>
  • 对于 canvas 来说样式无法控制宽高。另外用属性设置宽高的时候不需要带上单位,否则不生效。
<canvas height="100" width="100"></canvas>

<!-- 以下将不生效 -->
<canvas style="height: 100px; width: 100px;"></canvas>
  • 样式属性的优先级会比元素上的属性高
<!-- img 的高度会是 200px -->
<img height="100px" style="height: 200px" />

结束语

人世间虽然傻傻分不清楚的东西还有很多,但是能分清一点是一点。对吧,JYM?

相关资料

🐭好让人傻傻分不清—DOM篇

🐵好让人傻傻分不清—JS篇