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


-loading- -loading- -loading-

2021-06-09 , 2749 , 101 , 60

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)

<blockquote>
更多描述: 可参考以下文章:

Dark mode in 5 minutes, with inverted lightness variables
</blockquote>

在 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;

06 字体大小设置为 0

UfqiLong

font-size: 0;


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

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

<div class="container">
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div></div>

使用 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 原子类框架,只需要一行即可搞定

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>

但是这就够了吗?

这远远不够,这也足够复杂!

需要媒体查询

需要人为设置 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 — 滚动条上的滚动滑块.

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 化



+样式表 +总结 +元素 +样式 +设置

本页Url

↖回首页 +当前续 +尾续 +修订 +评论✍️


👍0 仁智互见 👎0
  • 还没有评论. → +评论
  • -loading- -loading- -loading-


    🔗 连载目录

    🤖 智能推荐

    面试总结 CSS 层叠样式表篇

    Java開發手冊-阿里巴巴-嵩山版-7:集合處理 Java開發手冊-阿里巴巴-嵩山版-7:集合處理

    -loading- -loading- -loading-

     


    + 春昼 春昼
    AddToFav   
    新闻 经典 官宣