面试总结 CSS 层叠样式表篇-2

-loading-

2021-06-09 , 2749 , 101 , 123

听音频 🔊 . 看视频 🎦

11 '+' 与 '~' 选择器有什么不同

+ 选择器匹配紧邻的兄弟元素

~ 选择器匹配随后的所有兄弟元素

12 position: sticky 如何工作，适用于哪些场景

position: sticky 可理解为 relative 与 fixed 的结合体

13 伪类与伪元素有什么区别

伪类使用单冒号，而伪元素使用双冒号。如 :hover 是伪类，::before 是伪元素

伪元素会在文档流生成一个新的元素，并且可以使用 content 属性设置内容

参考 https://www.w3.org/TR/CSS2/se...

14 css 如何匹配前N个子元素及最后N个子元素

见【Q307】如何实现表格单双行条纹样式

如何匹配最前三个子元素: :nth-child(-n+3)

如何匹配最后三个子元素: :nth-last-child(-n+3)

15 如何使用 CSS 实现网站的暗黑模式 (Dark Mode)

更多描述: 可参考以下文章:
Dark mode in 5 minutes, with inverted lightness variables

在 Issue 或者我的网站中交流与讨论: 15 如何使用 CSS 实现网站的暗黑模式 (Dark Mode)@media (prefers-color-scheme: dark) { :root{
}
}

16 介绍隐藏页面中某个元素的几种方法

01 display: none

通过 CSS 操控 display，移出文档流

display: none;

02 opacity: 0

透明度为0，仍在文档流中，当作用于其上的事件(如点击)仍有效

opacity: 0;

03 visibility: hidden

透明度为0，仍在文档流中，但作用于其上的事件(如点击)无效，这也是 visibility:hidden 与 opacity: 0 的区别

visibility: hidden;

04 content-visibility

移出文档流，但是再次显示时消耗性能低

content-visibility: hidden;

05 绝对定位于当前页面的不可见位置

position: absolute;top: -9000px;left: -9000px;

-loading-

06 字体大小设置为 0

UfqiLong

font-size: 0;

17 css 如何实现响应式布局大屏幕三等分、中屏幕二等分、小屏幕一等分

页面布局元素如下，item 数量不固定

使用 Grid 布局可以轻松解决这个问题，如若使用其它方案，控制好等分的同时再控制好间距也是一个十分头疼的问题:

grid-template-columns: 控制等分

gap: 控制间隙

效果可见 codepen点击预览

@media (min-width: 768px) { .container {
grid-template-columns: repeat(2, minmax(0,1fr));
}
}@media (min-width: 1024px) { .container {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}.container { display: grid;
}.conainer {
gap: 1rem;
}

TailwindCSS 是一款非常方便的 CSS 原子类框架，只需要一行即可搞定

但是这就够了吗？

这远远不够，这也足够复杂！

需要媒体查询

需要人为设置 breakpoint，设置大小屏幕的边界

终极解决方案

Grid 布局可以自动判断容器大小，无论大小屏幕自动撑满并均分，请看以下属性

.container {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}

repeat: 用以 N 整分

auto-fill：表示自动填充

minmx: 即书面意思，最小宽度为 300px

使用终极解决方案的在线页面

18 如何自定义滚动条的样式

滚动条相关样式都是伪元素，以 scrollbar 打头，有以下伪元素，从 -webkit 中可见兼容性一般，不过无所谓，现在 Chrome 浏览器占大头

::-webkit-scrollbar — 整个滚动条.

::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).

::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.

-loading-

UfqiLong

::-webkit-scrollbar-track — 滚动条轨道.

::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.

::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.

::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

但其实最常用的是以下几个伪元素：滚动条、滑块、轨道，如下滚动条设置成功

::-webkit-scrollbar {
width: 6px; height: 6px}

::-webkit-scrollbar-track {
border-radius: 3px; background: rgba(0,0,0); box-shadow: inset 0 0 5px rgba(0,0,0,.08)
}

::-webkit-scrollbar-thumb {
border-radius: 3px; background: rgba(0,0,1); box-shadow: inset 0 0 10px rgba(0,0,0,.2)
}

19 网站设置字体时，如何设置优先使用系统默认字体

在 Issue 或者我的网站中交流与讨论: 19 网站设置字体时，如何设置优先使用系统默认字体font-family: system-ui;

system-ui 将会自动选取系统默认字体作为字体，如 bootstrap 的样式规则

$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

20 写 CSS 时如何避免命名样式冲突

1. BEM 式: .home-page .home-page-btn

.home-page { .home-page-btn {}
}

BEM 有一个缺点，就是有些太长，可适当简化，只包裹该页面组件的根类名，但有可能增加样式冲突的风险

.home-page { .btn {}
}

2. CSS Scoped

scoped css 会对当前组件(scope)下所有元素生成唯一的属性或类名，对所有 CSS 规则将携带唯一属性实现作用域的命名保护

// 手动写.btn {}

// 编译后.btn .jsx-1287234 {}

3. CSS Module

css-modules repo

css-modules demo

module css 会对类名进行 hash 化