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

站长

2022年12月01日 15:42 · 阅读数 67

前言

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

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

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

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

clientY / pageY

前者相对于窗口，类似于 position:fixed，从窗口的顶部/左侧边缘计算得出；后者相对于文档根，类似于position:absolute从文档的顶部/左侧边缘计算得出。两者之间的区分点就是如此。 🐯好让人傻傻分不清—CSS篇

break-all / break-word

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

content-box / border-box

content-box(默认样式)和border-box都是box-sizing的属性，两者间唯一的区别就是border-box计算元素宽度的时候是到 border 维度。 contetn-box的表现如下： 🐯好让人傻傻分不清—CSS篇 border-box的表现如下：

display:none / opacity:0 / visibility:hidden

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

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

border / outline

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

样式 width / 属性(attributes) width

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

使用元素的 height 和 width 属性

<img height="100" />

使用样式控制 height 和 width

<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？