前端基本面试题

 

HTML

  • 如何理解html语义化?

    • html语义化标签更易读(针对人

    • 让搜索引擎更容易读懂（SEO）（针对机器）

  • 块状元素和内联元素？

    • display:block/table;有div h1 h2 table ul ol p等
    • display:inline/inline-block;有span img input button等

css部分

1. 请问div1的offsetWidth是多大？（盒模型宽度计算）

    <style>
        #div1{
            width:100px;
            padding:10px;
            border:1px solid #ccc;
            margin:10px;
        }
    </style>
</head>
<body>
    <div id="div1">this is div1</div>
</body>

知识点: offsetWidth = (内容宽度+内边距+边框),无外边距
因此答案是122px
console.log(document.getElementById('div1').offsetWidth);//122px

补充问题:如果让offsetWidth等于100px,该如何做?

  • 解决方法:添加样式代码：box-sizing:border-box
    • 解释:指定宽度和高度（最小/最大属性）确定元素边框。
      也就是说，对元素指定宽度和高度包括了 padding 和 border（把padding和border算到了100px以内） 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

2. AAA和BBB之间的距离是多少?(margin纵向重叠问题)

知识点:相邻元素的margin-top和margin-bottom会重叠,空p标签被忽略
答案:15px

<style> 
p{	
    font-size: 16px;
    line-height: 1;
    margin-top: 10px;
    margin-bottom: 15px;
}
</style>
</head>
<body>
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
</body>

3.margin的top,left,right,bottom设置负值，有何效果？（margin负值问题）

  1. margin-top和margin-left为负值，元素向上，想左移动
  2. margin-right负值，右侧元素左移，自身不受影响
  3. margin-bottom负值，下方元素上移，自身不受影响

4.什么是BFC?如何应用？（BFC的理解与应用）

  • 简介
    • Block format context ,块级格式化上下文
    • 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

bfc元素表现的特性就是一个独立的盒子，内部的子元素再怎么折腾都不会影响外部的元素和父元素，

如果触发bfc，子盒子的margin和浮动不会对父盒子产生影响，所以可以用来清除浮动问题。

  • 形成BFC的条件

    • float不是none
    • position是absolute或者fixed
    • overflow 不是visible
    • display是flex inline-block等

  • BFC常见应用

    • 清除浮动
    • 利用BFC避免margin重叠。
   <style>
        div {
            background: pink;
            margin: 20px 0;
        }
        li{
            overflow: hidden;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <div>1</div>
    </li>
    <li>
        <div>1</div>
    </li>
    <li>
        <div>1</div>
    </li>
    <li>
        <div>1</div>
    </li>
</ul>
  • 自适应两栏布局

5.如何实现圣杯布局和双飞翼布局？（float布局）

  • 圣杯布局的目的

    1. 三栏布局,中间一栏最先加载和渲染（内容最重要）

    • 两侧内容固定，中间内容随着宽度自适应

    • 一般用于PC网页

      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta ="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }

        #header {
            text-align: center;
            background-color: #f1f1f1;
        }

        #container {
            padding-left: 200px;
            padding-right: 150px;
        }

        #container .column {
            float: left;
        }

        #center {
            background-color: #ccc;
            width: 100%;
            /*

            */
        }
        #left {
            position: relative;
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
            /*
            margin-left移动后只能覆盖上边浮动的块元素，
            因为padding是container的留白，所以#left元素不会出现在上边.
            因为是浮动所以left元素本来就应该是在上面的，但是被挤下来了
            */

            right: 200px;

        }

        #right {
            background-color: red;
            width: 150px;
            margin-right: -150px;/*margin-left移动后只能覆盖上边浮动的块元素，padding是container的留白，#left元素不会出现在上边*/
            /*
             margin-right: -150x; 正常效果是右侧的元素向左移动150px,占据它原来的所有空间（没有右侧元素），
             也就相当于它自身的宽度在外界看来已经是0了，又因为它本来就是在上边的(三个元素都是浮动)，因为有宽度而被挤下来了，所以现在它没有宽度了，所以就上去了
            */
            /*
            其他实现方式:
            position: relative;
            left: 150px;
            margin-left: -150px;

            */


        }

        #footer {
            text-align: center;
            background-color: #f1f1f1;
        }

        /* 手写 clearfix */
        .clearfix:after {
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
<!--position的值为absolute、fixed的元素脱离文档流，static、relative没有脱离文档流-->
<!--块级元素一个一排地从上向下堆放，行内元素从左往右地堆放，这就是一个标准的流程-->
<div id="header">this is header</div>
<div id="container" class="clearfix">
    <div id="center" class="column">this is center</div>
    <div id="left" class="column">this is left</div>
    <div id="right" class="column">this is right</div>
</div>
<div id="footer">this is footer</div>
</body>
</html>

  • 圣杯布局和双飞翼布局的技术总结

    1. 使用float布局

    2. 两侧使用margin负值，以便和中间内容横向重叠

    3. 防止中间内容被两侧覆盖，一个用padding一个用margin

    4. 圣杯布局是用外层盒子的padding进行留白，所以内层盒子要想出现在留白处除了使用margin-left(rigth)还要借助相对定位。
      而双飞翼布局是利用中间盒子的margin进行留白，所以直接用margin-left(rigth)就可以出现在留白处了

      <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta ="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .main{
            width: 100%;
        }
        .center{
            margin:0 150px 0 200px;
            background-color: red;
        }
        .f{
            float: left;
        }
        .left{
            width: 200px;
            background-color: pink;
            margin-left: -100%;
        }
        .right{
            width: 150px;
            background-color: purple;
            margin-left: -150px;
        }
    </style>
</head>
<body>
  
<div class="main f">
    <div class="center">this is center</div>
</div>
<div class="left f">this is left</div>
<div class="right f">this is right</div>
</body>
</html>

6.手写clearfix

原理：通过CSS伪元素在容器的内部元素之后添加一个看不见的空格“/20”或点“.” ，并且设置clear属性清除浮动
.clearfix:after {
  content: ''; //和:before 及 :after 伪元素配合使用，来插入生成内容。
  display: table;//设置成块状元素，或许display:block;也可以
  clear: both;//在左右两侧均不允许浮动元素。
}
.clearfix{
  zoom:1;/*兼容IE低版本*/
}

7.flex实现三个点的色子（flex布局）

  • flex实现一个三点的色子
  • 要求熟练掌握属性:
    • flex-direction
    • justify-content
    • aligin-items
    • flex-wrap
    • align-self

8. absolute和relative分别依据什么定位

  • relative依据自身定位

  • absolute依据最近一层的定位元素定位

    • 定位元素:

      • absolute relative fixed
      • body

      先找absolute relative fixed 如果没有就直接参考body定位

9. 居中对齐有哪些实现方式？

  • 水平居中
    • inline元素：text-align:center
    • block元素: 给宽度+margin:auto
    • absolute元素:left:50%+margin-left负值（需要知道子元素的尺寸）
  • 垂直居中
    • inline元素：line-height的值等于height值
    • absolute元素:top:50% + margin-top负值 （需要知道子元素的尺寸）
    • absolute元素:transform(-50%,50%)（不需要知道尺寸）
    • absolute元素:top,left,bottom,right=0+margin:auto（不需要知道尺寸）

10.图文样式

line-height如何继承:

<style type="text/css">
  body {
    font-size: 20px;
    line-height: 200%;
  }
  p {
    background-color: #ccc;
    font-size: 16px;
  }
</style>

<body>

	  <p>
      这是一行文字
  </p>

</body>
  • line-height: 50px; line-height为确定数值，那么p标签的line-height直接继承50px
  • line-height: 1.5;line-height为比例数值，那么p标签的继承的line-height为16*1.5=24px(补充知识:font-size=line-height=16)
  • line-height: 200%;line-height为百分比的形式，那么p标签的继承的line-height为40px(父元素的font-size)*200%=40px

11.响应式

rem:

  • px,绝对长度单位，最常用

  • em,相对长度单位，相对父元素，不常用

  • rem,相对长度单位，相对于根元素(html元素)，常用于响应式布局

    • 换算尺度由html设置，如:html的 font-size为100px,那么子元素的font-size的1rem就是100px，0.16rem就是16px
    • 除了font-size以外任何使用长度单位的情况也都可以使用rem

响应式布局的常用方案:

  • media-query,根据不同的屏幕宽度设置根元素属性值，例如：font-size

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta ="X-UA-Compatible" content="ie=edge">
    <title>响应式布局</title>
    <style type="text/css">
        @media only screen and (max-width: 374px) {
            /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
            html {
                font-size: 86px;
            }
        }
        @media only screen and (min-width: 375px) and (max-width: 413px) {
            /* iphone6/7/8 和 iphone x */
            html {
                /*以iphone6/7/8 和 iphone x为标准*/
                font-size: 100px;
                /* 这是标准，以它为基础可以定义86px和110px  100/（375/320）=86   100/(375/414)=110 */
            }
        }
        @media only screen and (min-width: 414px) {
            /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
            html {
                font-size: 110px;
            }
        }

        body {
            font-size: 0.16rem;
            /* 因为上边的html设置的不同，在不同的手机上显示的具体数值不同 */
        }
        #div1 {
            width: 1rem;
            /* 因为上边的html设置的不同，在不同的手机上显示的具体数值不同 */
            background-color: #ccc;
        }

    /*    任何元素都可以使用响应式*/

    </style>
</head>
<body>
    <div id="div1">
        this is div
    </div>
</body>
</html>

  • rem，基于根元素的相对单位

vw/vh

  • rem的弊端

    • 弊端：阶梯性

  • 网页视口尺寸

    • window.screen.height //屏幕高度

    • window.innerHeigth //网页视口高度 =100vh

    • document.body.clientHeigth //body高度

  • vw/vh
    • 优点:比rem方式更加细腻，避免了阶梯性
      • 1vh是网页视口高度的1/100
      • 1vw是网页视口宽度的1/100
      • vmax取两者最大值;vmin取两者最小值

12.css面试总结

  • 如何理解HTML语义化？
    • 让人更容易读懂（增加代码可读性）
    • 让搜索引擎更容易读懂（SEO）
  • 常见的块状元素和内联元素有哪些？
    • display:block/table;有div h1 h2 table ul ol p等
    • display:inline/inline-block;有span img input button等
  • 盒模型宽度如何计算？
    • offsetWidth = (内容宽度+内边距+边框),无外边距
    • 让元素的width=offsetWidth：使用box-sizing:border-box;
  • margin 纵向重叠问题
    • 相邻元素的margin-top和margin-bottom会发生重叠
    • 空白内容的p标签也会重叠
  • 元素margin负值问题
    • margin-top和margin-left负值，元素向上，向左移动
    • margin-rigth负值，右侧元素左移，自身不受影响
    • margin-bottom负值,下方元素上移，自身不受影响
  • BFC理解和应用
    • 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
  • 形成BFC的条件：
    • xxx见上文
  • BFC的常见应用
    • 清除浮动
  • 圣杯布局和双飞翼布局的技术总结
    • 使用float布局
    • 两侧使用margin负值，以便和中间内容横向重叠
    • 防止中间内容被两侧覆盖，一个用padding一个用margin
  • 手写clearfix
  • flex布局（画三个点的色子）
  • absolute和relative的定位
    • relative依据自身定位
    • absolute依据最近一层的元素定位
  • 居中对齐的实现方式
    • 水平居中
    • 垂直居中
  • line-height继承
  • rem是什么
  • 响应式布局的常用方案