前端经典面试题（50道）必备神器

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的。

CSS选择器及其优先级

!important

内联样式style=""

ID选择器#id

类选择器/属性选择器/伪类选择器.class.active[href=""]

元素选择器/关系选择器/伪元素选择器html+div>span::after

通配符选择器*

说说BFC

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

BFC应用

防止margin重叠

清除内部浮动

自适应两（多）栏布局

防止字体环绕

触发BFC条件

根元素

float的值不为none

overflow的值不为visible

display的值为inline-block、table-cell、table-caption

position的值为absolute、fixed

BFC的特性

内部的Box会在垂直方向上一个接一个的放置。

垂直方向上的距离由margin决定

bfc的区域不会与float的元素区域重叠。

计算bfc的高度时，浮动元素也参与计算

bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

说说定位相关的属性

position 属性的五个值：

值	描述
static	默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。HTML 元素的默认值，即没有定位，遵循正常的文档流对象。从上到下,从左到右静态定位的元素不会受到 top, bottom, left, right影响。
absolute	位置设置为 absolute 的元素，可定位于相对于第一个已定位（非静态的）的包含它的元素的指定坐标。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html> 此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。会将原来的块元素变成行内块元素
fixed	位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。会将原来的块元素变成行内块元素
relative	位置被设置为 relative 的元素，可将其定位于相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。相对定位元素的定位是相对其自身正常位置。移动相对定位元素，但它原本所占的空间不会改变。
sticky	sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。 position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
inherit	position 属性的值从父元素继承。

谈谈flex布局

采用 Flex 布局的元素，称为 Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex项目（flex item），简称“项目”。

1、父元素属性

属性名

最低0.47元/天解锁文章

一染星辰

关注

6
点赞
踩
50

收藏

觉得还不错? 一键收藏
0
评论
前端经典面试题（50道）必备神器

大学全栈面试题库V120191220目录1. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 2. 你简述盒模型 3. CSS3的新特性 4. CSS选择器及其优先级 5. 说说BFC 6. 说说定位相关的属性 7. 谈谈flex布局 8. 你怎么清楚浮动 9. 两边宽度固定中间自适应的三栏布局(默写题,手写笔试题) 10. 浏览器渲染机制 11. 重绘和回流的区别 12. JS数据类型 13. JS...
复制链接

扫一扫