字节跳动最爱考的前端面试题：CSS 基础

2023-04-11 01:41:01html-css029

字节跳动最爱考的前端面试题：CSS 基础,第1张

参考链接： juejin.im/post/5e8d52…

animation、transition、transform、translate 这几个属性要搞清楚：

水平居中：

垂直居中

BFC 是块级格式上下文，IFC 是行内格式上下文：

不会，因为 BFC 是页面中一个独立的隔离容器，其内部的元素不会与外部的元素相互影响，比如两个 div，上面的 div 设置了 float，那么如果下面的元素不是 BFC，也没有设置 float，会形成对上面的元素进行包裹内容的情况，如果设置了下面元素为 overflow：hidden；属性那么就能够实现经典的两列布局，左边内容固定宽度，右边因为是 BFC 所以会进行自适应。

box-sizing 属性可以被用来调整这些表现:

BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

五种：

BFC 的特性：

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 CSS盒模型： 标准模型 + IE模型

标准盒子模型：宽度=内容的宽度（content）+ border + padding

低版本IE盒子模型：宽度=内容宽度（content+border+padding），如何设置成 IE 盒子模型:

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 决定。

问：为什么会有这种现象？你能解释一下吗

是由块级格式上下文决定的，BFC，元素在 BFC 中会进行上下排列，然后垂直距离由 margin 决定，并且会发生重叠，具体表现为同正取最大的，同负取绝对值最大的，一正一负，相加

BFC 是页面中一个独立的隔离容器，内部的子元素不会影响到外部的元素。

不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

了解更多加入我们前端学习圈

1）

题目给出的初始值是在计算机存储形式，即补码形式。a为负数，b为整数。

a-b = a + (-b)——思路是先得到（-b）的补码形式，然后将a的补码与（-b）的补码相加。

a的补码题目已给出: 0xF000000000000000

-b的原码：0xFFFFFFFFFFFFFFFF

-b的反码：0x8000000000000000

-b的补码：0x8000000000000001

a-b = 0xF000000000000000 + 0x8000000000000001

= 0x7000000000000001

= 2^62 + 2^61 + 2^60 + 1

负数-正数 = 正数？这是因为计算机存储字节长度的限制导致的最高位溢出。

2）

Boolean([]) //true

布尔类型里只有这几参数个返回false，其它都为true

Boolean(undefined) // false

Boolean(null) // false

Boolean(0) // false

Boolean(NaN) // false

Boolean('') // false

布尔类型与其它任何类型进行比较，布尔类型将会转换为number类型。

Number([])返回0所以第二题为true

Number转换类型的参数如果为对象返回的就是NaN,

那么Number({})返回的就是NaN。

通过Object.prototype.toString.call({})来判断类型，0与NaN相比为false

所以 true true false

块元素

address - 地址

blockquote - 块引用

center - 举中对齐块

dir - 目录列表

div - 常用块级容易，也是css layout的主要标签

dl - 定义列表

fieldset - form控制组

form - 交互表单

h1 - 大标题

h2 - 副标题

h3 - 3级标题

h4 - 4级标题

h5 - 5级标题

h6 - 6级标题

hr - 水平分隔线

isindex - input prompt

menu - 菜单列表

noframes - frames可选内容6)

一、无继承性的属性

1、display：规定元素应该生成的框的类型

2、文本属性：

vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向

3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性：content、counter-reset、counter-increment

7、轮廓样式属性：outline-style、outline-width、outline-color、outline

8、页面样式属性：size、page-break-before、page-break-after

9、声，（对于不支持frame的浏览器显示此区块内容

noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）

ol - 排序表单

p - 段落

pre - 格式化文本

table - 表格

ul - 非排序列表

通过iframe设置document.domain可以实现跨域

ES6

A:类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

B:export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

// 报错

export 1

// 报错

var m = 1

export m

上面两种写法都会报错，因为没有提供对外的接口。第一种写法直接输出 1，第二种写法通过变量m，还是直接输出 1。1只是一个值，不是接口。正确的写法是下面这样。

// 写法一

export var m = 1

// 写法二

var m = 1

export {m}

// 写法三

var n = 1

export {n as m}

D:A模块对外暴露了一个对象，引入的时候需要使用解构赋值

import {readFile} from ‘A'

一、无继承性的属性

1、display：规定元素应该生成的框的类型

2、文本属性：

vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向

4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性：content、counter-reset、counter-increment

7、轮廓样式属性：outline-style、outline-width、outline-color、outline

8、页面样式属性：size、page-break-before、page-break-after

9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

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

三、所有元素可以继承的属性

1、元素可见性：visibility

2、光标属性：cursor

四、内联元素可以继承的属性

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

五、块级元素可以继承的属性

1、text-indent、text-align

将一个数组调整为最大堆.

根据堆的性质, 只要保证部分有序即可, 即根节点大于左右节点的值. 将数组抽象为一个完全二叉树, 所以只要从最后一个非叶子节点向前遍历每一个节点即可. 如果当前节点比左右子树节点都大, 则已经是一个最大堆, 否则将当前节点与左右节点较大的一个交换, 并且交换过之后依然要递归的查看子节点是否满足堆的性质, 不满足再往下调整. 如此即可完成数组的堆化.

8）

http请求方法（get、post区别）

1、本质区别：get用于查询信息（查），post用于插入信息（插）；

2、安全性：对于服务器讲，get是安全(不更改信息)、幂等(作用1次和n次效果相同)post不安全、不幂等

对于客户端将，get参数直接暴露在URL, 不安全；post参数放消息体中，更安全；

3、传送长度: get受 URL限制，传送数据量小post传送数据量大，默认不受限制

4、缓存机制、历史记录：get请求会被浏览器主动缓存，也会被保留在历史记录中，post都不可以；

5、数据类型：get只允许ASCII码字符类型，post无限制；

9）

属于JavaScript的typeof运算符的可能结果

10）

条件概率