web开发实战

最新推荐文章于 2022-09-08 01:39:57 发布

小番茄炒鸡蛋

最新推荐文章于 2022-09-08 01:39:57 发布

阅读量636

点赞数

文章标签：前端 css html

本文链接：https://blog.youkuaiyun.com/LEP2969171141/article/details/126609597

版权

web开发实战

系列文章目录

一. HTML -CSS-JavaScript（面试题）

html语义化：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好的解析。
清除浮动：在我们的开发过程中，浮动元素是css中最常用的属性，浮动起来的元素会脱离标准流，如果我们的父级盒子没有设置高度就会造成父级盒子的高度塌陷，就会影响我们下面盒子的正常显示。
额外标签法：额外标签法会在浮动元素末尾添加一个空的标签。给这个标签设置clear属性，注意这个标签必须是块级元素

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        width: 100%;
        border: 2px solid red;
      }
      .son {
        width: 300px;
        height: 300px;
        border: 2px solid blue;
        float: left;
      }
      .box {
        width: 100%;
        height: 300px;
        background-color: green;
      }
      .clear {
        clear: both;
      } //为标签设置清除浮动
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
      <div class="son"></div>
      <div class="clear"></div>
    </div>
    <div class="box"></div>//添加清除浮动标签
  </body>
</html>
在这里插入代码片

原理： clear：both的作用是不允许周围有浮动现象，所以就可以达到清除浮动的效果，但是这样做，对于比较复杂的页面就显得结构非常的乱

css垂直居中实现
css布局实现垂直居中的几种方式
单行元素垂直居中
对文本进行垂直居中
对已知高度块级元素进行垂直居中
对未知高度块级元素进行垂直居中

4.`` 绝对定位，相对定位
绝对定位 (absolute)
参考对象：祖先级元素

相对于离自己最近设置了定位的祖先级元素（不包括static,static没有定位），如果父级元素没有定位，则向祖父级、曾祖父级等上级元素找。
绝对定位元素脱离正常流(文档流)，所以元素原来的位置会被其他元素占用。
绝对定位元素脱离了正常流，有覆盖其他元素的情况。
绝对定位元素的祖先元素有多个都设置了position: absolute或position: relative ,那么是以最近的一个祖先元素作为参考物，即相对于最近的那一个祖先元素进行移动定位。

相对定位(relative)
参考对象:自己

相对定位的挪移，是相对于自己移动，即自己原来的所在位置(自己原来左上角作为坐标系的原点)，
是相对于自己移动，因此原来的位置还存在。
绝对定位一样会有覆盖其他元素的情况.

盒子模型
CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性
一个盒模型包含了padding（内边距）margin（外边距）border（边框）内容（content）也就是元素本身的width,height

…

二. mvvm：

MVVM(Model-View-ViewModel)是一种软件架构设计模式，它是一种简化用户界面的事件驱动编程方式。

在这里插入图片描述

优点：低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候，View也可以不变。
可复用：可以把一些视图逻辑放到一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

四. MVC

MVC(Model View Controller)是一种软件设计的框架模式，它采用模型(Model)-视图(View)-控制器(controller)的方法把业务逻辑、数据与界面显示分离。把众多的业务逻辑聚集到一个部件里面，当然这种比较官方的解释是不能让我们足够清晰的理解什么是MVC的。用通俗的话来讲，MVC的理念就是把数据处理、数据展示(界面)和程序/用户的交互三者分离开的一种编程模式。

在这里插入图片描述

五. CDN

CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络边缘，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。CDN有别于镜像，因为它比镜像更智能，或者可以做这样一个比喻：CDN=更智能的镜像+缓存+流量导流。因而，CDN可以明显提高Internet网络中信息流动的效率。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等问题，提高用户访问网站的响应速度。

为更好地理解CDN，让我们看一下CDN的工作流程。当用户访问已经加入CDN服务的网站时，首先通过DNS重定向技术确定最接近用户的最佳CDN节点，同时将用户的请求指向该节点。当用户的请求到达指定节点时，CDN的服务器（节点上的高速缓存）负责将用户请求的内容提供给用户。具体流程为: 用户在自己的浏览器中输入要访问的网站的域名，浏览器向本地DNS请求对该域名的解析，本地DNS将请求发到网站的主DNS，主DNS根据一系列的策略确定当时最适当的CDN节点，并将解析的结果（IP地址）发给用户，用户向给定的CDN节点请求相应网站的内容。

由于用户访问源站业务有性能瓶颈，通过cdn技术把源站的内容缓存到多个节点。用户向源站域名发起请求时，请求会被调度至最接近用户的服务节点，直接由服务节点直接快速响应，有效降低用户访问延迟，提升可用性。

CDN的优势很明显：
（1）CDN节点解决了跨运营商和跨地域访问的问题，访问延时大大降低；
（2）大部分请求在CDN边缘节点完成，CDN起到了分流作用，减轻了源站的负载。

六. CMD

cmd(commander)，命令提示符是在操作系统中，提示进行命令输入的一种工作提示符。在不同的操作系统环境下，命令提示符各不相同。在windows环境下，命令行程序为cmd.exe，是一个32位的命令行程序，微软Windows系统基于Windows上的命令解释程序，类似于微软的DOS操作系统（百度百科）。