引言

首先出这篇文章，一方面是为了记录巩固我所学的知识，明白面试的高频考点。不过我是不鼓励大家背题的，初衷是希望总结的一些面试题能帮助你查漏补缺，温故知新。这些题并不是全部，如果你还想看得更多，可以访问小狮子前端，目前已经有552道大厂真题了，涵盖各类前端的真题，欢迎加入我们一起来讨论~

—— 以下是正文 ——

介绍一下css盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距margin，边框border，填充padding，和实际内容content。

有两种盒模型，标准盒模型和怪异盒模型，区别在于，元素的宽高大小表现为content的大小，而怪异盒模型则表现为content + padding + border的大小

样式框架的原理，布局方法有哪些，flex，grid，还有吗？

正常流布局 浏览器默认的HTML布局方式，就是按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行

浮动布局 使用 float 属性，使元素脱离文档流，浮动起来。

定位布局 通过 position 属性来进行定位。（这里常考绝对定位于相对定位基准问题，下面再讲）

使用display布局
在css中实现页面布局的主要方法是设定display属性的值。此属性允许我们更改默认的显示方式。
通过将一些内容从block转换为inline（反之亦然）来更改默认表示形式，更重要的是可以通过设置flex 或 grid 进行布局：

flex布局 通过容器和轴进行布局设置。其中，容器分为父容器和子容器。轴分为主轴和交叉轴。

grid 网格布局：可以实现二维布局方式，和 table 布局差不多，基本概念-网格线(Grid Lines) 网格的水平和垂直的分界线、网格轨道(Grid Track) 好比表格中行或列，分为grid column和grid row 、网格单元格(Grid Cell) 好比表格中的单元格、网格区域(Grid Area) 好比表格合并单元格后的区域（用的不是很多）

多列布局 : 一种把内容按列排序的方式，就像文本在报纸上排列那样。使用 column-count属性设置需要多少列，也可以使用column-width以至少某个宽度的尽可能多的列来填充容器。

css绝对定位和相对定位都是以谁为基准？

定位position的几个属性要清楚：

静态定位(Staticpositioning)是每个元素默认的属性——它表示“将元素放在文档布局流的默认位置。
相对定位(Relative positioning)允许我们相对于元素在正常的文档流中的位置移动它——包括将两个元素叠放在页面上。这对于微调和精准设计(design pinpointing)非常有用。
绝对定位(Absolute positioning)脱离文档流。我们可以将元素相对于页面的元素边缘固定，或者相对于该元素的最近被定位祖先元素(nearest positioned ancestor element)。绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板。
固定定位(Fixed positioning)与绝对定位非常类似，但是它是将一个元素相对浏览器视口固定。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用。
粘性定位(Sticky positioning)它会让元素先保持和position: static一样的定位，当它的相对视口位置(offset from the viewport)达到某一个预设值时，他就会再像position: fixed一样定位（某些网站头导航栏滚动到一定位置固定到屏幕）。

再回答这个问题：

absolute 绝对定位相对于最近的已定位的祖先元素, （有已定位指position不是static的元素祖先元素）如果无已定位祖先元素, 以body元素为偏移参照基准, 完全脱离了标准文档流。
relative：相对定位元素的定位是相对其正常位置。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。

共同点：改变行内元素的呈现方式，都脱离了文档流；
不同点：absolute的”根元素“是可以设置的，fixed的“根元素”固定为浏览器窗口

浮动布局和flex布局相比有什么优缺点？

flex：优点在于其容易上手，根据flex规则很容易达到某个布局效果。缺点是：浏览器兼容性比较差，只能兼容到ie9及以上。

浮动：浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。浮动布局的优点就是比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的。

清除浮动

clear 规则用于清除元素浮动影响
::after 伪类为父元素添加后标签，实现清除浮动影响
通过添加父元素并设置 overflow 属性可以清除浮动，原因：父元素产生 BFC 机制，即父元素的高度计算会包括浮动元素的高度。

bfc是什么，怎么样形成bfc，bfc有哪些用？

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

怎样形成一个BFC？
块级格式化上下文由以下之一创建：

根元素或其它包含它的元素
浮动 (元素的 float 不是 none)
绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
非块级元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex
块级元素具有overflow ，且值不是 visible

BFC用处

清除浮动（规则6）
布局：自适应两栏布局（规则4、5）
防止垂直margin合并（规则5）

BFC规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的左外边缘（margin-left)，与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

css选择器有哪些？

基本选择器比如标签标签选择器、类选择器、ID选择器，机构选择器比如后代、子、紧邻兄弟、后兄弟选择器，伪类选择器

基本选择器：

标签选择器：通配符选择器*、根据标签为元素设置样式
类选择器：.class 类选择器是为一类状态声明样式规则
ID选择器：#id 为有 id 属性的元素设置样式

结构选择器：

后代选择器：div p 选择元素内部的所有元素
子元素：div>p 选择子元素，不包括孙级及以下元素
紧邻兄弟元素： div+p 选择紧挨着的同级兄弟元素
后兄弟元素选择器：p~ul 选择后面的所有兄弟元素

属性选择器：[target] 带有 target 属性所有元素、 [target=_blank]targe 属性等于”_blank” 的所有元素。。。根据属性来为元素设置样式。

伪类选择器：

超链接伪类 :target（控制具有锚点目标元素的样式）、:root （根元素选择伪类即选择html）、:empty （没有内容和空白的元素）
结构伪类：first-child 、 :last-child 、:nth-child(n) 、
nth-child(odd) 选择奇数、 nth-child(even)选择偶数（表格隔行变色 table tr>td:nth-child(odd)）
表单伪类：input:enabled 选择每个启用的 input 元素
字符伪类：p:first-letter 选择每个元素的首字母

元素权重：（可叠加）强制优先级 !important 让某个规则强制有效

预处理器sass（less）优点

可以提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性，提高开发效率。

实现一个垂直水平居中

垂直水平居中

行内元素

.parent {
   height: 高度; 
   text-align: center;
}
.son {
    line-height: 高度;
}

flex布局

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
}
//或者设置父flex ，子 margin: auto;

table

.parent {
  display: table;
  text-align: center;
}
.son {
  display: table-cell;
  vertical-align: middle;
}

绝对定位定宽定高

.son {
 position: absolute;
    top: 50%;
    height: 高度;
    margin-top: -0.5高度;
    width: 宽度;
    left: 50%;
    margin-left: -0.5*宽度
}

transform绝对定位不定宽不定高

.son {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 50%;
    transform: translate( 0, -50%);
}

left/right: 0 top/bottom: 0;

.son {
    position: absolute;
    width: 宽度;
    left: 0;
    right: 0;
    margin: 0 auto;

    height: 高度;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

css中隐藏元素的方法，display:none, visibility:hidden,区别？还有什么方式

visibility:hidden、display:none、z-index=-1、opacity：0

opacity：00，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发
visibility:hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display:none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉
z-index=-1，置于其他元素下面

实现一个块从左到右的移动

<style>
  div {
       width: 100px;
        height: 100px;
        background: red;
    }

    div:hover {
        transition: 2s;
        transform: translateX(100px);
    }
</style>

animation的参数，怎样实现一个动画？

使用animation，定义一个函数，以及相关参数，在通过@keyframe规则，创建动画

CSS和JS实现动画的方式

JS实现动画的方式：setInterval，requestAnimationFrame（类似setInterval）

它的主要思想是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。

rAF：requestAnimationFrame是另一种Web API，原理与setTimeout和setInterval类似，都是通过javascript持续循环的方法调用来触发动画动作。但是requestAnimationFrame是浏览器针对动画专门优化形成的APi，在性能上比另两者要好。

CSS实现动画

1.css3的transition–设置样式的属性值是如何从一种状态平滑过渡到另外一种状态

2.css3的transform–应用于元素的2D或3D转换，可以用来设置元素的形状改变，如：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）和matrix（矩阵变形）
通常transform变化和 transition过渡是组合使用的
t；
3.css3的animation（animation属性+@keyframes）–由属性keyframes来完成逐帧动画的。通过对关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变进行平滑过渡。而且关键帧状态的控制是通过百分比来控制的。

下面是一个动画示例：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{/* 内容同上 */}

@-webkit-keyframes myfirst /* Safari and Chrome */
{/* 内容同上 */}

@-o-keyframes myfirst /* Opera */
{/* 内容同上 */}
</style>
</head>
<body>

<div></div>

</body>
</html>