关于javascript:大厂面试总结-CSS-篇

<blockquote>
更多形容: 要求对行内元素、块状元素及不定宽高的块状元素均可实用：

可关上 codepen 进行调试: https://codepen.io/shanyue/pe…，以下是布局代码

<div class="container">
  <div class="item" style="width: 100px; height: 100px; background: #999;">
    块状元素
  </div>
</div>

<div class="container">
  <div class="item"> 不定高宽的块状元素 </div>
</div>

<div class="container">
  <span class="item"> 行内元素 </span>
</div>

.container {// 把代码写在这里}

.container {
  height: 20rem;
  background: #ccc;
  margin: 1rem;
}

</blockquote>

在 Issue 或者我的网站中交换与探讨: 01 如何实现一个元素的程度垂直居中

提供一些古代浏览器下应用 flex/grid 的办法，不仅反对块状元素，而且反对行内元素，对固定高宽与不固定高宽皆可应用。

应用 flex，以下是经典的垂直居中。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

应用 grid，它是做二维布局的，然而只有一个子元素时，一维布局与二维布局就一样了。

联合 justify-content/justify-items 和 align-content/align-items 就有四种计划

成果能够见 codepen

.container {
  display: grid;
  justify-content: center;
  align-content: center;
}

.container {
  display: grid;
  justify-content: center;
  align-items: center;
}

.container {
  display: grid;
  justify-items: center;
  align-content: center;
}

.container {
  display: grid;
  justify-items: center;
  align-items: center;
}

三个属性略显啰嗦，其实只需两个属性即可:

.container {
  display: grid;
  place-items: center;
}

.container {
  display: grid;
  place-content: center;
}

在 Issue 或者我的网站中交换与探讨: 02 css 如何实现左侧固定 300px，右侧自适应的布局

代码见左侧固定，右侧自适应 – Codepen

应用 flex 布局，左侧 300px，右侧 flex-grow: 1。pug 代码及 css 代码示例如下

.container
  .left
  .main

.container {display: flex;}

.left {
  flex-basis: 300px;
  flex-shrink: 0;
}

.main {flex-grow: 1;}

如果只应用 Grid 布局，则代码会更加简略，只须要管制容器的 CSS 属性

.container {
  display: grid;
  grid-template-columns: 300px 1fr;
}

在 Issue 或者我的网站中交换与探讨: 03 有没有应用过 css variable，它解决了哪些问题

可在运行时动静批改 CSS。与 less/sass 相比，更加灵便，因为它很容易通过 JS 来管制。依据它来做主题切换几乎得心应手。

在 Issue 或者我的网站中交换与探讨: 04 谈谈你对 styled-component 的认识

最为风行的 CSS-in-JS 计划

在 Issue 或者我的网站中交换与探讨: 05 display: inline 的元素设置 margin 和 padding 会失效吗

可参考文章 http://maxdesign.com.au/artic…

inline 元素的 margin 与 padding 左右失效，高低失效，精确说在高低方向不会使其它元素受到挤压，好像不失效，如下图设置 border 会发现它其实失效了

代码为，可见于行内元素的 padding 与 margin – codepen

<div class="container">
  我是 <span class="item"> 行内元素 </span> 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>

为 .item 行内元素设置款式，察看成果:

.item {
  padding: 1rem;
  border: 1px solid red;
}

.container {
  margin: 3rem;
  background-color: #ccc;
  height: 10rem;
}

在 Issue 或者我的网站中交换与探讨: 06 html 的默认 display 属性是多少

html 根元素的默认 display 为 block

在 Issue 或者我的网站中交换与探讨: 07 对一个非定长宽的块状元素如何做垂直程度居中

css position
        .container {position: relative;}
        .container .item {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

非定宽了，你这个不行呀

在 Issue 或者我的网站中交换与探讨: 08 如何实现左右固定，两头自适应布局

能够参考【Q017】css 如何实现左侧固定 300px，右侧自适应的布局

.container
  .left
  .main
  .right

.container {display: flex;}

.left {
  flex-basis: 300px;
  flex-shrink: 0;
}

.right {
  flex-basis: 300px;
  flex-shrink: 0;
}

.main {flex-grow: 1;}

在 Issue 或者我的网站中交换与探讨: 09 如何实现表格单双行条纹款式

通过 css3 中伪类 :nth-child 来实现。其中 :nth-child(an+b) 匹配下标 {an + b; n = 0, 1, 2, ...} 且后果为整数的子元素

nth-child(2n)/nth-child(even): 双行款式
nth-child(2n+1)/nth-child(odd): 单行款式

其中 tr 在表格中代表行，实现表格中单双行款式就很简略了：

tr:nth-child(2n) {background-color: red;}


tr:nth-child(2n+1) {background-color: blue;}

同理：

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

在 Issue 或者我的网站中交换与探讨: 10 简述下 css specificity

css specificity 即 css 中对于选择器的权重，以下三种类型的选择器顺次降落

id 选择器，如 #app
class、attribute 与 pseudo-classes 选择器，如 .header、[type="radio"] 与 :hover
type 标签选择器和伪元素选择器，如 h1、p 和 ::before

其中通配符选择器 *，组合选择器 + ~ >，否定伪类选择器 :not() 对优先级无影响

另有内联款式 <div class="foo" style="color: red;"></div> 及 !important(最高) 具备更高的权重

:not 的优先级影响 – codepen 能够看出 :not 对选择器的优先级无任何影响

CSS Specificity – codepen 能够看出十几个 class 选择器也没有一个 id 选择器权重高

在 Issue 或者我的网站中交换与探讨: 11 ‘+’ 与 ‘~’ 选择器有什么不同

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

在 Issue 或者我的网站中交换与探讨: 12 position: sticky 如何工作，实用于哪些场景

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

在 Issue 或者我的网站中交换与探讨: 13 伪类与伪元素有什么区别

伪类应用单冒号，而伪元素应用双冒号。如 :hover 是伪类，::before 是伪元素
伪元素会在文档流生成一个新的元素，并且能够应用 content 属性设置内容

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

在 Issue 或者我的网站中交换与探讨: 14 css 如何匹配前 N 个子元素及最初 N 个子元素

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

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

<blockquote>
更多形容: 可参考以下文章:

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

在 Issue 或者我的网站中交换与探讨: 15 如何应用 CSS 实现网站的暗黑模式 (Dark Mode)

@media (prefers-color-scheme: dark) {:root{}
}

在 Issue 或者我的网站中交换与探讨: 16 介绍暗藏页面中某个元素的几种办法

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

display: none;

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

opacity: 0;

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

visibility: hidden;

移出文档流，然而再次显示时耗费性能低

content-visibility: hidden;

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

font-size: 0;

在 Issue 或者我的网站中交换与探讨: 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

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

在 Issue 或者我的网站中交换与探讨: 18 如何自定义滚动条的款式

滚动条相干款式都是伪元素，以 scrollbar 打头，有以下伪元素，从 -webkit 中可见兼容性个别，不过无所谓，当初 Chrome 浏览器占大头

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (高低箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-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)
}

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

在 Issue 或者我的网站中交换与探讨: 20 写 CSS 时如何防止命名款式抵触

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

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

BEM 有一个毛病，就是有些太长，可适当简化，只包裹该页面组件的根类名，但有可能减少款式抵触的危险

.home-page {.btn {}
}

scoped css 会对以后组件 (scope) 下所有元素生成惟一的属性或类名，对所有 CSS 规定将携带惟一属性实现作用域的命名爱护

// 手动写
.btn {}

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

css-modules repo
css-modules demo

module css 会对类名进行 hash 化

在 Issue 或者我的网站中交换与探讨: 21 HTML 标签有哪些行内元素

常见的标签有以下几种，可参考 inline element

a
img
picture
span
input
textarea
select
label

在 Issue 或者我的网站中交换与探讨: 22 CSS 如何设置一行超出显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

在 Issue 或者我的网站中交换与探讨: 23 CSS 如何设置多行超出显示省略号

应用 -webkit-line-clamp 来设置多行超出显示省略号

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

在 Issue 或者我的网站中交换与探讨: 24 flex 布局中 order 有何作用

order 属性定义 Flex 布局中子元素的排列程序，数值越小，排列越靠前，默认为 0。

在 Issue 或者我的网站中交换与探讨: 25 flex 布局中 align-content 与 align-items 有何区别

示例代码见: align-content 与 align-items

align-content 作用于纵轴多行元素，一行元素不起作用
align-items 作用于纵轴单行元素

下图，上局部为 align-content，下局部为 align-items

在 Issue 或者我的网站中交换与探讨: 26 子元素垂直居中，并且长度为父容器一半的正方形

垂直居中长度为父容器一半的子元素 – Codepen

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

以前采纳百分比撑高 padding，那这种计划曾经过期，会挤压 Content 内容，无奈在其中填充内容(须要相对定位)。

可应用最新的属性 aspect-ratio，即长宽比

.container {
  display: grid;
  place-items: center;
}

.item {
  width: 50%;
  aspect-ratio: 1/1;
}

在 Issue 或者我的网站中交换与探讨: 27 简述 css 中 position 的值

static: 默认值，无定位，top、right、bottom、left 不起任何作用
relative: 绝对定位
absolute: 相对定位，脱离文档流，上下左右以最近的定位父元素为参照系
fixed: 脱离文档流，上下左右以浏览器视口为参照系
sticky: relative 与 fixed 的结合体

<blockquote>
更多形容: + 它是如何生成的

它有什么作用及利用
</blockquote>

在 Issue 或者我的网站中交换与探讨: 28 什么是 BFC

块级格式化上下文，Block Formatting Context

在 Issue 或者我的网站中交换与探讨: 29 CSS 如何实现固定长宽比的元素

过来的解决方案是应用 padding。一个元素的 padding 如若设置为百分比，则代表的是以父元素宽度为基准，依据这个原理，可设置长宽比。但实际上意义无限，毕竟你把 padding 给占了，content 无任何区域。

现代化的解决方案是应用长宽比的 CSS 属性: aspect-ratio

在 Issue 或者我的网站中交换与探讨: 30 rem、em、vw、wh 的值各是什么意思

他们同属于 CSS Data Type 中的 [length]，见文档 length – MDN

rem: 依据根元素 (即 html) 的 font-size
em: 依据 本身元素 的 font-size
vw: viewport width
vh: viewport height

在 Issue 或者我的网站中交换与探讨: 31 normalize.css 与 reset.css 又何区别

What is the difference between Normalize.css and Reset CSS?

normalize.css: 会保留有用的款式，比方 h1 的字体大小
reset.css: 把所有款式都重置，比方 h1、h2、h3 的字体大小都进行了重置，放弃了无款式

在 Issue 或者我的网站中交换与探讨: [32 line-height 的值别离取 [2, 2em, 200%] 有什么区别?](https://q.shanyue.tech/fe/css…

代码见: lineHeight – codepen

line-height 是绝对于元素本身的字体大小来取值，但同时会被继承。在理论工作中，取值 2em 或者 200% 有可能遇到未预测的内容。

比方:

父元素: fontSize: 18px; lineHeight: 1.5em(27px，150% 同理);，它的 lineHeight 计算下来为 27px，会被子元素继承
子元素: fontSize: 30px，子元素的 lineHeight 被继承为 27px，呈现问题

以下为演示代码，见: lineHeight – codepen

<div class="box green">
  <h1>lineHeight: 1.5; 这是没有问题的框框 </h1>
  lineHeight: 1.5; 这是没有问题的框框
  lineHeight: 1.5; 这是没有问题的框框
</div>

<div class="box red">
 <h1>lineHeight: 1.5em; 这是有问题的框框 </h1>
  lineHeight: 1.5em; 这是有问题的框框
  lineHeight: 1.5em; 这是有问题的框框
</div>

<div class="box orange">
 <h1>lineHeight: 150%; 这是有问题的框框 </h1>
  lineHeight: 150%; 这是有问题的框框
  lineHeight: 150%; 这是有问题的框框
</div>

.green {
  line-height: 1.5;
  border: solid limegreen;
}

.red {
  line-height: 1.5em;
  border: solid red;
}

.orange {
  line-height: 150%;
  border: solid orange;
}

h1 {font-size: 30px;}

.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
}

在 Issue 或者我的网站中交换与探讨: 33 Grid 布局的劣势在哪里

响应式！

<blockquote>
更多形容: 布局代码如下所示，可见三列均分布局 – codepen

注: 在第一个元素中设置文字，子元素不能因文字过长而挤压。

<div class="container">
  <div class="item"> 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>
  <div class="item"></div>
  <div class="item"></div>
</div>


// 以下为款式代码，非核心性能代码
* {box-sizing: border-box;}

.container {
  background-color: #eee;
  height: 10rem;
  width: 40rem;
  margin: 1rem;
}

.item {border: 1px solid #888;}

</blockquote>

在 Issue 或者我的网站中交换与探讨: 34 如何实现三列均分布局

见代码三均分布局 – Codepen

留神应用 calc(100% / 3) 设置 flex-basis，同时它的缺点是 不可能很好的为子元素设置左右间隙

.flex-container {
  display: flex;
  flex-wrap: wrap;
  // gap: 1rem;


  .item {flex: 0 0 calc(100% / 3);
  }
}

留神: 如果同时给子元素应用 flex-grow: 1 管制均分，当子元素领有文字等内容时，会受到挤压，将无奈实现均分布局。

应用 Grid 间接操作容器即可，对于子元素之间的间隙也能够很好地管制，可看出 Grid 更为简略，更为高效，更为准确

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

在 Issue 或者我的网站中交换与探讨: 35 z-index: 999 元素肯定会置于 z-index: 0 元素之上吗

代码见 zindex – codepen

不可，更简单的示例见层叠上下文 – MDN

01 如何实现一个元素的程度垂直居中

02 css 如何实现左侧固定 300px，右侧自适应的布局

03 有没有应用过 css variable，它解决了哪些问题

04 谈谈你对 styled-component 的认识

05 display: inline 的元素设置 margin 和 padding 会失效吗

06 html 的默认 display 属性是多少

07 对一个非定长宽的块状元素如何做垂直程度居中

08 如何实现左右固定，两头自适应布局

09 如何实现表格单双行条纹款式

10 简述下 css specificity

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

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

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

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

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

16 介绍暗藏页面中某个元素的几种办法

01 display: none

02 opacity: 0

03 visibility: hidden

04 content-visibility

05 相对定位于以后页面的不可见地位

06 字体大小设置为 0

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

终极解决方案

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

19 网站设置字体时，如何设置优先应用零碎默认字体

20 写 CSS 时如何防止命名款式抵触

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

2. CSS Scoped

3. CSS Module

21 HTML 标签有哪些行内元素

22 CSS 如何设置一行超出显示省略号

23 CSS 如何设置多行超出显示省略号

24 flex 布局中 order 有何作用

25 flex 布局中 align-content 与 align-items 有何区别

26 子元素垂直居中，并且长度为父容器一半的正方形

27 简述 css 中 position 的值

28 什么是 BFC

29 CSS 如何实现固定长宽比的元素

30 rem、em、vw、wh 的值各是什么意思

31 normalize.css 与 reset.css 又何区别

32 line-height 的值别离取 [2, 2em, 200%] 有什么区别?

33 Grid 布局的劣势在哪里

34 如何实现三列均分布局

应用 Flex

应用 Grid

35 z-index: 999 元素肯定会置于 z-index: 0 元素之上吗

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