集腋成裘 ✨

一些平时不是很在意的东西，当遇到的时候才被发现。
那就收集起来，让它们不会再轻易被忘掉。

• margin之间会重叠。

---

• box-sizing: border-box; 边框和内边距在设定的尺寸内绘制。

---

• CSS权重，（div：1）（.main：10）（#abc：100）

---

• 占位隐藏，visibility: hidden，看不见但是占据位置。

---

• 在a标签中，title为鼠标悬停文字，alt为隐性图片说明，是a标签更具语义化。

---

• jQ中，toggle (fn, fn) 可以实现两个函数的切换。

---

• Chrome自动调节字体不小于12px，-webkit-text-size-adjust: none;

---

• 微软的浏览器，input输入是会出现叉叉和眼睛，清除它们！

  ::-ms-clear，::-ms-reveal {display: none;}

---

• 强制拉伸到与父元素一样的尺寸

  {position: abusolute; top: 0; bottom: 0; left: 0; right: 0;}

---

• font: style - variant - weight - size/line height - family

  分别对应 - 粗斜体 - 大小写 - 字重 - 字的大小 / 行距 - 字体类型

---

• background：color - position - size - repeat - origin(定位区域) - clip(绘制区域) - attachment(是否滚动) - image

---

• 让元素铺满整个浏览器窗口。

  ① html, body {hegiht: 100%; width: 100%;} ② .div {height: 100vh; width: 100vw;}

---

• forEach () 方法中，function回调三个参数：

  遍历的内容、序号索引以及数组本身。即：

  forEach (function (value, index, array) { });

---

• 外部样式、内部样式、行内（内联）样式

  link 引入的 CSS — style 标签里的样式 — 写在标签内的样式

---

• 某些情况下，使用 mouseenter / mousueleave 代替 mouseover / mouseout ，可以防止子元素触发父元素事件，因为它们不会冒泡。

---

• 当点击锚点时（href=“#111”），页面中所对应的该 id 的元素就会产生一个 target 伪类（CSS3），可以通过该方法实现纯 CSS 点击事件效果。

• 接上条，若想要兼容性更强，可以用另一种方法，点击锚点文档会自动将锚点目标放置到可视区域，利用这个特性，可以用父元素overflow:hidden;属性来隐藏锚点，点击后自动出现。

Wait me back