HTML、css
feat 增加新功能fix 修复问题/BUGstyle 代码风格相关无影响运行结果的perf 优化/性能提升refactor 重构revert 撤销修改test 测试相关docs 文档/注释chore 依赖更新/脚手架配置修改等workflow 工作流改进ci 持续集成types 类型定义文件更改wip 开发中git update-index --assume-unchanged 文件路径，暂时忽略文件的变更git reset --hard 目标版本号：将版本回退git merge targetbranch：将targetbranch合并到当前分支
在前端岗位快三年了。布局中关于水平垂直两个方向居中的实现有几种方式：
方式一：将容器设置为弹性容器，即display: flex;,在水平和垂直两个方向分别设置居中对齐。完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css水平垂直居中对齐</title>
<style>
body{
font-size: 30px;
min-height: 100vh;
background-color: aqua;
display: flex;
align-items: center;/*垂直方向居中*/
justify-content: center;/*水平居中*/
}
/* #center{
width: 300px;
height: 300px;
border: 1px solid red;
text-align: center;
line-height: 300px;
} */
</style>
</head>
<body>
<div id="center">水平垂直居中</div>
</body>
</html>
这个方式无论无论子元素是否设置width和height，都可行！
方式二：子元素设置固定的width和height，使用绝对定位进行居中设置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css水平垂直居中对齐</title>
<style>
body{
font-size: 30px;
min-height: 100vh;
background-color: aqua;
position: relative;
}
/* 子元素设置具体的width和height */
#center{
width: 300px;
height: 300px;
border: 1px solid red;
text-align: center;
line-height: 300px;
margin:auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="center">水平垂直居中</div>
</body>
</html>
或者是：
/* 子元素设置具体的width和height */
#center{
width: 300px;
height: 300px;
border: 1px solid red;
text-align: center;
line-height: 300px;
margin:auto;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
}
使用css3中的变换属性：
/* 子元素设置具体的width和height */
#center{
width: 300px;
height: 300px;
border: 1px solid red;
text-align: center;
line-height: 300px;
margin:auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
光标，就是在网页中鼠标的样式。
cursor:auto，cursor的默认样式，光标会根据内容的类型浏览器自动处理。就像a标签的光标属性为：cursor:pointer；
cursor:default，这个属性并不是cursor的默认值，而是系统默认的光标形状【默认形状】；
cursor:none，隐藏光标；
cursor:pointer，食指光标，如果使用cursor:hand，grab和grabbing；
cursor:help，
cursor:progress，进行中
cursor:text，文本被选中的状态，
cursor:vertical-text，文本垂直选中
cursor:crosshair，十字型光标
cursor:cell，表示单元表格可以框选
cursor:move，表示当前元素是可以拖拽的
cursor:copy，复制
cursor:alias，创建别名或者创建快捷方式
cursor:no-drop，元素不允许开放到当前位置
cursor:not-allowed，当前行为是禁止的
cursor:col-resize，拉伸，改变左右两边的宽度，移动垂直线
cursor:row-resize，移动水平线，改变上下两边的高度
单向拉伸：
cursor:n-resize，理应是一个朝上的单箭头，但通常是双向的表现
cursor:e-resize，理应是一个朝右的单箭头，但通常是双向的表现
cursor:s-resize，理应是一个朝下的单箭头，但通常是双向的表现
cursor:w-resize，理应是一个朝左的单箭头，但通常是双向的表现
cursor:ne-resize，理应是一个朝右上角的单箭头，但通常是双向的表现
cursor:nw-resize，理应是一个朝左上角的单箭头，但通常是双向的表现
cursor:se-resize，理应是一个朝右下角的单箭头，但通常是双向的表现
cursor:sw-resize，理应是一个朝左下角的单箭头，但通常是双向的表现
双向拉伸：
cursor:ew-resize
cursor:ns-resize
cursor:nesw-resize
cursor:nwse-resize
缩放：
cursor:zoom-in
cursor:zoom-out
抓取：
cursor:grab，张开的手
cursor:grabbing，收起的手
自定义光标：
cursor:url("text.png"),或者是专门的光标文件【.cur】
属性值：row、row-reverse、column、column-reverse
属性值：nowrap、wrap 、wrap-reverse。开启换行之后，flex-shrink会失效。
flex-flow是flex-direction和flex-wrap的简写
属性值：flex-start、flex-end、center、space-between、space-around
如果任意子元素的flex-graw不为0，或者任意子元素在主轴方向上的margin为auto，justify-content会失效。
属性值：flex-start、flex-end、center、stretch、baseline
属性值：flex-start、flex-end、center、stretch、space-between、space-around
以上这些属性都是弹性容器所设置的属性。
animation动画的语法是：animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state。简写为animation；
animation-name：指定本应用使用的动画系列，动画的名称是由关键帧@Keyframes来命名的；
animation-duration：完成一个动画所需时间，也就是一个动画的周期时长，当该属性值为0的时候，那么元素没有动画；
animation-timing-function：定义一个动画周期内执行的节奏【快慢】，也可以理解为“加速度”，这个“加速度”是作用于整个关键帧的；
animation-delay：
网格布局在页面中更适合二维布局，将页面划分为多个区域，并且定义这些区域的大小、位置和层次等等这些关系。
特点：
1、在创建网格的时候，可以使用固定的轨道尺寸，为此有新的单位fr来创建有弹性尺寸的网格。也可以使用像素单位【fr是空间的一个等份单位】；
2、可以使用行号、行名称或者设置一个网格区域来精确定位元素。也可以使用一种算法来控制未给出明确网格位置的元素；
3、创建额外的轨道来包含元素【定义一个显示的网格，它会处理你添加在网格外面的内容，它会自动增加行和列，尽可能容纳所有的列】；
4、对齐控制；
5、控制重叠内容。
在元素声明display:grid或者display:inline-grid，将元素设置为网格容器，该容器内的子元素就成为了网格元素。
网格轨道：通过grid-template-columns和
grid-template-rows 属性定义网格的行和列
repeat()函数，标记重复部分或者是整个轨道列表。
fr单位，表示可用空间的一个等份。
显式和隐式网格
显式网格:包含了在grid-template-columns和grid-template-rows所定义的行和列。
隐式网格：使用grid-auto-rows和grid-auto-columns定义一个轨道的尺寸大小的网格
网格线：grid在创建网格的时候，会生成编号的网格线给我们定位每一个网格元素。如我们在画两行三列的格子的时候，在水平方向由三条网格线，垂直方向由四条网格线。
网格间距：两个网格元素之间的横向和纵向间距。grid-column-gap和grid-row-gap分别设置纵横方向的间距。两个属性简写为grid-gap。
可以将网格元素设置为网格容器，也就是在网格中嵌套网格【子网格】。
网格子元素属性：
grid-column-start,grid-column-end
grid-row-start,grid-row-end
对子元素进行定位，属性值：line：可为数字，用于引用已经编号的网格线；
span： 为数字，设置某一个子元素跨越多少条网格线
span name：设置子元素跨越到某一行【已经给该行设置名称】
flex：内容
grid：布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(lightpink, white);
}
.heart {
font-size: 30px;
width: 1em;
height: 1em;
color: red;
box-shadow: 0 0 2em;
background-color: dodgerblue;
border-radius: 50%;
}
.heart:hover {
box-shadow: -4.4em -3.3em, -3.3em -3.3em, -2.2em -3.3em, -1.1em -3.3em, 0em -3.3em, 1.1em -3.3em, 2.2em -3.3em, 3.3em -3.3em, 4.4em -3.3em;
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
css动画渲染的过程中有以下三个步骤：
浏览器会先计算每一个元素在屏幕上占有多少空间大小。所以在这个“布局”过程中，与元素的width和height、位置有着很大的联系。在任何时候，只有改变元素的宽高，或者元素属性【top/left】，浏览器对元素布局都会重新计算一次。
就算是使用JavaScript在DOM添加或者删除元素，都会导致浏览器重新计算元素的布局，浏览器必须重新渲染一次页面。
这个过程就是填充像素：描绘文本、着色图片、边框和阴影。绘制的过程是在内存发生的，页面中的各个部分形成很多图层。若是修改元素的背景颜色，那么浏览器就会重新绘制它。
浏览器将所有绘制完成的图层，提取为屏幕上的图像。
opacity和transform两个属性值发生改变的时候，元素渲染的时间非常少。这时候，浏览器会将元素提升到自己的绘制图层并使用GPU【计算机图形处理器】加速。因为元素是存在浏览器自己的绘制图层内，所以在整个图像变化中主图层不会发生变化，也无须重新绘制。
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
.k-main .sidebar .w-tags .item a{
border-radius:10px;
width:auto;
padding:2px 10px;
}
.k-main .sidebar .w-tags .item a:hover{
box-shadow:1px 2px 4px rgba(154,234,241,0.5);
backgroud:transparent;
}
.k-main .sidebar .widget_archive ul li, .k-main .sidebar .widget_categories ul li{
width:auto;
padding:2px 5px
}
.k-main .board .article-panel .a-thumb img{
border:none;
height:auto;
}
.k-main,.k-footer{
background-size:20px 20px !important;
background-image: linear-gradient(90deg,rgba(37,82,110,.1) 1px,transparent 0),linear-gradient(180deg,rgba(37,82,110,.1) 1px,transparent 0) !important;
}
.k-main .board .paginations a,.k-main .sidebar .widget,.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active,.k-main .board .article-panel,.k-main .details .article,.k-footer{
background: #f5f5d5;
}
.k-main .details .article{
background: transparent;
}
.k-main .details .article .content pre{
border:4px solid #e0dfcc;
border-radius:10px;
background:transparent
}
.k-main .details .article .content code{
color:#e83e8c
}
.k-header .banner .overlay｛
background: rgba(66,64,64,0.56);
｝
.k-header .banner .content .introduce .mate {
font-size: 30px;
transform: skewX(20deg);
letter-spacing: 10px;
text-shadow: -1px 1px #d8c1c1, -2px 2px #d8c1c1, -3px 3px #d8c1c1, -4px 4px #d8c1c1, -5px 5px #d8c1c1;
}
.k-main .details .article{
box-shadow:none !important;
}
.k-main .page404 .content .action .btn-outline-primary{
width:115px
}
a.customize-unpreviewable{
width:100%;
display:block;
text-align:center;
font-weight:700
}
这篇主要讲一下我在使用canvas的一个步骤：
1、获取canvas的对象：document.getElementById("canvas")
2、获取canvas的上下文环境：canvas.getContext("2d");
先绘制一条直线：
ctx.moveTo(x1,y1);
ctx.lineTo(x2,x2);
ctx.stroke(); // 连线
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d"); // 获取canvas的上下文环境
ctx.moveTo(100,100);
ctx.lineTo(230,190);
ctx.stroke();
</script>
</body>
</html>
.pres-patient-infos .pres-item view .pres-label {
min-width: 80px;
text-align: justify;
text-align-last: justify;
-webkit-text-align-last:justify;
}
.pres-patient-infos .pres-item view .pres-label::after{
content: "";
display: inline-block;
width: 100%;
height: 0;
}
用于调整图像、背景和边框的渲染
filter:url();接收一个XML文件，设置一个SVG滤镜，指定一个具体的滤镜元素
filter: blur(5px);
filter: brightness(0.4);给图像设置一个线性乘法，让图像更亮或者更暗。默认是100%或者1，值大于100%，图像会更亮，反之图像更黑【暗】；
filter: contrast(200%);调整图像的对比度，
filter: drop-shadow(16px 16px 20px blue);给图像设置阴影，阴影合成在图像的下面，和shadow类似；
filter: grayscale(50%);图像转变灰度图像；
filter: hue-rotate(90deg);图像的色相旋转；
filter: invert(75%);图像反转，默认是0，不反转；
filter: opacity(25%);图像的透明度；
filter: saturate(30%);设置图像的饱和度；
filter: sepia(60%);设置图像的深褐色
/* 多个属性值 */
filter: contrast(175%) brightness(3%);
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<canvas><canvas>
<script>
var canvas = document.body.querySelector('canvas'),
ctx = canvas.getContext('2d'),
W = canvas.width = window.innerWidth,
H = canvas.height = window.innerHeight,
pixels = [];
for (var x = -400; x < 400; x += 5) {
for (var z = -250; z < 250; z += 5) {
for (var y = -250; y < 500; y += 5) {
pixels.push({ x: x, y: y, z: z });
}
}
}
function render(ts) {
var imageData = ctx.getImageData(0, 0, W, H),
len = pixels.length,
fov = 250,
pixel, scale,
x2d, y2d, c;
for (var i = 0; i < len; i++) {
pixel = pixels[i];
scale = fov / (fov + pixel.z);
x2d = pixel.x * scale + W / 2;
y2d = pixel.y * scale + H / 2;
if (x2d >= 0 && x2d <= W && y2d >= 0 && y2d <= H) {
c = (Math.round(y2d) * imageData.width + Math.round(x2d)) * 4;
imageData.data[c] = 17;
imageData.data[c + 1] = 122;
imageData.data[c + 2] = 181;
imageData.data[c + 3] = 255;
}
pixel.z -= 0.4;
pixel.y = H / 14 + Math.sin(i / len * 15 + (ts / 450)) * 10;
if (pixel.z < -fov) pixel.z += 2 * fov;
}
ctx.putImageData(imageData, 0, 0);
}
(function drawFrame(ts) {
requestAnimationFrame(drawFrame, canvas);
ctx.fillStyle = '#17293a';
ctx.fillRect(0, 0, W, H);
render(ts);
}());</script>
</canvas></canvas>
</body>
<!-- 定义文档的字符编码 -->
<meta charset="utf-8" />
<!-- 强制Chromium内核，作用于360浏览器、QQ浏览器等国产双核浏览器 -->
<meta name="renderer" content="webkit"/>
<!-- 强制Chromium内核，作用于其他双核浏览器 -->
<meta name="force-rendering" content="webkit"/>
<!-- 如果有安装 Google Chrome Frame 插件则强制为Chromium内核，否则强制本机支持的最高版本IE内核，作用于IE浏览器 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<!--
设置视窗大小
width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
shrink-to-fit=no IOS9中要想前面的属性起作用需要加上这个
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="author" content="name, 2796036673@163 .com"/>
<!--
搜索引擎抓取
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
-->
<meta name="robots" content="index,follow"/>
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴图标 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- 添加 RSS 订阅 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- sns 社交标签 begin -->
<!-- 参考微博API -->
<meta property="og:type" content="类型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />
<!-- sns 社交标签 end -->
css的基本原理：层叠、盒模型、各种单位类型
层叠
指的是css中一系列的规则，决定怎么解决样式冲突的问题。
层叠会根据以下三个条件来解决冲突问题的：
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : '' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
},
xAxis: {
axisLabel: {
formatter: function () {
return "";
}
},
"axisLine": { //y轴
"show": false
},
"axisTick": { //y轴刻度线
"show": false
},
"splitLine": { //网格线
"show": false
},
},
yAxis: {
axisLabel: {
formatter: function () {
return "";
}
},
"axisLine": { //y轴
"show": false
},
"splitLine": { //网格线
"show": false
},
data: ['Mon']
},
series: [
{
name: 'Direct',
type: 'bar',
stack: 'total',
barWidth: 30,
data: [120]
},
{
name: 'Mail Ad',
type: 'bar',
stack: 'total',
data: [120]
},
{
name: 'Affiliate Ad',
type: 'bar',
stack: 'total',
data: [220]
},
{
name: 'Video Ad',
type: 'bar',
stack: 'total',
data: [150]
},
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
drawImage(image , dx , dy)。
drawImage(image , dx , dy , dw , dh)。
drawImage(image , sx , sy , sw , sh , dx , dy , dw , dh)。
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.