⌛序言

对于前端来说， css 是初学者必学的一个知识。基本上在涉猎了 html 之后，随之学习的就是 css 。同时， css 也是前端必考的一个知识点，像水平垂直居中、两栏布局和三栏布局以及 bfc 等等，都是面试的常考点也是必考点。因此， 在下面的文章中，将系统地整理周一在秋招过程中所遇到的题目。

一起来学习⑧~~⏰

✏️一、CSS框架先梳理

我们先用一张思维导图来了解关于 css 的一些常考题。详情见下图👇

下面开始梳理各个题目的解答~⏳

🖌️二、基础样式问题

1、请你讲一讲css的权重和优先级

（1）权重

（2）优先级

权重相同，写在后面的覆盖前面的，“后来居上”原则

使用 !important 达到最大优先级，都使用 !important 时，权重大的优先级高

• 详细文章补充👇
• 原文：谁动了我的选择器？深入理解CSS选择器优先级
• 链接：juejin.cn/post/699458…

2、说一下CSS的position属性

static ：无特殊定位，对象遵循正常文档流。 top ， right ， bottom ， left 等属性不会被应用。

relative ：对象遵循正常文档流，但将依据 top ， right ， bottom ， left 等属性在正常文档流中偏移位置。而其层叠通过 z-index 属性定义。

absolute ：对象脱离正常文档流，使用 top ， right ， bottom ， left 等属性进行绝对定位。而其层叠通过 z-index 属性定义。

fixed ：对象脱离正常文档流，使用 top ， right ， bottom ， left 等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过 z-index 属性定义。

sticky ：具体是类似 relative 和 fixed ，在 viewport 视口滚动到阈值之前应用 relative ，滚动到阈值之后应用 fixed 布局，由 top 决定。

• 详细文章补充👇
• 原文：你可能对position和z-index有一些误解
• 链接：juejin.cn/post/699346…

3、span 标签是否可以设置宽高， margin 和 padding 呢？

这道题考察的是  margin 和 padding 对行内元素的影响。

span 标签是行内元素，设置不了宽高。但是 margin 和 padding 可以设置，但值得注意的是，设置 margin 和 padding 时，只有水平方向有效果，垂直方向没有效果。

在一篇文章中看到这样一段解释：

While padding can be applied to all sides of an inline element,only left and right padding will have an effect on surrounding content.In the example below,50px of padding has been applied to all sides of the element.As you can see,it has an affect on the content on each side,but not on content above or below.
复制代码

上面这段话解释了，当 padding 被应用与行内元素时，只对左右的水平方向有影响，而对上下的垂直方向是没有影响的。

4、css能够实现继承的相关属性

（1）字体系列属性

• font：组合字体
• font-family：规定元素的字体系列
• font-weight：设置字体的粗细
• font-size：设置字体的尺寸
• font-style：定义字体的风格
• font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
• font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
• font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

（2）文本系列属性

• text-indent：文本缩进
• text-align：文本水平对齐
• line-height：行高
• word-spacing：增加或减少单词间的空白（即字间隔）
• letter-spacing：增加或减少字符间的空白（字符间距）
• text-transform：控制文本大小写
• direction：规定文本的书写方向
• color：文本颜色

（3）元素可见性

• visibility

（4）表格布局属性

• caption-side、border-collapse、border-spacing、empty-cells、table-layout

（5）列表布局属性

• list-style-type、list-style-image、list-style-position、list-style

（6）生成内容属性

• quotes

（7）光标属性

• cursor

（8）页面样式属性

• page、page-break-inside、windows、orphans

（9）声音样式属性

• speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

5、visibility 和 display 的差别（还有opacity)

• visibility ：设置 hidden 会隐藏元素，但是其位置还存在与页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘；
• display ：设置了 none 属性会隐藏元素，且其位置也不会被保留下来，所以会触发浏览器渲染引擎的回流和重绘；
• opacity ：会将元素设置为透明，但是其位置也在页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘；同时，值得注意的是， opacity 可以设置过渡效果。

6、CSS3有哪些新特性

• 新增各种CSS选择器 （ :not(.input) ：表示所有 class 不是 input 的节点）
• 圆角 （border-radius:8px）
• 多列布局 （column）
• 阴影和反射 （Shadow\Reflect）
• 文字特效 （text-shadow）
• 线性渐变 （gradient）
• 旋转，缩放，定位，倾斜 （transform）
• 动画 （Animation）
• 多背景，背景裁剪

7、css3 新增伪类 - 伪元素

第一组：

• p:first-of-type 选择属于其父元素的首个元素的每个元素。
• p:last-of-type 选择属于其父元素的最后元素的每个元素。
• p:only-of-type 选择属于其父元素唯一的元素的每个元素。
• p:only-child 选择属于其父元素的唯一子元素的每个元素。
• p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。

第二组：

• :enabled 已启用的表单元素。
• :disabled 已禁用的表单元素。
• :checked 单选框或复选框被选中。
• ::before 在元素之前添加内容。
• ::after 在元素之后添加内容,也可以用来做清除浮动。
• ::first-line 添加一行特殊样式到首行。
• ::first-letter 添加一个特殊的样式到文本的首字母。

第三组：

• 伪类语法一个 : ，它是为了弥补 css 常规类选择器的不足。
• 伪元素语法两个 : ，它是凭空创建的一个虚拟容器生成的元素。

8、display:inline-block 什么时候不会显示间隙？

• 浮动
  
• 移除空格
  
• 使用 margin 负值
  
• 使用 font-size:0
  
• letter-spacing 字间距
  
• word-spacing 词间距
  

11、rgba() 和 opacity 的透明效果有什么不同？

• rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度；
• 而 rgba() 只作用于元素的颜色或其背景色。（ 设置 rgba 透明的元素的子元素不会继承透明效果 ）

12、为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法：

* {
        padding: 0;
        margin: 0;
    }
复制代码

淘宝的样式初始化代码：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
        margin: 0;
        padding: 0;
    }
body, button, input, select, textarea {
    font: 12px/1.5tahoma, arial;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
}
address, cite, dfn, em, var {
    font-style: normal;
}
code, kbd, pre, samp {
    font-family: couriernew, courier, monospace;
}
small {
    font-size: 12px;
}
ul, ol {
    list-style: none;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
sup {
    vertical-align: text-top;
}
sub {
    vertical-align: text-bottom;
}
legend {
    color: #000;
}
fieldset, img {
    border: 0;
}
button, input, select, textarea {
    font-size: 100%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
复制代码

📁三、适配问题

1、px、em的区别

• px 和 em 都是长度单位，区别是：
• px 值固定，容易计算。
• em 值不固定，是相对单位，其相对应父级元素的字体大小会调整

2、项目中移动端怎么用 rem 做的适配

rem 作用于根元素，也就是作用于 html 元素。在实际的项目中，通常会在初始化样式中这样设置：

html{
  font-size: 625%; /* 即 16px * 625% = 100px */
}
body{
  font-size: 0.16rem; /* 即 0.16rem * 100 = 16px */
}
复制代码

3、px、em和rem的适用背景

• px ，绝对长度单位，最常用；
• em，相对长度单位，不常用；
• rem，相对长度单位，常用于响应式布局。

📂四、动画类

1、css3缩放、旋转相关的API

要弄懂 css 动画相关的 API ，特别是 animation 、 transition 、 transform 、 translate  这几个属性，要历届清楚他们之间的区别。具体如下：

• animation ：用于设置动画属性，他是一个简写的属性，包含6个属性；
• transition ：用于设置元素的样式过度，和 animation 有着类似的效果，但细节上有很大的不同；
• transform ：用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系；
• translate ： translate 只是 transform 的一个属性值，即移动，除此之外还有 scale 等。

2、如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最小间隔为 1×1000ms60＝16.7ms\frac{1×1000ms}{60}＝16.7ms601×1000ms＝16.7ms

3、有没有做过动画？如何实现一个元素从做向右移动，每秒1px

• translate transition transform
• requestAnimationFrame
• animation动画

4、使用css实现一个持续的动画效果

animation:mymove 5s infinite;
@keyframes mymove {
    from {
        top: 0px;
    }
    to {
        top: 200px;
    }
}