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


-loading- -loading- -loading-

2021-06-09 , 2748 , 101 , 111

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


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

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

以下是布局代码

<div class="container">
 <div class="item" style="width: 100px; height: 100px; background: #999;">
   块状元素   <div class="item">不定高宽的块状元素 <span 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 代码示例如下

UfqiLong

.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">
 我是<span class="item">行内元素

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

UfqiLong

非定宽了,你这个不行呀


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

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


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


    🔗 连载目录

    🤖 智能推荐

    -loading- -loading- -loading-

     


    + 敬济道 敬济道
    AddToFav   
    新闻 经典 官宣