最新版前端工程师面试题--前端基础(2)-技术圈

1.2、Css

介绍一下盒模型

参考回答：

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

标准盒模型：一个块的总宽度 = width+margin(左右) + padding(左右) + border(左右)

怪异盒模型：一个块的总宽度 = width+margin(左右)(既width已经包含了padding和border值)

设置盒模型：box-sizing:border-box;

css布局

参考回答：

六种布局方式总结：圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。

圣杯布局是指布局从上到下分为header、container、footer，然后container部分定为三栏布局。这种布局方式同样分为header、container、footer。圣杯布局的缺陷在于center是在container的padding中的，因此宽度小的时候会出现混乱。

双飞翼布局给center部分包裹了一个main通过设置margin主动地把页面撑开。Flex布局是由CSS3提供的一种方便的布局方式。

绝对定位布局是给container设置position:relative和overflow:hidden，因为绝对定位的元素的参照物为第一个postion不为static的祖先元素。left向左浮动，right向右浮动。center使用绝对定位，通过设置left和right并把两边撑开。center设置top:0和bottom:0使其高度撑开。

表格布局的好处是能使三栏的高度统一。

网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。

网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关系。

transition和animation的区别

参考回答：

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

Flex布局

参考回答：

Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

布局的传统解决方案，基于盒状模型，依赖display属性+position属性+float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

简单的分为容器属性和元素属性

容器的属性：

flex-direction：决定主轴的方向（即子item的排列方法）

justify-content：对齐方式，水平主轴对齐方式

align-items：对齐方式，竖直轴线方向

项目的属性（元素的属性）：

order属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为0

flex-grow属性：定义项目的放大比例，即使存在空间，也不会放大

flex-shrink属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个item的flow-shrink为0，则为不缩小

flex-basis属性：定义了在分配多余的空间，项目占据的空间。

flex：是flex-grow和flex-shrink、flex-basis的简写，默认值为0、1、auto。

align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items，默认属性为auto，表示继承父元素的align-items

垂直居中的方法

参考回答：

margin:auto法

div{
  width:400px;
  height:400px;
  position:relative;
  border:1pxsolid#465468;
}
img{
  position:absolute;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

<div>
    <img src="mm.jpg">
</div>

定位为上下左右为0，margin：0可以实现脱离文档流的居中

margin负值法

.container{
  width:500px;
  height:400px;
  border:2px solid #379;
  position:relative;
}
.inner{
  width:480px;
  height:380px;
  background-color:#746;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-190px;/*height的一半*/
  margin-left:-240px;/*width的一半*/
}

补充：其实这里也可以将marin-top和margin-left负值替换成，transform：translateX(-50%)和transform：translateY(-50%)

table-cell（未脱离文档流的）

设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。

div{
  width:300px;
  height:300px;
  border:3pxsolid#555;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
img{
  vertical-align:middle;
}

利用flex

将父元素设置为display:flex，并且设置align-items:center;justify-content:center;

.container{
  width:300px;
  height:200px;
  border:3px solid #546461;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
}
.inner{
   border:3px solid #458761;
   padding:20px;
}

说一下块元素和行元素

参考回答：

块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度

行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失效。

多行元素的文本省略号

参考回答：

display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;

visibility=hidden,opacity=0，display:none之间的区别

参考回答：

opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的

visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件

display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

CSS选择器有哪些，优先级呢

参考回答：

id选择器，class选择器，标签选择器，伪元素选择器，伪类选择器等

同一元素引用了多个样式时，排在后面的样式属性的优先级高；

样式选择器的类型不同时，优先级顺序为：id选择器 > class选择器 > 标签选择器；

标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低，至少比标签选择器的优先级低；

带有!important标记的样式属性的优先级最高；

样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

position属性的值有哪些及其区别

参考回答：

Position属性把元素放置在一个静态的，相对的，绝对的，固定的位置中，

Static：位置设置为static的元素，他始终处于页面流给予的位置，static元素会忽略任何top,buttom,left,right声明

Relative：位置设置为relative的元素，可将其移至相对于其正常位置的地方，因此left：20会将元素移至元素正常位置左边20个像素的位置

Absolute：此元素可定位于相对包含他的元素的指定坐标，此元素可通过left，top等属性规定

Fixed：位置被设为fiexd的元素，可定为与相对浏览器窗口的指定坐标，可以通过left，top，right属性来定位

inline-block、inline和block的区别

参考回答：

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。

block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。block元素可以设置margin和padding属性。

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

inline元素设置width,height属性无效。

inline元素的margin和padding属性，水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果；但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom不会产生边距效果。

inline-block：简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

css预处理器有什么

参考回答：

less，sass等