小皮QAQ的个人博客

record-1

# css 画三角形

  • 通过 border

  • 通过 clip-path 定义一个裁剪区域，只有该区域的部分会被显示

  • 通过 transform: skew(45deg) 倾斜或者旋转，将矩形变形成三角形

  • 通过 线性渐变 组合透明色和非透明色 来实现三角形效果

  • 通过 svg、canvas

# 绝对定位是相对于什么定位的

  • 相对于最近的已经定位的祖先元素，(设置了 position 属性的元素，且值为 relative、absolute、fixed 或 sticky)

  • 没有就相当于与整个页面的 html 元素定位

# flex-basis 和 width 的区别

  • flex-basis 定义的是 flex 布局下 flex-direction 方向上的初始大小(如果不进行缩放的话，这个宽度就是元素的基础大小)，width 定义的是元素的固定宽度

  • flex 布局下，如果设置了 flex-basis，那么结合 flex-direction 会覆盖掉 width 或 height 属性

  • width 不参与到弹性布局机制里面

# rem 的优缺点

  • 缺点

    • 依赖根元素 html 的字体大小，如果根元素字体大小改了，那么所有使用 rem 的元素都会被影响

    • 难以精确控制局部元素的大小，精准布局的场景 rem 的相对计算会变得复杂

    • 部分浏览器的初始字体大小可能会影响到 rem 的计算

  • 优点

    • 响应式设计友好，灵活调整整体布局，减少媒体查询

    • 可访问性，现代浏览器允许用户调整默认字体大小，rem 会自动进行缩放，提供更好的体验

    • 相比较 em，可以更好避免嵌套时的尺寸累计问题

    • 易于全局调整，适合布局和字体，可以提供稳定的全局控制

# css 块定义规则 和 包含块

包含块，块定义规则 指的是 元素的 包含块，决定了元素的尺寸和定位基准；不同的定位，依赖不同的包含块确定最终的位置

  • 非定位元素，position: static，包含块指的是它最近的块级父元素

  • 定位元素，position: relative, absolute, fixed，包含块需要按情况分析

  • position: static 或 position: relative，包含块由最近的块级父元素的内容区域确定

  • position: absolute，由最近的有定位属性(relative, absolute, fixed)的祖先元素的内容区域决定，如果找不到就根据 html 根元素进行定位

  • position: fixed，由视口进行定位，而不是父元素；但是父元素设置了 transform filter perspective will-change等 css 属性，fixed 又会根据父元素进行定位

    • 核心原因：浏览器的图层改变，导致 fixed 不再相对于视口定位，而是相对于该图层的根元素进行定位

    • position: fixed会相对视口定位也是因为它自身会创建一个图层，相对于根元素视口进行定位了

    • 创建图层，是为了提升渲染性能，动画和过渡:减少重绘开销、独立渲染:不需要重绘页面、减少布局计算等

  • position: sticky，由最近的具有滚动行为的祖先元素；sticky 元素在其包含块中滑动时候，会变现为相对定位，直到触发阈值，变为固定定位

# position:fixed; 的布局情况

  • position: fixed;，会相对视口定位，不受父元素影响

  • left right top bottom 0，同时设置这些的话，元素会被拉伸铺满视口

  • 特殊情况：父元素 设置transform perspective filter will-change等 css 属性会将子元素相对父元素进行定位；这是因为 css 规范包含了块定义规则

.wrapper {
  transform: translate(0, 0);
}

record-2 →