前端面试题

joseph(sz)

已于 2023-05-05 09:19:58 修改

阅读量400

点赞数 1

分类专栏：前端面试题文章标签： javascript 前端

于 2022-04-08 09:24:18 首次发布

本文链接：https://blog.csdn.net/qq_51141492/article/details/124033248

版权

前端面试题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

第一章面试题基础

第一章面试题基础

01、行内元素有哪些？块级元素有哪些？空元素有哪些？

行内元素：span，img，input

块级元素：div，footer，header，section，p，h1...h6...

空元素：br ,hr

扩展问题：

元素之间的转化问题

例如。给一个div，让转化成行内元素

  <style>
      div {
          /* display: inline; */
        background-color: red;
      }
    </style>
 <body>
     元素之间的转化问题
    <div>这是div</div>
  </body>

效果图：

变成行内元素：在div加入display:inline

效果图：

变成行内块就是：在div加入display:inline-block

行内块的作用：可以设置它的宽度值，高度值。而单纯的inline是设置不了的。

<style>
      div {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>

效果图：

**总结：**元素之间的转化问题

display:inline;  把 某元素 转化为 行内元素===>不独占一行,设置宽高不生效（根据文字大小来设定尺寸）
display:inline-block; 把 某元素 转化为 行内块元素===>不独占一行，但是可以设置宽高
display:block;   把 某元素 转化成块级元素===>独占一行，并且可以设置宽高

02、页面导入样式时，使用link和@import有什么区别？

link是一个标签，@import是属于css中导入样式的一个内容。

区别一：link先有，后有@import(兼容性：link比@import兼容好，体现在ie5)；
区别二（主要）：加载顺序差别，浏览器先加载标签link，后加载@import。

案例：

<link rel="stylesheet" type="text/css" href="a.css" /> 
<div>111</div>
    <p>222</p>

注意：@import要放在前面

//a.css代码
@import 'b.css';
div {
  background-color: red;
}

p{
    background-color:blue;
}

加载顺序是:先加载link标签，才会有@import

03、title与h1的区别、b与strong的区别、i与em的区别

3.1 title与h1的区别

定义：
title ：概括了网站的信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么(网站内容主题)
h1 的定义：文章主题内容，告诉蜘蛛，我们的网站内容最主要的是什么。（更凸显文章主题）

区别1：显示不同
title是显示在 网页标题上。h1是显示在 网页内容上。（主要）
区别2：重要性
title比h1更加的重要(title > h1)==>对于seo的了解

场景：
网站的logo都用的是h1标签包裹的

3.2 b与strong的区别

定义：
b：实体标签，用来给文字加粗的。
strong：逻辑标签，用来加强字符语气。

区别：
b标签只有加粗的样式，没有实际的含义。
strong表示标签内字符比较重要，用以强调。

题外话：为了符合css3的规范，b尽量少用，改用strong就行。

3.3 i与em的区别

定义：
i：是实体标签	用来做文字倾斜的
em：是逻辑标签，用来强调文字内容

区别：
i只是一个倾斜标签，没有实际含义。
em表示标签内字符重要，用以强调。

场景：
i更多的用在字体图标，em术语上，（医药，生物类型）。

04、img标签的title和alt有什么区别。

区别一:
title:鼠标移到图片上放 显示的值
alt： 图片无法加载时，显示的值
区别二：
在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候，为了增强seo效果，要加入alt属性，来描述这张图，是什么内容或者关键词。

05、png，jpg，gif这些图片格式解释一下，分别什么时候用?

png:无损压缩，尺寸体积要比jpg/jpeg的要大。(适合做小图标)
jpg:采用压缩算法，有一点失真，比png体积要小。(中大型图片)
gif：一般做动图。
webp：同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是很好。

06、介绍一下CSS盒子模型

CSS盒子模型有哪些：标准盒子模型、IE盒子模型

CSS盒子模型的区别：
 标准盒子 ：margin、border、padding、content
 IE盒子模型 ：margin、content(border + padding + content)
 
 扩展：通过CSS如何转换盒子模型？
 box-sizing:content-box; //标准盒子模型
box-sizing:border-box  //IE盒子模型

标准盒子模型：

IE盒子模型

07、line-height和line的区别【大厂】

line-height是每一行文字的高，如果文字换行，那么整个盒子就会增大(行数*行高)。
line是一个死值，他永远不会变。

08、CSS选择符有哪些，哪些属性可以继承？

1.css选择符

通配选择符(*)
id选择器(#)
类选择器(.)
标签选择器(div、p、h1...h6)
相邻选择器(+)
后代选择器(ul li)
子元素选择器(>)
属性选择器(a[href])

相邻选择器:

第三的li是红色

.list2 + li {
        background-color: red;
      }

 <ul>
      <li>1</li>
      <li class="list2">2</li>
      <li>3</li>
      <li>4</li>
    </ul>

后代选择器，就是自定义ul里面所有的li的css属性。

 ul li {
        background-color: blue;
      }

如果加一个li，会排除掉第一个。

ul li + li {
        background-color: blue;
      }

经常会做一件事，比如给这些li增加一个上边框，排除掉第一个。

 ul li + li {
        border-top: 5px solid #ccc;
      }

属性选择器：

div[abc] {
        background-color: blue;
      }

<div abc>123</div>
    <div>123</div>
    <div>123</div>

2.css属性哪些可以继承

文字系列：font-size、color、行高line-height、text-align....

文字系列 -案例：

div {
        font-size: 50px;
    	color:orange;
      }

<div>
      <span>这是span</span>
    </div>

3、面试拓展：哪些不能继承？

border、padding、margin...

09、CSS优先级算法如何计算?

优先级比较：!important > 内联样式 > id > class > 标签 > 通配

案例：

<style>
      div {
        background-color: blue !important;
      }
    </style>
<body>
    <div style="background-color: red">123</div>
  </body>

显示的是上面加了!important的蓝色。

比较内联样式和id选择器

<style>
      #box {
        background-color: blue;
      }
    </style>
 <body>
    <div style="background-color: red" id="box">123</div>
  </body>

显示的是内联样式的颜色red

优先级案例

 	<style>
      ul li.lis1 {
        background: red;
      }
      lis1 {
        background: blue;
      }
    </style>

	<ul>
      <li class="lis1">11</li>
      <li class="lis2">22</li>
      <li class="lis3">33</li>
      <li class="lis4">44</li>
    </ul>

发现显示上面的红色。上面的优先级比较高

思考为什么上面能覆盖下面呢？

ul(1) li(1).lis1(10)的权重值是1+1+10=12

而.list(10)权重值是10.所以前面覆盖后面。

思考1这样为啥不是蓝色，

<style>
      ul li.lis1 {
        background: red;
      }
      .lis1,
      .lis2,
      .lis3,
      .lis4 {
        background: blue;
      }
    </style>
	<ul>
      <li class="lis1 lis2 lis3 lis4">11</li>
      <li>22</li>
      <li>33</li>
      <li>44</li>

li里面的 class统称一个类，权重值为10

CSS权重计算：

1、内联样式 style 	权重值：1000
2、id选择器       	 权重值：100
3、类选择器       	权重值：10
4、标签&伪元素选择器   权重值：1
5、通配符选择器(>,+)   权重值：0 (后者覆盖前者)

10、用CSS画一个三角形

用border(边框)画.

如图如果想让左边三角形。

就让border左不透明，然后让border其他地方都是透明的。

 div {
      	width: 0;
        height: 0;
        border-top: 100px solid transparent;
        border-left: 100px solid #ccc;
        border-right: 100px solid transparent;
        border-bottom: 100px solid transparent;
      }

<div></div>

如果想让三角形正放

 div {
        width: 0;
        height: 0;
        border-top: 100px solid transparent;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 100px solid #ccc;
      }

通过边框去画，以中间切割，哪一个不需要，就弄成透明，需要的加上颜色。

11、一个盒子不给宽度和高度，如何水平垂直居中。

<style>
      .container {
        width: 100px;
        height: 100px;
        border: 5px solid #ccc;
      }
      .main {
        background: red;
      }
    </style>

<body>
    <div class="container">
      <div class="main">main</div>
    </div>
  </body>

目的：让main水平垂直居中。

方式一：flex弹性布局（弹性盒子）

 .container {
        display: flex;
        justify-content: center;
        align-items: center;
        
     	width: 100px;
        height: 100px;
        border: 5px solid #ccc;
      }

方式二：定位。

  .container {
        position: relative;
        width: 100px;
        height: 100px;
        border: 5px solid #ccc;
      }
      .main {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: red;
      }

css3系列之transform详解translate

沿着x 和y轴平移。

x轴：负数向左，正数向右。

y轴，负数向上，正数向下。

可以想象margin的正负数。

12、display有哪些值？说明他们的作用

none   			隐藏元素
block  			把某某元素转化成块元素
inline    		把某某元素转换成内联元素
inline-block 	把某某元素转化成行内块元素

13、对BFC规范(块级格式化上下文：block formatting context)的理解？

(重要)BFC就是页面上一个隔离的独立容器，容器里的子元素，不会影响到外面的元素。

1、了解BFC：块级格式化上下文
2、	BFC原则：如果一个元素具有BFC，那么内部元素在怎么弄，都不会影响到外面的元素。
3、如何触发BFc：
 float的值非none
 overflow的值非visible
 display的值为：inline-block、table-cell...
 position的值为：absoute、fixed

案例：ul并没有包着li,经常会遇到的问题，高度塌陷。

 * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
        border: 5px solid #ccc;
      }
      ul li {
        float: left;
        width: 100px;
        height: 100px;
        margin: 10px;
        background: orange;
      }

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>

问题：h1是块级元素，应该独占一行，但是没有

解决方法：通过触发BFC进行一个解决。

因为li影响到h1了，所以创建一个BFC条件，让他不影响就可以了。

在ul里面加入overflow:hidden：解决ul包裹问题

14、清除浮动有哪些方式

1、触发BFC
2、多一个div盒子，然后给盒子加一个clear：both属性(方法比较老)
3、添加虚拟标签（最常用），after

2.案例：ul中加入一个div盒子

 * {
        margin: 0;
        padding: 0;
      }
      ul {
        /* overflow: hidden; */
        list-style: none;
        border: 5px solid #ccc;
      }
      ul li {
        float: left;
        width: 100px;
        height: 100px;
        margin: 10px;
        background: orange;
      }
      div {
        clear: both;
      }

<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <div></div>
    </ul>

案例3、添加一个虚拟标签。

ul::after {
        content: '';
        display: block;
        clear: both;

<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
  
    </ul>

15、在网页中应该使用奇数还是偶数字体？为什么?

偶数：
偶数让文字在浏览器上表现更好看。

另外说明：
ui给前端一般设计图，都是偶数的，这样不管是布局也好，转换px也好，方便一点。

16、有几种定位？分别是根据什么定位？

static[默认]:没有定位
fixed   固定定位，相对于浏览器窗口定位。
relative  相对于自身定位，不脱离文档流
absolute   相对于第一个有relative的父元素，脱离文档流

joseph(sz)

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
前端面试题

文章目录第一章面试题基础01、行内元素有哪些？块级元素有哪些？空元素有哪些？02、页面导入样式时，使用link和@import有什么区别？03、title与h1的区别、b与strong的区别、i与em的区别04、img标签的title和alt有什么区别。05、png，jpg，gif这些图片格式解释一下，分别什么时候用?06、介绍一下CSS盒子模型第一章面试题基础01、行内元素有哪些？块级元素有哪些？空元素有哪些？行内元素：span，img，input块级元素：div，footer，header
复制链接

扫一扫