前端面试手撕编程-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端面试手撕编程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

获取DOM节点

document.getElementById/Name()document.getElementByClassName()

document.getElementsByTagName()

element.getElementsByTagName()

element/document.querySelector()返回第一个

element/document.querySelectorAll()返回数组

布局

header，content，sider

三栏布局：左右固定，中间自适应（⭐手写）

flex布局（强烈推荐）

grid布局

margin负值法

自身浮动

绝对定位

圣杯布局（⭐手写）

HTML

事件委托/代理: 就近委托，事件冒泡，子元素的事件绑定到父元素上

event.target：当前触发事件的元素

event.currentTarget：绑定处理函数的元素

好处：子元素增不用绑定，删不用解绑

缺点：不支持不冒泡的事件、层级过多可能会被阻止

发布订阅模式（class）：中心化管理

观察者模式（class）：发布订阅模式的子类

让空格和换行正常显示

br插入换行符

pre 标签定义预格式化的文本

CSS

相对于父容器居中

水平居中

块元素margin：auto

行内元素->display:block->margin：auto

网格display: grid;+justify-content:

表格display:table+ .cell { display: table-cell; text-align: center; /* 水平居中 */

文本text-align：center（除了p）

垂直居中

单行文本 .container {height: ==line-height

display:flex+align-items: center;

position: absolute;+top: 50%;+transform: translate(-50%, -50%);

网格display: grid+align-items: center;

表格display:table-cell+vertical-align: middle

水平垂直居中

绝对定位position: absolute;+top+left: 50%;+transform:translate(-50%)

flex:align-items/justify-content:center

网格display: grid+place-items: center;

表格display:table-cell+vertical-align: middle+text-align: center

梯形，三角形，扇形，圆形，半圆

border: 50px solid transparent;

border-radius: 50%;

半圆：border-top-left/right-radius: 50px;

溢出转省略

单行多行：隐藏overflow: hidden;

单行：不换行white-space:nowrap、省略text-overflow:ellipsis

多行：弹性伸缩盒display: -webkit-box、-webkit-box-orient方向、-webkit-line-clamp行数

获取DOM节点

返回的 HTML 集合是动态的，意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用

document.getElementById/Name()
document.getElementByClassName()

document.getElementsByTagName()

element.getElementsByTagName()

element/document.querySelector()返回第一个

element/document.querySelectorAll()返回数组

var el = document.querySelector(".myclass");

布局

header，content，sider

前端面试手撕编程,前端面试,前端,javascript,开发语言

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>flex布局</title>
    <style>
		.header{
			height:50px;
			width:100%;
			background-color:  #ddd;
		}
 		.content{
			flex:1;
			height:400px;
			background-color: #eee;
		}
        .sider{
            width:100px;
            background-color: #ccc;
        }
        .div{
            display:flex;
        }
    </style>
</head>
 
<body>
        <div class="header">header</div>
	<div class="div">
        <div class="sider">sider</div>
        <div class="content">content</div>
    </div>
</body>
 
</html>

前端面试手撕编程,前端面试,前端,javascript,开发语言

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>flex布局</title>
    <style>
		.div{
			flex:1;
		}
		.header{
			height:50px;
			background-color:  #ddd;
		}
 		.content{
			height:400px;
			background-color: #eee;
		}
        .sider{
			width:100px;
            background-color: #ccc;
        }
        .main{
            display:flex;
			flex-direction:cow;
        }
    </style>
</head>
 
<body>
	<div class="main">
       <div class="sider">sider</div> 
	   <div class="div">
        <div class="header">header</div>
        <div class="content">content</div>
		</div>
    </div>
</body>
 
</html>

三栏布局：左右固定，中间自适应（⭐手写）

前端面试手撕编程,前端面试,前端,javascript,开发语言

flex布局（强烈推荐）

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性，后两个属性可省略

flex:1=flex-grow 1 放大

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

前端面试手撕编程,前端面试,前端,javascript,开发语言

实现方法

左右两栏设置宽度，中间栏设置 flex:1,占满余下部分

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>flex布局</title>
    <style>
        .main{
            height: 60px;
            display: flex;
        }
 
        .left,
        .right{
            height: 100%;
            width: 200px;
            background-color: #ccc;
        }
 
        .content{
            flex: 1;
            background-color: #eee;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div class="left"></div>
        <div class="content"></div>
        <div class="right"></div>
    </div>
</body>
 
</html>

grid布局

基础巩固

grid：CSS 所有网格容器的简写属性

grid-template-rows / grid-template-columns ：设置列和行的尺寸。

实现方法

左右两栏设置宽度，中间栏宽度auto

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>grid布局</title>
    <style>
        body {
            display: grid;
            grid-template-columns: 200px auto 200px;
            grid-template-rows: 60px;
        }
 
        .left,
        .right {
            background-color: #ccc;
        }
 
        .content {
            background-color: #eee;
        }
    </style>
</head>
 
<body>
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
</body>
 
</html>

margin负值法

原理解释
实现方法：

左右两栏均左浮动，外层盒子左浮动，

中间栏设置左右两栏宽度的margin值，

左栏设置margin -100%（向左移动整个屏幕的距离），

右栏设置 margin值为负的盒子宽度。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>margin负值</title>
 
    <style>
        .left,
        .right {
            float: left;
            width: 200px;
            height: 60px;
            background-color: #eee;
        }
 
        .left {
             margin-left: -100%;
        }
 
        .right {
            margin-left: -200px;
        }
 
        .main {
            width: 100%;
            float: left;
            height: 60px;
        }
 
        .content {
            height: 60px;
            margin: 0 200px;
            background-color: #ccc;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div class="content"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>
 
</html>

自身浮动

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>自身浮动法</title>
    <style>
        .left,
        .right {
            height: 60px;
            width: 200px;
            background-color: #eee;
        }
 
        .left {
            float: left;
        }
 
        .right {
            float: right;
        }
 
        .content{
            height: 60px;
            background-color: #ccc;
            margin: 0 200px;
        }
    </style>
</head>
 
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="content"></div>
</body>
 
</html>

绝对定位

左右两栏绝对定位，分别定位到盒子的两侧，中间栏采用margin值撑开盒子

注意：采用定位时，浏览器默认的padding或margin值会影响布局，需要初始化样式 margin:0;padding：0；

圣杯布局（⭐手写）

两边固定，中间自适应，且中间栏放在文档流的前面，率先渲染

基本的dom结构（注意center需要排在第一个位置）

<div class="header">header</div>
    <div class="container">
        <div class="center column">center</div>
        <div class="left column" >left</div>
        <div class="right column" >right</div>
    </div>
<div class="footer">footer</div>

或者

<section class="container">
            <article class="center"><br /><br /><br /></article>
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>

<br> 标签插入一个简单的换行符

定位+浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
        * {
                margin: 0;
                padding: 0;
        }
        .container {
            border: 1px solid black;
            /* 防止容器盒子高度塌陷和给之后的左、右浮动元素预留位置 */
            overflow: hidden;
            padding: 0px 100px;
            min-width: 100px;
        }

        .left {
            background-color: greenyellow;
            /* 保证之后的"margin-left"属性可以将自身拉到上一行 */
            float: left;
            /* 固定宽度 */
            width: 100px;
            /* 将元素向左移动属性值的单位，100%相对于父容器计算 */
            margin-left: -100%;
            /* 相对定位，需要将自身再向左移动自身的宽度，进入容器的"padding-left"区域 */
            position: relative;
            /* 自身的宽度，刚好进入容器的"padding-left"区域 */
            left: -100px;
        }

        .center {
            background-color: darkorange;
            float: left;
            width: 100%;
        }

        .right {
            background-color: darkgreen;
            float: left;
            width: 100px;
            margin-left: -100px;
            position: relative;
            left: 100px;
        }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="center"><br /><br /><br /></article>
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>

magin-left:-100%

这个百分比是以父元素内容长度的百分比，该父元素内容长度需要去除padding magin border。由于长度设置为了100%，需要一整行的宽度补偿margin，则移到最左边。

magin-left：-100px

margin负值会改变元素占据的空间，及移到父元素的最左边，并且该子元素width即为100px

HTML

事件委托/代理: 就近委托，事件冒泡，子元素的事件绑定到父元素上

event.target：当前触发事件的元素

event.currentTarget：绑定处理函数的元素

只有当事件处理函数绑定在自身的时候，target才会和currentTarget一样

<ul>
      <li>.</li>
      <li>.</li>
      <li>.</li>
</ul>

<script type="text/javascript">
            document.querySelector('ul').onclick=event=>{
                event.target.innerText+='.'
            }
</script>

好处：子元素增不用绑定，删不用解绑

缺点：不支持不冒泡的事件、层级过多可能会被阻止

设计模式

发布订阅模式（class）：中心化管理

完成"EventEmitter"类实现发布订阅模式。
1. 同一名称事件可能有多个不同的执行函数：构造函数中创建”events“对象变量存放所有的事件
2. 通过"on"函数添加事件：订阅事件。当总事件中不存在此事件时创建新的事件数组，当存在时将”fn“函数添加在该事件对应数组中
3. 通过"emit"函数触发事件：发布事件，遍历该事件下的函数数组并全部执行

class EventEmitter {
    constructor() {
        this.events = {}//二维，events' funcs
    }
    //添加事件：订阅事件
    on(event, fn) {
        if(!this.events[event]) {//当总事件中不存在此事件时创建新的事件数组
            this.events[event] = [fn]
        } else {                 //当存在时将”fn“函数添加在该事件对应数组中
            this.events[event].push(fn)
        }
    }
   //触发事件：发布事件
    emit(event) {
        if(this.events[event]) {//遍历该事件下的函数数组并全部执行
            this.events[event].forEach(callback => callback())
        }
    }
}

观察者模式（class）：发布订阅模式的子类

Redux 和 Vuex 状态管理库是观察者模式

"Observerd"类实现观察者模式。要求如下：
"Observer"为观察者，"Observerd"为被观察者

被观察者构造函数声明三个属性分别为"name"用于保存被观察者姓名、"state"用于保存被观察者状态、"observers"用于保存观察者们
被观察者创建"setObserver"函数，用于保存观察者们，该函数通过数组的push函数将观察者参数传入"observers"数组中
被观察者创建"setState"函数，设置该观察者"state"并且通知所有观察者，该函数首先通过参数修改被观察者的"state"属性，然后通过遍历"observers"数组分别调用各个观察者的"update"函数并且将该被观察者作为参数传入
观察者创建"update"函数，用于被观察者进行消息通知，该函数需要打印（console.log）数据，数据格式为：小明正在走路。其中"小明"为被观察者的"name"属性，"走路"为被观察者的"state"属性

//被观察者
class Observerd {
    constructor(name) {
        this.name = name
        this.state = '走路'
        this.observers = []
    }
    setObserver(observer) {
        this.observers.push(observer)
    }
    setState(state) {
        this.state = state
        this.observers.forEach(observer => observer.update(this))
    }
}
//观察者
class Observer {
    constructor() {
        
    }
    update(observerd) {
        console.log(observerd.name + '正在' + observerd.state)
    }
}

让空格和换行正常显示

`br`插入换行符

普通文本标签会无视换行，多个空格合并成一个

前端面试手撕编程,前端面试,前端,javascript,开发语言

pre 标签定义预格式化的文本

<pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>
<p>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</p>

CSS

相对于父容器居中

水平居中

块元素margin：auto

行内元素->display:block->margin：auto

display:flex+justify-content:center

网格display: grid;+justify-content:

不用怀疑写错，grid和flex一样拥有属性justify-content

**表格display:table+ .cell { display: table-cell; text-align: center; /* 水平居中 */**

文本text-align：center（除了p）

垂直居中

块级元素会占据其容器的整个宽度，因此在水平方向上，可以margin：auto水平居中。

垂直方向上，块级元素的高度通常是由其内容决定的，而不会自动占满整个容器高度，因此margin：auto不能垂直居中。

单行文本 .container {height: ==line-height

  <style>
    .container {
      height: 200px; /* 容器的高度 */
      line-height: 200px; /* 文本的行高等于容器的高度，实现垂直居中 */
      border: 1px solid #ccc; /* 仅用于示例显示边框 */
    }
  </style>
</head>
<body>
  <div class="container">
    单行文本垂直居中
  </div>
</body>

display:flex+align-items: center;

position: absolute;+top: 50%;+transform: translate(-50%, -50%);

网格display: grid+align-items: center;

Grid 布局通常用于整个页面布局，更适合页面级的结构。

Table 布局更适合表格数据的显示，它具有表格的语义。

支持程度：

Grid 布局在现代浏览器中有更广泛的支持，适用于大多数情况。

Table 布局在某些情况下可能需要处理一些陈旧浏览器的兼容性问题。

表格display:table-cell+vertical-align: middle

注意区分，img 的vertical-align：图片或其他内联元素在文本基线上的垂直位置。

  <style>
    .centered-container {
      display: table;
      width: 100%;
      height: 100vh;
    }
    .centered-element {
      display: table-cell;
      vertical-align: middle; /* 垂直居中 */
    }
    .content {
      background-color: lightblue;
    }
  </style>
  <title>Vertical Centering with Table Layout</title>
</head>
<body>
  <div class="centered-container">
    <div class="centered-element">
      <div class="content">
        <p>This content is vertically centered using table layout.</p>
      </div>
    </div>
  </div>
</body>

table

此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

table-row

此元素会作为一个表格行显示（类似 <tr>）。

table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

<table border="1" summary="表格内容的摘要">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

前端面试手撕编程,前端面试,前端,javascript,开发语言 summary 在 Web 浏览器中没有视觉效果，但可以通过屏幕阅读器使用。

水平垂直居中

绝对定位position: absolute;+top+left: 50%;+transform:translate(-50%)

flex:align-items/justify-content:center

网格display: grid+place-items: center;

  <style>
    .container {
      display: grid;
      place-items: center;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc; /* 仅用于示例显示边框 */
    }
  </style>
</head>
<body>
  <div class="container">
    <div>水平垂直居中</div>
  </div>

表格display:table-cell+vertical-align: middle+text-align: center

梯形，三角形，扇形，圆形，半圆

/* HTML CODE: 
    <div class="square">正方形</div>
    */
    
    /* CSS CODE */
   .square {
      width: 100px;
      height: 100px;
      border-top: 50px solid red;<!--solid: 定义实线边框-->
      border-right: 50px solid green;
      border-bottom: 50px solid orangered;
      border-left: 50px solid blue;
    }

前端面试手撕编程,前端面试,前端,javascript,开发语言

关键：

border: 50px solid transparent;

border-color设置为【透明】

border-radius: 50%;

从左上角顺时针到左下角

border-radius: 15px 50px 30px：第一个值适用于左上角，第二个值适用于右上角和左下角，第三个值适用于右下角：

border-radius: 15px 50px：第一个值适用于左上角和右下角，第二个值适用于右上角和左下角

margin:10px 5px 15px;
- 上边距是 10px
- 右边距和左边距是 5px
- 下边距是 15px
margin:10px 5px;
- 上边距和下边距是 10px
- 右边距和左边距是 5px

半圆：border-top-left/right-radius: 50px;

详情：

CSS实现各种图形 -- 梯形，三角形，扇形，圆形，半圆 - 掘金

溢出转省略

单行多行：隐藏overflow: hidden;

单行：不换行white-space:nowrap、省略text-overflow:ellipsis

元素内的空白处理方法：white-space:nowrap; 文本不进行换行；默认值normal

overflow: hidden;
text-overflow:ellipsis;  //ellipsis;省略
white-space: nowrap;  //nowrap 不换行

前端面试手撕编程,前端面试,前端,javascript,开发语言

多行：弹性伸缩盒display: -webkit-box、-webkit-box-orient方向、-webkit-line-clamp行数

前端面试手撕编程,前端面试,前端,javascript,开发语言

1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2.display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
3.-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

前端面试手撕编程,前端面试,前端,javascript,开发语言 IE不兼容文章来源地址https://www.toymoban.com/news/detail-671495.html

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.text2{
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;
}
</style> 
	
</head>
<body>

<div class="text2">
    这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话
    这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话
    这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话
</div>

</body>
</html>

到了这里，关于前端面试手撕编程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

前端面试手撕编程

获取DOM节点

document.getElementById/Name() document.getElementByClassName()

document.getElementsByTagName()

element.getElementsByTagName()

element/document.querySelector()返回第一个

element/document.querySelectorAll()返回数组

布局

header，content，sider

三栏布局 ：左右固定，中间自适应（⭐手写）

flex布局（强烈推荐）

grid布局

margin负值法

自身浮动

绝对定位

圣杯布局 （⭐手写）

HTML

事件委托/代理: 就近委托，事件冒泡，子元素的事件绑定到父元素上

event.target：当前触发事件的元素

event.currentTarget：绑定处理函数的元素

好处：子元素增不用绑定，删不用解绑

缺点：不支持不冒泡的事件、层级过多可能会被阻止

发布订阅模式（class）：中心化管理

观察者模式（class）：发布订阅模式的子类

让空格和换行正常显示

br插入换行符

pre 标签定义预格式化的文本

CSS

相对于父容器居中

水平居中

块元素margin：auto

行内元素->display:block->margin：auto

网格display: grid;+justify-content:

表格display:table+ .cell { display: table-cell; text-align: center; /* 水平居中 */

文本text-align：center（除了p）

垂直居中

单行文本 .container {height: ==line-height

display:flex+align-items: center;

position: absolute;+top: 50%;+transform: translate(-50%, -50%);

网格display: grid+align-items: center;

表格display:table-cell+vertical-align: middle

水平垂直居中

绝对定位position: absolute;+top+left: 50%;+transform:translate(-50%)

flex:align-items/justify-content:center

网格display: grid+place-items: center;

表格display:table-cell+vertical-align: middle+text-align: center

梯形，三角形，扇形，圆形，半圆

border: 50px solid transparent;

border-radius: 50%;

半圆：border-top-left/right-radius: 50px;

溢出转省略

单行多行：隐藏overflow: hidden;

单行：不换行white-space:nowrap、省略text-overflow:ellipsis

多行：弹性伸缩盒display: -webkit-box、-webkit-box-orient方向、-webkit-line-clamp行数

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

document.getElementById/Name()
document.getElementByClassName()

三栏布局：左右固定，中间自适应（⭐手写）

圣杯布局（⭐手写）

`br`插入换行符

**表格display:table+ .cell { display: table-cell; text-align: center; /* 水平居中 */**