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

[编按： 转载于 segmentfault.com/shanyue, 2021-06-04. 原题目为“大厂面试总结 CSS 篇”。]

01 如何实现一个元素的水平垂直居中

更多描述: 要求对行内元素、块状元素及不定宽高的块状元素均可适用：

以下是布局代码

<div class="container">
 <div class="item" style="width: 100px; height: 100px; background: #999;">
   块状元素   <div class="item">不定高宽的块状元素 行内元素.container {   // 把代码写在这里}.container {  height: 20rem;  background: #ccc;  margin: 1rem;
}

提供一些现代浏览器下使用 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;
}

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

使用 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;
}

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

可在运行时动态修改 CSS。与 less/sass 相比，更加灵活，因为它很容易通过 JS 来控制。根据它来做主题切换简直得心应手。

04 谈谈你对 styled-component 的看法

最为流行的 CSS-in-JS 方案

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

inline 元素的 margin 与 padding 左右生效，上下生效，准确说在上下方向不会使其它元素受到挤压，仿佛不生效，如下图设置 border 会发现它其实生效了

代码为，可见于 行内元素的padding与margin - codepen点击预览

<div class="container">
 我是行内元素

为 .item 行内元素设置样式，观察效果:

.item {  padding: 1rem;  border: 1px solid red;
}.container {  margin: 3rem;  background-color: #ccc;  height: 10rem;
}

06 html 的默认 display 属性是多少

html 根元素的默认 display 为 block

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

css position

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

非定宽了，你这个不行呀

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

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)

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

:not 的优先级影响 - codepen点击预览 可以看出 :not 对选择器的优先级无任何影响

CSS Specificity - codepen点击预览 可以看出十几个 class 选择器也没有一个 id 选择器权重高

本页Url