前端开发 面经

「前端开发」 -

Interview-01

面试经验-01

Posted by eliochiu on November 20, 2022

Q: 讲一下盒模型，普通盒模型和怪异盒模型有什么区别？

CSS中，所有元素都可以看成是一个盒模型，它规定了元素的显示方式和元素之间的关系。盒模型共由四部分组成，它们分别是：内容区（content）、内边距（margin）、边框（border）和外边距（margin），其中内边距是内容和边框之间的距离，外边距是两个盒模型之间的距离。CSS盒模型有两种，分别是标准盒模型和IE盒模型。

标准盒模型，也称w3c盒模型，是一般网页经常使用的一种盒模型。在标准盒模型下，一个盒子的总宽度= width + padding(左右) + border(左右)+ margin(左右) ，width属性只控制内容区的宽度。

IE盒模型，也称怪异盒模型，主要用于IE内核的浏览器上。在IE盒模型下，一个盒子的总宽度=width + margin（左右），width属性同时控制了内容区、内边距和边框，若width指定后调整内边距和边框，相应的宽度变化会反映在内容区。

CSS的box-sizing属性用于指定盒模型，其中box-sizing: content-box是标准盒模型，box-sizing: border-box是IE盒模型。

Q: 块元素和行内元素区别是什么？常见块元素和行内元素有哪些？

HTML元素可以分为块元素和行内元素，他们具有不同的显示模式。可以通过CSS的display属性控制元素的显示模式，其中display: block将该元素转换成块元素，display: inline将该元素转换成行内元素。

块元素有下面的特点：

  • 高度和宽度属性有效，margin, padding, border等盒子模型属性在水平和垂直两个有效。
  • 块元素独占一行，从上到下排列。
  • 默认宽度是父元素宽度的100%，可以充当行内元素和块级元素的容器。

行内元素有下面的特点：

  • 高度和宽度属性无效，margin, padding, border等盒子模型属性在水平方向有效，垂直方向无效。
  • 行内元素从左到右在一行排列。
  • 宽度就是其中文字的宽度，完全由其中元素撑开。

常见的块级标签：div, p, h1~h6, ul, ol, li, dl, dd, dt, table, tr, header, nav, main, footer, section, article, aside, form等

常见的行内标签：span, i, b, u, strong, em, del, ins, a

Q: HTML语义化标签有哪些？

  • header：常用在网页/section的页眉
  • nav：常用在导航链接处
  • footer：常用在网页/section的页脚
  • hgroup：标题组
  • section：分段或分块
  • article：独立的部分
  • aside：当前页面的附属信息
  • figure：独立的流内容（图像、代码、图表）
  • figurecaption：用于定义figure的标题
  • address：联系信息，一般用于末尾

Q: 伪类和伪元素的区别是什么？

伪类描述的是出于某种状态的元素（实际上并不存在，是一种悬浮的元素），类似于往已有的元素上添加类。例如“第一个子元素”、“访问过的元素”等，伪元素由:开始；

而伪元素则是在页面中创建了实际的元素，由::开始。例如::after、::before。

Q: CSS如何实现垂直居中？

  • line-height设置成父元素的height，这种方法适用于子元素是单行文本的情况
  • display: inline-block, vertical-align: middle
  • 父元素display: table， vertical-align: middle，子元素display: table-cell
  • 父元素display: flex, align-items: center或者align-itself: center
  • 父元素添加伪元素： 
    1
2
3
4
5
6

    #father::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
  • 父元素设置相对定位，子元素绝对定位，top: calc(50% - 自身高度 / 2)
  • 父元素设置相对定位，子元素绝对定位，top: 50%, margin-top: -自身高度 / 2
  • 父元素设置相对定位，子元素绝对定位，top: 50%，transform: translateY(-50%)，该方式无需知道要居中的元素的尺寸

Q: CSS常见的选择器有哪些？

  • 通配选择器*
  • 元素选择器p
  • 类选择器.
  • ID选择器#
  • 属性选择器[]
  • 交集选择器div.red
  • 并集选择器div,#red
  • 后代选择器father son
  • 子元素选择器father > son
  • 通用兄弟选择器sbling1 ~ sbling2
  • 相邻兄弟选择器sbling1 + sbling2
  • 伪类选择器：:
  • 伪元素选择器：::

Q: CSS的优先级如何计算？

优先级遵循层叠、特指度等规则：

  • !important永远优先执行
  • 行内样式 > ID选择器 > 类/伪类/属性选择器 > 元素/伪元素选择器 > 通配选择器，如果是复合选择器，则将对应选择器的权重相加再比较
  • 继承具有最低权重
  • 相同权重，遵循层叠性，后定义的样式覆盖前面的样式，且内联 > 内部样式表 > 外部样式表

Q: 长度单位px、em和rem的区别是什么？

px是像素，是一个绝对长度单位，相对屏幕分辨率来说的，一旦设置了就无法因为适应页面大小而改变。

em是一个相对的长度单位，它是相对于当前对象内文本的字体尺寸（注意不是父元素的字体尺寸），若没有设置行内文本的字体尺寸，则使用浏览器默认字体尺寸，一般为16px。rem则是一个相对长度单位，它是相对于根元素的字体尺寸来说的。

em和rem两个相对长度单位比px更具有灵活性，常用在响应式布局中。em虽然灵活，但由于继承，它也存在循环嵌套的问题（通过继承，父元素的字体大小会影响子元素的字体大小），而rem则没有这个问题。

Q: 讲一下flex弹性盒布局？

flex是一种布局方式，给一个元素指定了display: flex，该元素就成为弹性容器，其内部的所有元素都变成了弹性项目。

弹性容器有两个轴：主轴和交叉轴，其中主轴默认情况下按照从左到右排列，交叉轴从上到下排列。主轴的起始位置和终止位置叫做main-start, main-end，交叉轴的起始位置和终止位置叫做cross-start, cross-end。

flex布局共有两种属性：容器属性和项目属性，他们分别用于规定容器和项目的某些行为。

  • flex-direction: row | row-reverse | column | column-reverse
  • flex-wrap: nowrap | wrap | wrap-reverse
  • flex-flow: <flex-direction> | <flex-wrap>
  • justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly
  • align-items: flex-start | center | flex-end | stretch | baseline

  • align-content: flex-start | center | flex-end | stretch | space-between | space-around | sapce-evenly

  • flex-grow：规定剩余空间如何分配，默认值为0，代表不分配
  • flex-shrink：如果空间不够该如何缩小，默认值为1，代表自动缩小
  • flex-basis：指定初始宽度、高度，默认为auto
  • flex: <flex-grow> | <flex-shrink> | <flex-basis>
    • flex: initial = flex: 0 1 auto
    • flex: auto = flex: 1 1 auto
    • flex: none = flex: 0 0 auto
    • flex: 数字 = flex: 数字 0 0
  • align-self：flex-start | center | flex-end | stretch | baseline
  • order: <integer>。默认为0，越小越显示在前面，越大越显示在后面。

Q: 浮动塌陷问题解决方法是什么？

清除浮动：

  • 额外标签法
  • BFC
  • 伪元素法
  • 双伪元素法

Q: position属性的值有哪些？各个值是什么含义？

  • static：无定位，遵循标准流的布局方式
  • relative：相对定位，相对其在标准流中的位置偏移，仍保留原有位置
  • absolute：绝对定位。相对其距离最近的有定位的祖先元素进行偏移，脱离标准流
  • fixed：固定定位。相对其视口进行偏移，脱离标准流
  • sticky：粘性定位。阈值之前相对定位，到达阈值变成固定定位

Q: BFC、IFC是什么？

BFC叫做块级格式化上下文，IFC是行内（内联）格式化上下文。

BFC、IFC可以看作元素的一种属性，当BFC、IFC被触发时，这种属性使得该元素成为一个封闭的容器，其子元素不会影响其他元素，常用于清除浮动、解决外边距合并问题、自适应布局等。

触发BFC的方式：

  • overflow不为visible
  • float不为none
  • position不为relative, static
  • display: inline-block | table-cell | table-caption

IFC作用以及触发方式：

  • 水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
  • 垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。
CATALOG
    ▲ TOP