集腋成裘 ✨

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

  • 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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。