css样式整理

css 样式整理

line-height: 1.5line-height1.5 和 line-height:150%的区别

区别

区别体现在子元素继承时，如下：

  • 父元素设置 line-height:1.5 会直接继承给子元素，子元素根据自己的 font-size 再去计算子元素自己的 line-height。
  • 父元素设置 line-height:150%是计算好了 line-height 值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置 font-size 就对其 line-height 无影响了。

举例

  • 比如父元素设置属性：font- size:14px;line-height:1.5,child 设置 font-size:26px;那么父元素：line-height = 14px _ 1.5 = 21px，子元素：line-height = 26px _ 1.5 = 39px。
  • 父元素设置属性：font-size:14px;line-height:150%,child 设置 font-size:26px;那么父元素：line-height = 14px * 150% = 21px，子元素：line-height = 父元素的 line-height = 21px。

注：line-height 设置 em 和百分比同等效果

flex:1 详解

定义

CSS 属性 flex 规定了弹性元素如何伸长或缩短以适应 flex 容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。

  • flex-grow：定义项目的的放大比例；
    • 默认为 0，即 即使存在剩余空间，也不会放大；
    • 所有项目的 flex-grow 为 1：等分剩余空间（自动放大占位）；
    • flex-grow 为 n 的项目，占据的空间（放大的比例）是 flex-grow 为 1 的 n 倍。
  • flex-shrink：定义项目的缩小比例；
    • 默认为 1，即 如果空间不足，该项目将缩小；
    • 所有项目的 flex-shrink 为 1：当空间不足时，缩小的比例相同；
    • flex-shrink 为 0：空间不足时，该项目不会缩小；
    • flex-shrink 为 n 的项目，空间不足时缩小的比例是 flex-shrink 为 1 的 n 倍。
  • flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间，
    • 默认值为 auto，即 项目原本大小；
    • 设置后项目将占据固定空间。

取值

  • 默认值： 0 1 auto
  • none：0 0 auto
  • auto：1 1 auto
  • **n(非负数字)**：n 1 0%
  • n1 n2：n1 n2 0%
  • **L(长度)**：1 1 L
  • n L：n 1 L

详见MDN

用途

用作自适应布局，将父容器设置 display：flex，侧边栏大小固定后，将内容区设置 flex：1，内容区则会自动放大占满剩余空间。

first-child、last-child、nth-child()失效问题

  • 在使用 first-child 时，所获取的元素前面不能有兄弟节点，同理使用 last-child 时所获取的元素后面不能有兄弟节点。
  • 使用 nth-child()索引会因为所获取的元素前面的兄弟节点而累加

实现 0.5px 边框

详见

2024.5.15

Canvas

绘制的 Canvas 实际大小与 CSS 中设置的大小不一致，通过设置 Canvas 的宽度和高度属性来确保它们与 CSS 中设置的大小相匹配