- 博客(15)
- 收藏
- 关注
RSS订阅原创 CSS元素宽度、继承父元素宽度、cale函数计算宽度总结
1.元素不设置宽度第一种情况，元素在文档流中结论1：文档流中元素不设置宽度时，元素宽度继承父元素的宽度第二种情况，元素脱离文档流(position:absolute或position:fixed或浮动float等)结论2：脱离文档流的元素不设置宽度时，元素宽度由内容撑开2.元素设置宽度100%时第一种情况，元素在文档流中结论3：文档流中元素设置宽度100%时，元素宽度为父元素的100%第二种情况，元素脱离文档流结论4：浮动元素宽度为父元素的100%，position绝对定
2022-04-14 11:51:21
8521
原创 React打包
打包为相对路径 在package.json中加入"homepage":"./"开发模式和生产模式配置首先在根目录也就是与package.json文件同级的目录创建两个文件,名字分别是用于开发版本的 .env.development 和用户生产版本的 .env.production在.env.development文件中设置开发时的url，比如：REACT_APP_URL=http://localhost:8080...
2022-01-20 20:46:26
1518
原创 Vue首屏性能分析和优化
性能分析 借助插件 webpack-bundle-analyzer 先安装运行npm install webpack-bundle-analyzer –save-dev配置在vue.congfig.js中配置好 BundleAnalyzerPlugin 代码如下 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = {...
2021-12-29 16:07:09
2004
原创 JS判断日期是否合法并计算是该年的第几天
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> 年：<input type="text" id="yearInput"> 月：<input type="text" id="monthInput">.
2021-09-28 14:48:20
421
原创 CSS3太极旋转图与3D旋转图片
1.太极旋转图<style type="text/css"> main{ width: 300px; height: 150px; background-color: #000000; border-radius: 300px 300px 0 0; position: relative; animation: move 1s linear infinite; transform-origin: bottom; } d
2021-09-24 14:46:03
242
原创 CSS弹性盒
弹性盒box-sizing:content-box(标准盒) , border-box(怪异盒)1.怪异盒:为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制2.加内边距和边框，标准盒子增加盒子大小，减小内容区，怪异盒大小不变，内容区减小display:flex(弹性伸缩盒)/inline-flex(内联块级弹性伸缩盒)flex-direction (主轴排列方向)：row(默认，横行排列，左对齐)，row-reverse(反转横向排列，从 右向左排列)，column(纵向排
2021-09-13 17:53:32
161
原创 CSS3动画2-2D转换transform
目录2D转换(transform)1.translate方法(平移)2.rotate方法(旋转)3.scale方法(缩放)4.skew方法(倾斜)5.基点(transform-origin)2D转换(transform)1.translate方法(平移)transform：translate(100px) 水平向右平移100px 默认none，单位百分比的话参照自身 负值则反向平移transform：translateY(100px) 垂直向下平移1...
2021-09-13 17:52:14
169
原创 CSS3动画1
目录1.阴影(text-shadow,box-shadow)2.浏览器前缀3.优雅降级渐进增强4.渐变(gradient)5.过渡属性(transition)1.阴影(text-shadow,box-shadow)text-shadow(文本阴影):10px(水平阴影距离) 10px(垂直阴影距离) 10px(模糊距离) red(阴影颜色);Box-shadow(盒子阴影):10px(水平阴影距离) 10px(垂直阴影距离) 10px(模糊距离) 10px(模糊大 小)
2021-09-13 17:49:35
76
原创 CSS样式4
目录1.css三大特性(层叠性,继承性,优先级)Visibilityoutlineappearance:none;resize:none;1.css三大特性(层叠性,继承性,优先级)1.层叠性：层叠性是相同选择器操作CSS样式的叠加，是浏览器处理样式冲突的方式。样式冲突，遵循就近原则。后面样式盖前面2.继承性：子标签会继承父标签的某些样式。文本类属性:font,font-size,color,line-height,font-family等具有继承性，都.
2021-09-13 17:46:07
309
原创 CSS样式3
目录1..文本省略(white-space,overflow,text-overflow)2..行内垂直对齐(vertical-align)3.表格1..文本省略(white-space,overflow,text-overflow)white-space: nowrap;/*强制文本单行显示，直到遇到<br/>换行*/overflow: hidden; /*溢出隐藏*/text-overflow: ellipsis;/*单行文本溢出时显示省略号*/white
2021-09-13 17:44:08
96
原创 cs选择符
目录1.display(行内块)2.浮动(float,clear)3.盒子模型(padding,border,margin)4.伪类选择符5.定位(position)1.display(行内块)display:inline-block; 行内块元素，不能换行，可以设置宽度高度 inputdisplay:inline; 行内元素，不能换行，不能设置高度宽度 em,i,span,imagedisplay:block; 块级元素，自动换行，可以设置高度宽度 p...
2021-09-03 08:38:41
184
原创 css样式2
目录1.display(行内块)2.浮动(float,clear)3.盒子模型(padding,border,margin)4.伪类选择符5.定位(position)1.display(行内块)display:inline-block; 行内块元素，不能换行，可以设置宽度高度 inputdisplay:inline; 行内元素，不能换行，不能设置高度宽度 em,i,span,imagedisplay:block; 块级元素，自动换行，可以设置高度宽度 p...
2021-09-03 08:35:04
127
原创 CSS样式1
目录1.css2.css样式引入3.权重4.文本字体(font,text)5.列表(ul,ol)6.背景(background)1.css 1.什么是css？ css是一种技术 2.css有什么用？ css可以更加精准控制html元素。 3.css怎么用？ ...
2021-08-30 16:49:53
154
原创 HTML常用标签基础1
1.标题标签<Hn align="对齐方式">标题文字</Hn>n = 1、2、3、4、5、6 取1字体最大 align:设置水平对齐方式，默认靠左对齐，center居中对齐,right靠右 自动换行2.水平分割线标签<hr size="8" width="500" align="center" color="red"> size： 设置高度（粗细），默...
2021-08-26 10:33:55
853
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人