work
关注
分享
扫一扫
weixin_44580808
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
前端科普系列（1）：很有趣的一篇前端简史，作者有心了~
一、什么是前端回答这个问题之前，我想起了一道非常经典的前端面试题：“从输入URL到页面呈现在你面前到底发生了什么？”这个题目可以回答的很简单，但仔细思考，也可以回答的很深，这个过程涉及的东西很多。先看一张图：简单说就是1.DNS (Domain Name System) 解析start————————————————解析流程：①：电脑发出一个DNS请求到本地DNS服务器②：本地服务器查询缓存记录，有则直接返回结果。没有则向DNS根服务器进行查询。————————————————over原创 2021-08-20 13:47:55 · 345 阅读 · 0 评论 -
表格展开和收起
var dispathPatientTableheight = $("#tablepatientcontainer").height();document.getElementById("zhankaiorzhebie").style.display = (dispathPatientTableheight > 136?'':none);// $("#zhangkaiorzhedie").css('display',show=(dispathPatientTableheight > 136?原创 2021-08-13 17:49:05 · 152 阅读 · 0 评论 -
vw vh vm
1、vwcss3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。2、vhcss3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。3、vmcss3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm举个例子：浏览器高度900px原创 2021-08-13 17:39:33 · 258 阅读 · 0 评论 -
position:relative和position:absolute
position:relative相对定位如何定位？每个元素在页面的普通流中会“占有”一个位置，这个位置可以理解为默认值，而相对定位就是将元素偏离元素的默认位置，但普通流中依然保持着原有的默认位置。（在父级节点的content-box区定位，父级节点有文字的话，元素的默认位置则是紧随文字）不会改变行内元素的display属性。并没有脱离普通流，只是视觉上发生的偏移<body style='margin:0;padding:0;background:#BDD7EE;color:white;原创 2021-08-05 17:58:31 · 670 阅读 · 0 评论 -
flex布局使用技巧属性全解
flex常用属性flex-grow属性项目放大比例，默认为0，即如果存在剩余空间，也不放大，默认为0flex-shrink属性项目的缩小比例，默认为1，如果空间不足，该项目将缩小flex-basis属性分配多余空间之前，项目占据的主轴空间，默认是auto，即项目本来的大小auto 为表示项目本身的大小, 如果设置为 auto, 那么这三个盒子就会按照自己内容的多少来等比例的放大和缩小,flex属性默认 0 1 auto...原创 2021-08-05 17:15:16 · 114 阅读 · 0 评论 -
text-overflow: ellipsis； white-space: nowrap；文本超出部门省略号
一、仅定义text-overflow:ellipsis; 不能实现省略号效果。li {width:300px; line-height:25px; text-overflow:ellipsis;}二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果。li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap;}三、同时应用： text-ov原创 2021-08-05 16:35:58 · 868 阅读 · 0 评论 -
IIS+VS2015+VsCode前端修改文件上传
找到修改的文件 右键checkout forEdit右键点击compare，即可查看修改内容右键修改文档的根路径 选择shelve pending原创 2021-08-05 16:34:47 · 147 阅读 · 0 评论 -
vscode快捷键
Ctrl+Enter 在下面插入行 Insert line belowCtrl+Shift+Enter 在上面插入行 Insert line aboveCtrl+Shift+\ 跳到匹配的括号 Jump to matching bracketCtrl+Shift+[ 折叠（折叠）区域 Fold (collapse) regionCtrl+Shift+] 展开（未折叠）区域 Unfold (uncollapse) regionHome 转到行首 Go to beginning of lineEnd原创 2021-08-04 17:57:32 · 165 阅读 · 0 评论 -
box-shadow: inset 0 -1px 0 0
原创 2021-08-04 17:50:57 · 402 阅读 · 0 评论 -
nz-form使用实例(ngModel、ngModelChange)
<div class="Fill bottom-form-container"> <div nz-row nzGutter="35"> <div nz-col nzSpan="13"> <div class="common-card-container" id="Simulation-Details"> <div class="common-card-title"&g原创 2021-08-04 17:37:41 · 1983 阅读 · 0 评论 -
css渐变动画效果
有趣的渐变边框动画效果效果：实现思路：每一个框一个div，每一个“框”分三部分组成，::before实现渐变边框（实际上是渐变背景），::after实现内部白色背景，最后div的其他子元素作为框内的文字内容显示。使用animation动画实现::before渐变背景旋转，即可模拟边框动画。问题：li内部子元素被::after覆盖显示不了的问题（::after的显示层级高于正常流元素）解决办法：给内部子元素加position: relative;z-index: 1;即可<div cla原创 2021-07-31 11:15:20 · 1344 阅读 · 0 评论 -
父子组件互相通信
父传子值及方法:首页home是父亲,header是子1.父亲的ts中加入//home.components.tsexport class HomeComponent implements OnInit { public title:string = '我是首页组件的标题' constructor() { } ngOnInit(): void { } run(){ console.log('我是父组件的方法') }}2.父组件中引入子组件时绑定属性//hom原创 2021-07-29 09:25:02 · 84 阅读 · 0 评论 -
获取Dom节点实现显示以及隐藏侧边栏(transform: translate(100%,0)； transition: all 2s；)
<div class="content"> 内容区域 <button (click)="showSide()">显示侧边栏</button> <button (click)="hideSide()">隐藏侧边栏</button></div><aside id="aside"> 这是一个侧边栏</aside>import { Component, OnInit } from原创 2021-07-28 15:47:43 · 490 阅读 · 0 评论 -
viewchild获取DOM节点及父组件通过viewchild引用子组件方法
<!-- 1.给DOM命名 --><div #mybox> 我是一个dom节点</div>import { Component, OnInit, ViewChild } from '@angular/core';@Component({ selector: 'app-news', templateUrl: './news.component.html', styleUrls: ['./news.component.less']})exp原创 2021-07-28 15:30:48 · 244 阅读 · 0 评论 -
this指向问题（for each 和定时器中的this是指向windows的，如果要指向当前函数，可以使用箭头函数或者that）
for each 和定时器中的this是指向windows的，如果要指向当前函数，可以使用箭头函数或者that原创 2021-07-28 14:48:06 · 181 阅读 · 0 评论 -
数据缓存服务StorageService封装及使用
import { Injectable } from '@angular/core';@Injectable({ providedIn: 'root'})export class StorageService { constructor() { } get(key:any){ return JSON.parse(localStorage.getItem(key)||'0') } set(key:any,value:any){ localStorage.setI原创 2021-07-28 14:44:09 · 1375 阅读 · 0 评论 -
类型“string | null”的参数不能赋给类型“string”的参数
解决办法参考：https://blog.csdn.net/fred8/article/details/118603188原创 2021-07-28 14:27:45 · 1863 阅读 · 0 评论 -
Angular中的服务
Angular中的服务是独立于各个组件的，比如数据缓存功能，哪个组件需要使用，直接引用该服务即可。创建服务的命令：ng g service my-new-service//创建到指定目录下面ng g service services/storage在app.module引入并且配置服务import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';impo原创 2021-07-28 14:03:11 · 431 阅读 · 0 评论 -
搜索框缓存数据（添加、删除、去重）
<div class="search"> <input type="text" [(ngModel)]="content"><button (click)="doSearch()">搜索</button><hr><ul > <li *ngFor="let item of historyList;let key=index">{{item}} <button (click)="deleteHist原创 2021-07-28 11:33:47 · 317 阅读 · 0 评论 -
less创建数组+判断数组中有无content值，如果无，则添加
public historyList:any[] = []; if(this.historyList.indexOf(this.content)==-1){ this.historyList.push(this.content); }原创 2021-07-28 10:40:02 · 238 阅读 · 0 评论 -
form表单练习
<h2>人员登记系统</h2><div class="people_list"> <ul> <li>姓名：<input type="text" [(ngModel)]="peopleInfo.username" class="form-input"></li> <li>性别： <input type="radio" value="1" na原创 2021-07-28 09:51:06 · 110 阅读 · 0 评论 -
＜label for=“peopleInfo.sex“＞女＜/label＞作用
for 属性规定 label 与哪个表单元素绑定。作用是 在点击label 时 会自动将焦点移动到绑定的 元素上比如xy特别是使用 checkbox 时 如果没有绑定 的话 需要鼠标点中小方框 才可以选中 或不选, 绑定以后 点击 label 就可以改变checkbox 的值了...原创 2021-07-28 09:50:03 · 98 阅读 · 0 评论 -
NVM管理node版本
nvm激活：source $(brew --prefix nvm)/nvm.shnvm命令规则：https://blog.csdn.net/weixin_30338497/article/details/96934299?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-1.control&spm=1001.2101.3001.4242原创 2021-07-27 12:13:50 · 75 阅读 · 0 评论 -
布局变化（重要！flex布局灵活控制高度）
在一个盒子里上下两个盒子A和B，A的样式：ｈｅｉｇｈｔ：７０％；ｄｉｓｐｌａｙ：ｆｌｅｘ；ｆｌｅｘ－ｄｉｒｅｃｔｉｏｎ：ｃｏｌｕｍｎ如果要撑满高度：display:flex;flex-direction:column;flex:1常用：margin:top...原创 2021-07-16 18:00:44 · 499 阅读 · 0 评论 -
Angular如何找到类当中的第二个button并且另外定义样式
原创 2021-07-12 15:48:14 · 83 阅读 · 0 评论 -
width以及高度尽量不要写死
width以及高度尽量不要写死，width:100%或者 auto原创 2021-07-12 15:19:48 · 279 阅读 · 0 评论 -
:host 和::ng-deep
:host 和::ng-deep的区别https://blog.csdn.net/qq_36671474/article/details/88191973原创 2021-07-12 11:31:38 · 112 阅读 · 0 评论