⌛序言
对于前端来说, css
是初学者必学的一个知识。基本上在涉猎了 html
之后,随之学习的就是 css
。同时, css
也是前端必考的一个知识点,像水平垂直居中、两栏布局和三栏布局以及 bfc
等等,都是面试的常考点也是必考点。因此, 在下面的文章中,将系统地整理周一在秋招过程中所遇到的题目。
一起来学习⑧~~⏰
✏️一、CSS框架先梳理
我们先用一张思维导图来了解关于 css
的一些常考题。详情见下图👇
下面开始梳理各个题目的解答~⏳
🖌️二、基础样式问题
1、请你讲一讲css的权重和优先级
(1)权重
等级 | 定义 | 计算值 |
0级 | 通配选择器、选择符和逻辑组合伪类 | 0 |
1级 | 标签选择器 | 1 |
2级 | 类选择器、属性选择器和伪类 | 10 |
3级 | ID选择器 | 100 |
4级 | style属性内联 | 1000 |
5级 | !important | 10000 |
(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; } }