<img> extra 4px at the bottom

参考:

Extra 4px at the bottom of html <img>

The mysterious 4px gap in between images

效果

红色部分多出来的 4px. 原因是 img 是 inline element, 它可以和 text 并排.

注意紫色图片的位置, 这个叫 vertical-align, 默认是 baseline, 和字对齐, 所以它会有一个 4px, 因为字就是这样.

所以要解决这个 4px 的问题. 可以 set vertical-align: bottom 或者直接把 img 换成 display:block (比如 Tailwind CSS 的 base 就是这样干的) 关键是懂原理, 之后用什么 solution 就看情况而已, 不担心了.

提醒: canvas, svg 也是有同样问题哦.

另一个关于 inline spacing 的相关问题: Space below inline elements inside a block element (以后才研究)

更新 06-06-2022

上面说到用 display: block 也可以解决这个问题, 但有些场景会翻车

HTML

  1. <div class="wrapper">
  2. <a href="#">
  3. <img src="./images/logo.png" />
  4. </a>
  5. </div>

CSS Style

  1. .wrapper {
  2. background-color: red;
  3. a {
  4. width: 224px;
  5. display: inline-block;
  6. background-color: blue;
  7. img {
  8. display: block;
  9. background-color: pink;
  10. max-width: 100%;
  11. }
  12. }
  13. }

img 虽然是 block, 但是 parent anchor 是 inline-block, 这样也是不行的哦. anchor 也必须是 block (注: 而且 inline element 里面最好不要有 block element, 风水不对)

所以我觉得吧, vertical-align: bottom 的方案比较理想.

textarea 也有相同问题

红色是 textare, 蓝色是多出来的 4px, input 倒是没有这个问题哦.

CSS Selector 是不区分大小写的 (case-insensitive)

  1. [myTargetElement] {
  2. background-color: red;
  3. }
  4.  
  5. [mytargetelement] {
  6. background-color: red;
  7. }

上面这 2 给 attribute selector 是完全等价的。

当 absolute / fixed 遇上 width / height auto

参考

MDN – position

stackoverflow – width:auto and fixed position

有时候当我们修改 div 的 position 之后会发现它变小了.

div block element width: auto 相等于 100% 对标 parent. 但是经过 position absolute 以后变成了 hug content.

在 MDN 有一段就是声明这个的.

如果希望保留原本的效果可以设置 left:0; right:0. 或者不要使用 width: auto 改成 100%.

Position absolute 导致 parent overflow

通常是影响到 body scroll. 这里只是举例子, 所以用普通 div 模拟.

  1. <div class="container">
  2. <h1>Hello World</h1>
  3. <div class="box"></div>
  4. </div>

CSS style

  1. .container {
  2. border: 1px solid red;
  3. position: relative;
  4. height: 300px;
  5. width: 300px;
  6. overflow-x: auto;
  7. }
  8.  
  9. .box {
  10. width: 150px;
  11. height: 150px;
  12. background-color: pink;
  13. position: absolute;
  14. right: -20%;
  15. }

效果

只有 right 和 bottom negative 才会,top 和 left 是不会出现 scrollbar 的哦。

why?

参考: stackoverflow – Why does position absolute make page to overflow?

很深, 目前无法理解. 总之就是会影响到就是了. 解决方法就是 overflow: hidden or clip,注: translateX,Y 也是会哦.

Transition 对 height: auto / fit-content 无效

  1. <div class="box">
  2. <p>
  3. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia
  4. quibusdam cumque repellat non molestiae fuga ab tempore nulla soluta
  5. quasi ea fugit ratione quae totam iste veritatis, qui dicta dolorem
  6. </p>
  7. </div>

CSS style

  1. .box {
  2. width: 100px;
  3. height: 20px;
  4. background-color: pink;
  5. overflow: hidden;
  6. &:hover {
  7. height: 200px;
  8. }
  9. transition: height 1s ease;
  10. }

效果

但是一旦把 height 换成 auto 或者 fit-content 这类自动计算的, transition 就 not working 了.

  1. &:hover {
  2. height: auto;
  3. }

效果

怎样破? stackoverflow – How can I transition height: 0; to height: auto; using CSS?

其实没有特别好的破法, 用 max-height 虽然高赞, 但是体验不完美. 我目前没有遇到这种情况, 或者说都可以闪掉, 所以先不管呗. 大不了用 JS 啦. 不然 JS animation 来干嘛的?

JS 破解之法: CSS & JS Effect – FAQ Accordion & Slide Down

height: 0 无视 padding, border, content

参考: stackoverflow – Why doesn’t height:0 hide my padded <div>, even with box-sizing:border-box?

我们直觉会认为当 height: 0 的时候, 应该什么也没有了. 但其实 height 0 是管不了 padding, border 的 (无论 content-box 还是 border-box)

  1. p {
  2. width: 0;
  3. height: 0;
  4. background-color: red;
  5. padding: 1rem;
  6. border: 1rem solid red;
  7. }

效果

它也阻止不了内容

  1. <p class="container">123</p>

最终依然会看见.

内容的问题可以通过 overflow: hidden 来解决. 但是 padding 和 border 却不行. 只能在外面 wrap 多一层来做 overflow hidden.

<details> display: flex 无效

  1. <details>
  2. <summary>summary</summary>
  3. <p>details text.</p>
  4. </details>

效果

完全被无视了. 其实不只是 details tag 还有一些 tag, 比如 button, fieldset 都是 override 不到的. 原理不清楚, 以后多了才研究.

参考:

stackoverflow – details element seems to ignore display flex or grid?

stackoverflow – Flex / Grid layouts not working on button or fieldset elements

当 position: absolute 遇上 grid container

  1. <div class="container">
  2. <div class="box"></div>
  3. </div>

CSS Style

  1. .container {
  2. width: 100px;
  3. height: 100px;
  4. background-color: pink;
  5. padding: 1rem;
  6.  
  7. display: block;
  8. position: relative;
  9. .box {
  10. position: absolute;
  11. top: 0;
  12.  
  13. width: 30px;
  14. height: 30px;
  15. background-color: blue;
  16. }
  17. }

效果

因为只 set 了 top 0 所以 element left 保持原有的位置, 也就是 padding-left 16px. 没有什么问题.

当把 container 从 display block 换成 grid 之后

left 自动变成了 0, 其实 top 也会自动变成 0 如果没有设置的话. 只有 grid 会这样, flex 和 block 效果是一样的, 会保留原本的位置.

原理不知道, 以后有 mood 才去研究呗.

font-size: 0 clear anchor spacing between

  1. <div class="container">
  2. <a class="link" href="#"><img width="36px" src="./images/social-media/facebook.png" /></a>
  3. <a class="link" href="#"><img width="36px" src="./images/social-media/twitter.png" /></a>
  4. <a class="link" href="#"><img width="36px" src="./images/social-media/youtube.png" /></a>
  5. <a class="link" href="#"><img width="36px" src="./images/social-media/linkedin.png" /></a>
  6. <a class="link" href="#"><img width="36px" src="./images/social-media/instagram.png" /></a>
  7. </div>

一排 anchor with img icon, 每一个 anchor 左右会自带 spacing.

通过 display: flex 可以去除掉空间.

另一种方法是通过 font-size: 0 (我学 Email Client Tempplate 时学到的)

原理

我还没有找到, 只知道如果给 anchor 和 img font-size:0 是没有效果的. 一定要给它的 parent container. 奇怪耶...

当 overflow-x: visible 遇上 overflow-y: not visible

参考: Stack Overflow – CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

其中一边 visible 另一边就必须也是 visible, 如果另一边是 auto, scroll 这些, 那么 visible 就没了, 它会被另一边影响到.

inset 0 == width height 100% 小心使用

我在 CSS & JS Effect – Image Overlay 提过 inset: 0 相等于

  1. top: 0;
  2. left: 0;
  3. width: 100%;
  4. height: 100%;

有一次我想让它偏移左边 10% 于是我这样写

  1. inset: 0;
  2. left: -10%;

我潜意识认为它是这样的

  1. top: 0;
  2. left: 0;
  3. width: 100%;
  4. height: 100%;
  5. left: -10%

但其实是这样的

  1. top: 0;
  2. left: -10%;
  3. bottom: 0;
  4. right: 0;

可想而知, 最终效果不是我要的. 所以呢, 有时候还是要用顺风水的 way 去做事情. 不然一时没有反应过来就踩坑了.

当 child height: 100% 遇上 parent 没有准确 height

参考: Stack Overflow – Child inside parent with min-height: 100% not inheriting height

当 child element height (或者 min, max-height) 使用 percentage (e.g. 100%) 时,它的 parent (一定要 parent 哦,ancestors 不算) 一定要有准确的 height。

准确的 height 就是说有定义高度,定义 min, max-height 不算准确,要 height 才准确。

如果 height 是 px, vh 这类直接 ok,如果 height 是 percentage 那就继续往上看 parent,这个 parent 同样的规则,一定要有准确 height。

注:假如 parent 是 display: inline 那就继续往上看。

举例

HTML

  1. <div class="parent">
  2. <p class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, aspernatur.</p>
  3. </div>

CSS

  1. .parent {
  2. width: 200px;
  3. height: 200px;
  4. child {
  5. background-color: pink;
  6. height: 100%;
  7. }
  8. }

效果

改成 min-height: 200px

蓝色是 parent

解决方案

解决方案有好多, 可以参考上面的链接, 其中一个就是用 flex + stretch

height 100% 指的是...?

续上一 part,height 100% 指的是 parent 精准定义的 full height。

  1. <div class="container" style="height: 500px;">
  2. <div class="header" style="height: 300px;"></div>
  3. <div class="body" style="max-height: 100%; overflow: auto;">
  4. <div class="content" style="height: 400px;"></div>
  5. </div>
  6. </div>

container 500px,header 200px,body max 100%,body 内容 400px。

请问 body 会出现 scrollbar 吗?

如果我们误以为 max-height 100% 等于 500 - 200 = 300px 的话,那就会出现 scrollbar。

但不是这样,max-height 100% 等于 container 的 500px,所以 body 内容要到 501px 才会出现 scrollbar。

那如果我们想设置 max-height 等于 container - header 的话,可以在 container 加上 display grid,利用 grid 去限制高度,不要使用 max-height。

0 !== 0px

当值是 0 的时候, 我们经常会省略掉 unit, 不管是 % 还是 px. 0 就是没有

但是在一些情况下, unit 是必须的. 比如 calc formula 中

calc(50% + 0) 会直接 syntax error

必须写 calc(50% + 0px) 才正确. 一定要有 unit (px or percent 或其它都可以, 就是一定要有就对了)

Transform, Opacity, Clip-path 也会让元素飘起来

我们知道想让元素飘起来可以用 position relative

但其实还有几个属性是会让元素票的.

1. transform – 这个比较好理解, 因为 translate scale 都可以产生重叠

2. opacity – 我觉得这个很不好理解...

3. Clip-path – 这个也不太好理解....

参考:

Stack Overflow – What has bigger priority: opacity or z-index in browsers?

Opacity 属性引发的层叠问题

例子

蓝色 box 有 negative margin, 而它依照顺序它在粉色下面, 所以它覆盖了粉色. 不过, 一旦粉色漂浮起来蓝色就盖不到了.

而 opacity, transform, clip-path, position relation 都可以达到这个效果.

当 margin collapse 遇上 flex

  1. .box1,
  2. .box2 {
  3. width: 100px;
  4. aspect-ratio: 1 / 1;
  5. margin-block: 2rem; // 关键
  6. }
  7.  
  8. .box1 {
  9. background-color: pink;
  10. }
  11. .box2 {
  12. background-color: lightblue;
  13. }

效果

由于 margin collapse, 所以 red 和 blue 的 margin 重叠了, 只保留最大的.

但是 flex 了以后, 它就不 collapse 了哦

  1. .container {
  2. display: flex; // 关键
  3. flex-direction: column;
  4.  
  5. .box1,
  6. .box2 {
  7. margin-block: 2rem;
  8. }
  9. }

效果

中间明显大了很多. 其原理应该是像这篇说的.

margin collapse 在 display inline-block 是无效的

display inline-block 不会有 margin collapse,上下 element 的 margin 都会有效,空间会大。

只有 display block 才会 margin collapse,上下 element 的 margin 会重叠,空间会小。

nth-child negative 玩法

参考: CSS-Tricks – How nth-child Works

如果想选择所有 child, 除了最后 2 个, 我的第一个想法是

  1. :nth-child(n - 2) {}

假设有 5 个 child, 它涵盖的范围

  1. 0 - 1 = -1
  2. 1 - 1 = 0
  3. 2 - 1 = 1
  4. 3 - 1 = 2
  5. 4 - 1 = 3

最终应该匹配到 1,2,3. 但经过测试这个是 ok 的

正确的 selector 是

  1. :not(:nth-last-child(-n + 2)) {
  2. background-color: red;
  3. }

Color Hex !== HSL

#1a73e8 convert to HSL 是 214°, 82%, 51%

但 214°, 82%, 51% convert to Hex 是 #1c74e9

所以 Hex !== HSL, 不过 Hex 倒是和 RGB 是完全等价的, 可以互换来用.

建议: 虽然用 HSL 比较容易做颜色管理, 但如果是想 copy 品牌颜色的话, 还是保留原本的 Hex 或者 RGB 比较妥当.

Overflow hidden not working inside flex with wrapper

  1. <div class="flex-box">
  2. <div class="p-wrapper">
  3. <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias ex recusandae laborum in enim sed ratione quibusdam saepe maxime rem quod voluptates neque tenetur magnam quas, dolorum aspernatur ipsum ullam.</p>
  4. </div>
  5. </div>
  1. .flex-box {
  2. display: flex;
  3. max-width: 360px;
  4. border: 4px solid red;
  5.  
  6. .p-wrapper {
  7. p {
  8. white-space: nowrap;
  9. overflow: hidden;
  10. text-overflow: ellipsis;
  11. }
  12. }
  13. }

效果

ellipsis 没有效果,原因是 overflow hidden 失效了,文字超出了框但是没有 hide 起来。

假如 flex-box div 使用 display: block 就可以,display: flex 不行。

因为 flex 改变了 p-wrapper 的 width,导致它没有了限制。解决方法是给 p-wrapper 添加 width:100% (flex-basis: 100% 不行哦),或者 max-width: 100% 或者 min-width: 0 或者 overflow: hidden。

具体原因我懒惰去查...以后才研究呗,我觉得类似 当 child height: 100% 遇上 parent min-height 的问题。当 CSS 遇到一些计算计算的东西时,它就有可能变得不太聪明。

参考:

Stack Overflow – text-overflow ellipsis not working in nested flexbox

YouTube – What to do if CSS text-overflow: ellipsis is not working in a Flex container

overflow hidden behind padding

顺带提一嘴,overflow: hidden 是在 padding 前面的,padding 是无法遮挡内容的,解决方法就是 wrap 多一层。

参考 : Stack Overflow – overflow: hidden behind padding

当 Flex Shrink 遇到 Wrapper

flex shrink 会压缩 width

HTML

  1. <div class="flex-box">
  2. <h1>Hello</h1>
  3. <p>Lorem ipsum dolor sit</p>
  4. </div>

CSS

  1. .flex-box {
  2. border: 1px solid black;
  3. display: flex;
  4. gap: 12px;
  5. align-items: center;
  6.  
  7. h1 {
  8. width: 150px;
  9. background-color: pink;
  10. }
  11. p {
  12. background-color: lightblue;
  13. }
  14. }

效果

左边有一个 150px, 目前整个 box 宽度是足够的, 所以没有任何 shrink 现象, 让我们添加右边的字

当右边的字多了以后, 左边被 shrink 了. 它会 shrink 到 min-content

用 dev tools 可以看到它 shrink 的讲解

shrink 有一个前提, 那就是 item 的 width 来自自身, 而不是来自 child element.

假如我们把 h1 用 div wrap 起来

效果

h1 的 150px 没有被 shrink 了.

CSS – 冷知识 (新手)的更多相关文章

  1. css 冷知识

    *{margin: 0;padding: 0;} li{list-style-type:none; }ul{list-style: none;}img{border: none;}ul,input,s ...

  2. 前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了!像console.log()可以向控制台输出图片

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...

  3. 前端不为人知的一面–前端冷知识集锦 原文地址(http://web.jobbole.com/83473/);

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...

  4. 转:前端冷知识(~~some fun , some useful)

    前端不为人知的一面——前端冷知识集锦 前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Qu ...

  5. 盘点 Python 中的那些冷知识(二)

    上一篇文章分享了 Python中的那些冷知识,地址在这里 盘点 Python 中的那些冷知识(一) 今天将接着分享!! 06. 默认参数最好不为可变对象 函数的参数分三种 可变参数 默认参数 关键字参 ...

  6. web 前端冷知识

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...

  7. 10个不为人知的 Python 冷知识

    转载: 1. 省略号也是对象 ...这是省略号,在Python中,一切皆对象.它也不例外. 在 Python 中,它叫做 Ellipsis . 在 Python 3 中你可以直接写…来得到这玩意. 而 ...

  8. 这些鲜为人知的前端冷知识,你都GET了吗?

    背景 最近公司项目不多,比较清闲,划水摸鱼混迹于各大技术博客平台,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来,不由的发出一声感叹! 前端可真是博大精深 于是 ...

  9. 10 个不为人知的Python冷知识

    1. 省略号也是对象 ... 这是省略号,在Python中,一切皆对象.它也不例外. 在 Python 中,它叫做 Ellipsis . 在 Python 3 中你可以直接写-来得到这玩意. > ...

  10. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

随机推荐

  1. API引用在Element UI (Vue 2)和Element Plus (Vue 3)中的不同

    API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需要更新你的自定义样式. 事件名和属性名变化: 某些组件的事件名和属性名发生了变化,需要检查 Element Plus 文档 以了解详细信 ...

  2. ArkTS基础知识

    [习题]ArkTS基础知识 及格分85/ 满分100   判断题 1. 循环渲染ForEach可以从数据源中迭代获取数据,并为每个数组项创建相应的组件. 正确(True)错误(False) 回答正确 ...

  3. vue3+elementplus 去除小数点后多余的0公用函数

    vue3+elementplus 去除小数点后多余的0公用函数 export function removeTrailingZeros(value) { // 尝试将值转换为数字 const nume ...

  4. MViT:性能杠杠的多尺度ViT | ICCV 2021

    论文提出了多尺度视觉Transformer模型MViT,将多尺度层级特征的基本概念与Transformer模型联系起来,在逐层扩展特征复杂度同时降低特征的分辨率.在视频识别和图像分类的任务中,MViT ...

  5. [oeasy]python0053_ 续行符_line_continuation_python行尾续行

    续行符与三引号 回忆上次内容 上次还是转义序列 类型 英文 符号 \a bell 响铃 \b backspace 退格 \t tab 水平制表符 \v vertical tab 垂直制表符换行不回车 ...

  6. 靶机练习: hacksudo---Thor

    靶机:hacksudo---Thor 准备工作 靶机地址: http://download.vulnhub.com/hacksudo/hacksudo---Thor.zip MD5 校验:d12168 ...

  7. Vue export & export default & import 总结

    Vue export & export default & import 总结 by:授客 QQ:1033553122 1.   实践环境 Vue 2.9.6 2.   简介 在ES6 ...

  8. 【WSDL】03 使用注解自定义服务信息

    对原来的自定义WebService设置注解: package cn.cloud9.jax_ws.server.intf; import javax.jws.WebMethod; import java ...

  9. vue之条件判断v-if与v-show

    1.背景 2.v-if简单使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  10. 关于vue按需引入ElMessage和ElMessageBox未被自动引入到auto-important的问题

    相信关于按需引入大家应该都会了,不论是官网还是百度一大堆教程 我这边也是参照https://github.com/youlaitech/vue3-element-admin的写法去写的-----需要的 ...