一线大厂前端经典面试题HTML+CSS部分

左手的ㄟ右手 2022-12-10 03:45 193阅读 0赞

### 大前端时代需要掌握的技术栈 ###

*  HTML5
    
     *  [https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5][https_developer.mozilla.org_zh-CN_docs_Web_Guide_HTML_HTML5]
     *  语义化标签
     *  音视频处理
     *  canvas/webGL
     *  history API
     *  requestAnimationFrame
     *  地理位置
     *  web socket
     *  ...
 *  CSS3
    
     *  常规
     *  动画
     *  盒子模型
     *  响应式布局
     *  ...
 *  JavaScript
    
     *  ECMAScript 3/4/5/6/7/8/9
     *  DOM
     *  BOM
     *  设计模式
     *  底层原理
        
         *  堆栈内存
         *  闭包作用域 AO/VO/GO/EC/ECStack
         *  面向对象OOP
         *  THIS
         *  EventLoop
         *  浏览器渲染原理
         *  回流重绘
         *  ...
 *  网络通信层
    
     *  AJAX/Fetch/axios
     *  HTTP1.0/2.0
     *  TCP
     *  跨域处理方案
     *  性能优化
     *  ....
 *  Hybrid或者APP或者小程序
    
     *  Hybrid
     *  uni-app
     *  RN
     *  Flutter
     *  小程序MPVUE
     *  Weex
     *  PWA
     *  ...
 *  工程化方面
    
     *  webpack
     *  git
     *  linux/nginx
     *  ...
 *  全栈方面
    
     *  node
     *  express
     *  koa2
     *  mongodb
     *  nuxt.js/next.js
     *  ...
 *  框架方面
    
     *  Angular
     *  VUE
        
         *  基础知识
         *  核心原理
         *  vue-router
         *  vue-cli
         *  vuex
         *  element ui
         *  vant
         *  cube
         *  SSR
         *  优化
         *  ...
     *  React
        
         *  基础知识
         *  核心原理
         *  react-router-dom
         *  redux
         *  react-redux
         *  dva
         *  umi
         *  mobix
         *  antd
         *  antd pro
         *  SSR
         *  优化
         *  ...

### 关于HTML+CSS前端面试题 ###

**1、掌握盒子水平垂直居中的五种方法：**

*  绝对定位： 先让子盒子的左上角居中然后在向左和向上移动子盒子的宽和高的一半。缺点是需要知道子盒子具体的宽和高

<html>
    
    <head>
        <meta charset='UTF-8' />
        <title>盒子居中</title>
        <style>
            .box{
                position: relative;
                width: 200px;
                height: 200px;
                margin: auto;
                background-color: pink;
            }
    
            #content{
                position: absolute;
                width: 50px;
                height: 50px;
                background-color: green;
    
                top: 50%;
                left: 50%;
                margin-left: -25px;
                margin-top: - 25px;
            }
    
        </style>
    </head>
    <body>
        <div class="box">
            <div class="content"></div>
        </div>
    </body>
    </html>

*  绝对定位：设置子盒子的上、下、左、右都为0，然后再用margin: auto;来设置居中。不需要知道盒子具体的宽和高，但必须要有固定的宽和高。

<!-- 基于上面的代码改动--?
     #content{
                position: absolute;
                width: 50px;
                height: 50px;
                background-color: green;
    
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }

*  绝对定位+CSS3的translate：同一，先让盒子的左上角居中（left，top 50%），然后再借助translate让子盒子分别向左和向上移动盒子的一半。不需要知道盒子具体的宽和高，但不是所有浏览器都兼容。

<!-- 基于上面的代码改动--?
     #content{
                position: absolute;
                width: 50px;
                height: 50px;
                top: 50%;
                left: 50%;
                transform: translate(-50% -50%);
                background-color: green;
            }

*  display: flex：利用flex布局让子盒子居中，同样也存在兼容性问题

<html>
    
    <head>
        <meta charset='UTF-8' />
        <title>盒子居中</title>
        <style>
            .box{
                display: flex;
                width: 200px;
                height: 200px;
                margin: auto;
                justify-content: center;
                align-items: center;
                background-color: pink;
            }
    
            #content{           
                width: 50px;
                height: 50px;
                background-color: green;          
            }
    
        </style>
    </head>
    <body>
        <div class="box">
            <div class="content"></div>
        </div>
    </body>
    </html>

*  利用JavaScript，获取分别获取大盒子和子盒子的宽和高，然后再通过计算让子盒子居中

<html>
    
    <head>
        <meta charset='UTF-8' />
        <title>盒子居中</title>
        <style>
            .box{
                position: relative;
                width: 200px;
                height: 200px;
                margin: auto;          
                background-color: pink;
            }
    
            #content{
                position: absolute;     
                width: 50px;
                height: 50px;
                background-color: green;          
            }
    
        </style>
    </head>
    <body>
        <div class="box" id="box">
            <div class="content" id="content"></div>
        </div>
    <script>
    let boxW = box.offsetWidth,
        boxH = box.offsetHeight,
        conW = content.offsetWidth,
        conH = content.offsetHeight;
    
    content.style.left = (boxW-conW) / 2 + "px";
    content.style.top = (boxH-conH) / 2 + "px";
    
    </script>
    </body>
    </html>

**2、CSS3中的盒模型**

*  标准盒子模型 box-sizing: content-box，如果调整盒子边框盒子大小会变化，因为这种模型只是内容的大小而不是盒子大小
 *  怪异（IE）盒模型 box-sizing: border-box
 *  flex盒子模型
 *  多列布局

**3、几大布局的经典方案（左右固定中间自适应****）**

*  圣杯布局

<html>
    <head>
    
    <style type="text/css">
        .container{
    	width: 100%;
        height: 100%;
        padding: 0 200px;
        border:1px solid pink;
    }
    
    .left,
    .right{
    	width: 200px;
       	min-height: 200px;
        background: lightgreen;
    }
    
    .center{
    	width: 100%;
        min-height: 400px;
        background: lightblue
        
    }
    
    .left,
    .right,
    .center{
    	float: left;
     }
     
     .left{
     	position: relative;
     	margin-left: -100%;
        left: -200px;
     }
     
     .right{
     	margin-right: -200px;
     }
    
    </style>
    
    </head>
    
    <body>
      <div class="container">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </body>
    </html>

*  双飞翼布局

<html>
    <head>
    
    <style type="text/css">
    
    .container{
    	width: 100%;
    }
    
    .left,
    .right{
    	width: 200px;
       	min-height: 200px;
        background: lightgreen;
    }
    
    .container .center{
    	margin: 0 200px;
        min-height: 400px;
        background: lightblue
        
    }
    
    .left,
    .right,
    .container{
    	float: left;
     }
     
     .left{
     	margin-left: -100%;
     }
     
     .right{
     	margin-left: -200px;
     }
    
    </style>
    
    </head>
    
    <body>
      <div class="container">
        <div class="center"></div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </body>
    </html>

*  CALC公式，由于在css中使用公式会非常影响效率，所以基本不用这种方式，仅了解即可

<html>
    <head>
    
    <style type="text/css">
    
    
      .left,
      .right,
      .center{
          float: left;
       }
     
      .left,
      .right{
          width: 200px;
          min-height: 200px;
          background: lightgreen;
      }
    
      .center{
          width: calc(100% - 400px);
          min-height: 400px;
          background: lightblue
    
      }
    
    </style>
    
    </head>
    
    <body>
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
    </body>
    </html>

*  flex布局

<html>
    <head>
    
    <style type="text/css">
    .container{
    	display: flex;
        justify-content: space-between;
        height: 100%;
    }
    
    .left,
    .right{
    	flex: 0 0 200px;
       	height: 200px;
       	background-color: lightblue;
    }
    
    .center{
    	flex: 1;
        min-height: 400px;
        background: lightsalmon;
    }
    
    </style>
    
    </head>
    
    <body>
    	<div class="container">
          <div class="left"></div>
          <div class="center"></div>
          <div class="right"></div>
        </div>
    
    </body>
    </html>

*  定位

<html>
    <head>
    
    <style type="text/css">
    .container{
    	position: relative;
        width: 100%;
        height: 100%;
    }
    
    .left,
    .right{
    	position: absolute;
        top:0;
    	width: 200px;
       	height: 200px;
       	background-color: lightblue;
    }
    
    .center{
    
    	margin: 0 200px;
        min-height: 400px;
        background: lightsalmon;
    }
    
    .left{
    	left: 0;
    }
    
    .right{
    	right: 0;
    }
    
    </style>
    
    </head>
    
    <body>
    	<div class="container">
          <div class="left"></div>
          <div class="center"></div>
          <div class="right"></div>
        </div>
    
    </body>
    </html>

**4、移动端响应式布局开发的三大方案**

*  media（主流）
 *  rem（主流）
 *  flex（小众）
 *  vh/vw（百分比）

[https_developer.mozilla.org_zh-CN_docs_Web_Guide_HTML_HTML5]: https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5