- 博客(36)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 CSS 的 BFC 和 触发BFC
文章目录BFC 和 触发BFC1.常见定位方案2.BFC是什么3.触发/创建 BFC4.BFC 特性及其应用BFC 和 触发BFC1.常见定位方案普通流 (normal flow)在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。浮动 (float)在浮动布局中，元素
2021-10-26 17:09:12
254
原创 CSS 浮动和清除浮动
文章目录CSS 浮动和清除浮动1.浮动是什么2. 浮动的值3.浮动的特性4.为什么要清除浮动5.清除浮动的方法CSS 浮动和清除浮动1.浮动是什么float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。2. 浮动的值left 表明元素必须浮动在其所在的块容器左侧的关键字。right 表明元素必须浮动在其所在的块容器右侧的关键字。none 表明元素不进行浮动的关键字。inline-start 关
2021-10-26 11:27:06
188
1
原创 CSS选择器权重/优先级
CSS选择器的权重 / 优先级> 1000 ：!important，不建议使用；1000 ：行内样式，如 style="color:red;"；0100 ：id 选择器，如 #content；0010：类 | 属性 | 伪类 选择器，如 .content | [content] | :hover；0001 ：标签 选择器 | 伪元素，如 h1 | ::after；0000 ：通配符 | 子 | 相邻 选择器，如 * | > | +无 ： 继承的样式...
2021-10-25 22:57:17
151
原创 在vscode使用v-for时报错 Elements in iteration expect to have ‘v-bind:key‘ 的解决方法即原因
v-for的使用：在vs中使用v-for的报错的问题和解决方法1.v-for的使用2.报错的原因3.解决方法1.v-for的使用作用： 根据数据生成列表结构语法格式：<li v-for="(item,index) in arr">{{ item }}</li><!-- arr 可以是数组 / 对象 -->2.报错的原因官方推荐在使用 v-for 时，应该给对应的元素/组件添加上:key 属性如果没有 key 来保障循环中的唯一性，那么组件则会被打乱。
2021-07-20 17:54:50
516
原创 Echarts 各种图形的标题 换行 和 水平居中 问题
实现Echarts 各种图形的标题 换行显示 和 水平居中显示 问题使用 '\n' 换行使用 x 属性 水平居中x 属性 ：水平安放位置，其值为：'left' (默认) | 'center' | 'right' | {number}(x坐标，单位px)y 属性：垂直安放位置，其值为：'top' (默认) | 'bottom' | 'center' | {number}(y坐标，单位px)myEchart.setOption({ title: { text: 'World
2021-07-15 21:25:13
3372
原创 html中的文本溢出处理
css实现单行/多行文本溢出省略号显示1. 单行文本处理：2. 多行文本处理：1. 单行文本处理：元素的宽高一定要先确定p{ width:80%; height:2em; white-space:nowrap; /*强制一行显示*/ overflow:hidden; /*溢出部分隐藏*/ text-overflow:ellipsis; /*文字用省略号代替溢出部分*/}2. 多行文本处理：以两行为例，元素的整体宽高也要确定p{ width:80%;
2021-05-12 21:31:13
230
原创 jQuery尺寸、位置操作——元素的大小、偏移，被卷去的部分
24.jQuery尺寸、位置操作1.jQuery尺寸2.jQuery位置1.jQuery尺寸语法用法width()/heigt()设置或获取元素的width/height值innnerWidth()/innerHeight()设置或获取元素的width/height+padding值outerWidth()/outerHeight()设置或获取元素的width/height+padding+border值outerWidth(true)/outerHeight
2021-03-08 22:41:49
174
原创 JavaScript实现拖拽模态框
23.模态框的拖拽——软设问题总结1. 效果图2. 具体事件描述3.代码1. 效果图例子主要用来说明 模态框拖拽的知识点运用 所以css部分不怎么好看2. 具体事件描述原理：鼠标按下并且移动，松开鼠标事件：鼠标按下mousedown 鼠标移动mousemove 鼠标松开mouseup过程：鼠标移动过程中，获得最新的值赋值给模态框的left和top值模态框的位置：鼠标的坐标减去鼠标在盒子内的坐标3.代码 * { padding: 0;
2021-03-08 22:17:06
157
原创 JavaScript三大系列——offset、client、scroll介绍
22.三大系列——软设问题总结1.元素偏移量offset系列1.1 offset概述1.2 offset 与 style 区别2.元素可视区client系列3.元素scroll系列3.1元素scroll系列属性3.2 页面被卷去的头部3.4 页面被卷去的头部兼容性解决方案三大系列总结主要用法：1.元素偏移量offset系列1.1 offset概述offset就是偏移量的意思，使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获取元素距离带有定位的父元素的位置获得元素自身的大
2021-03-08 21:50:01
259
原创 js鼠标滚轮事件
21.js鼠标滚轮事件——软设问题总结1.滚轮事件简述2.主要js代码1.滚轮事件简述当滚动鼠标滚轮或操作其它类似输入设备时会触发滚轮事件。2.主要js代码因标准未定义滚轮事件具体会引发什么样的行为，引发的行为实际上是各浏览器自行定义的。 window.addEventListener("wheel", function(e) { let evt = e || window.event; //考虑兼容性 evt.preventD
2021-03-06 12:34:51
8575
原创 css实现视差滚动
20.css实现视差滚动——软设问题总结20.1 视差滚动20.2 视差滚动主要要点20.3 代码20.1 视差滚动视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。20.2 视差滚动主要要点把背景的宽高铺满一个浏览器可视区：width = 100%; height = 浏览器可视高度将背景设置为相对于视口固定：background-attachment: fixed;20.3 代码 <div cl
2021-02-23 00:16:56
365
2
原创 js定时器的用法，解决多次点击/触发定时器越走越快的问题
19.js定时器，以及解释、解决多次点击/触发定时器越走越快——软设问题总结19.1 js定时器19.2 定时器的使用19.3 定时器越走越快的原因19.4 解决定时器“越走越快”的问题19.1 js定时器在菜鸟教程中介绍到：js 定时器有以下两个方法：setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。setTimeout() ：在指定的毫秒数后调用函数或计算表达式。两个方法都有三个
2021-02-22 23:14:49
5889
1
原创 触底事件——判断页面是否到达底部
18.触底事件——软设问题总结触底事件——简单地说就是页面滚动到底部的事件，一般用来做无限下拉效果，或者用来提示用户下面已经没有内容了思路：页面被卷去高度 + 浏览器可视窗口的高度 >= 整个页面的高度 则触发触底事件//js document.addEventListener('scroll', function() { //页面卷去高度 + 浏览器可视窗口的高度 >= 整个页面的高度 if (window.pageYOffset + window.innerH
2021-02-22 21:52:12
2700
原创 获取浏览器可视区的宽高
17.获取浏览器可视区域的宽高——软设问题总结//高度window.innerHeight//宽度window.innerWidth
2021-02-21 23:37:34
314
1
原创 CSS margin外边距塌陷、合并问题
16.解决外边距塌陷——软设问题总结16.1 外边距塌陷1.父子关系的块元素2.兄弟关系的块元素16.2 解决外边距塌陷的方法1.解决父子关系的塌陷2.解决兄弟关系的塌陷16.1 外边距塌陷1.父子关系的块元素如果一方有margin-top，则父子盒子一起有同样值上外边距；如果两方都有margin-top，则父子盒子取较大值的上边距；效果图如下：2.兄弟关系的块元素如果相邻兄弟有单独的margin-top / margin-bottom 是不会塌陷的相邻兄弟的上面一个块元素使用了ma
2021-02-15 14:49:23
1355
2
原创 15.mouseover和mouseenter的区别，父元素设置mouseover，子元素经过会触发
15.mouseover和mouseenter的区别——软设问题总结15.1 两个事件从中文解释看出本质的差别15.2 具体区别描述15.1 两个事件从中文解释看出本质的差别mouseover：鼠标经过事件mouseenter：鼠标进入事件15.2 具体区别描述在使用该事件无子元素下，这两者是毫无差别的；但在多数情况下，使用该事件的元素都是有子元素的，这就两者产生了区别。mouseover：进入绑定该事件的元素和其子元素均会触发该事件，所以有一个重复触发，冒泡过程。其对应的离开事件 mouse
2021-02-05 20:43:08
450
2
原创 防止鼠标左键拖动选中页面的元素
13.防止鼠标左键拖动选中页面的文字——软设问题总结很多页面在鼠标按住左键拖动的时候都会选择鼠标拖过的元素，像这样：有的时候会给用户挺不好的体验的，然而想要禁止这个功能其实也是很简单的，只需要在body标签设置如下任一方法：css的方法 body{ -webkit-user-select:none; user-select:none; }js的方法 <body onselectstart="return false;" > </body
2021-02-05 17:54:51
1233
1
原创 给图片加一个黑色半透明的遮盖层
12.给图片加一个黑色半透明的遮盖层——软设问题总结12.1 知识点12.1.1 img标签::after和::before失效12.1.2 默认地，::after和::before是行内元素12.2 代码案例12.3 不使用img标签的另一种方法12.3.1 思路如下：12.3.2 代码如下12.1 知识点在做这个效果的时候，想必第一想法都是先在img标签放图片然后再在img::before/::after元素设置遮盖层，但是会发现这个方法无法出现遮盖层。主要原因是：12.1.1 img标签::a
2021-02-05 17:31:56
6643
5
原创 CSS使元素居中的几种用法
11.CSS使元素居中的几种用法——软设问题总结11.1 使行内元素在其父元素内居中11.2 使块级元素在其父元素内居中11.1 使行内元素在其父元素内居中水平居中 ：其父元素设置 text-align:center;垂直居中 ：使其父元素的 line-height: 数值px; 中的数值 与其父元素height: 数值px;中的数值相等水平垂直居中：以上两个一起使用11.2 使块级元素在其父元素内居中水平居中 ：该元素设置margin:0 auto;子绝父相后，给该元素设置
2021-01-31 18:54:33
120
3
原创 使用JavaScript和jQuery分别实现返回页面顶部功能
10.实现返回页面顶部功能——软设问题总结10.1 效果10.2 代码10.2.1 页面滚动到某位置返回顶部图标出现/消失10.2.2 点击图标返回顶部10.2.3 html和css10.1 效果10.2 代码10.2.1 页面滚动到某位置返回顶部图标出现/消失 //js document.addEventListener('scroll', function() { if(window.pageOffset >= 500) { //若页面滚动大于500px 图标显示 否则
2021-01-31 15:13:36
175
2
原创 各个定位在文档流中的占位情况
9.各个定位在文档流中的占位情况——软设总结系列9.1定位的分类9.2 各个定位的特点9.3 各个定位是否脱离标准流9.1定位的分类静态定位: static相对定位: relation绝对定位: absolute固定定位: fixed9.2 各个定位的特点静态定位：默认定位方式，按照标准流位置，没有边偏移。相对定位：元素移动时是相对于它原来的位置来说的；原来在标准流的位置继续占有，后面盒子任然以标准流的方式对待它。绝对定位：相对于最近的relation/absolute的父盒子移动；
2021-01-30 20:40:11
457
原创 JavaScript之DOM事件流——核心：事件冒泡
8.DOM事件流——软设总结系列8.1 事件流的定义8.2 事件冒泡8.3 事件捕获8.4 统一标准8.5 例子html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？8.1 事件流的定义事件流描述的是从页面中接收事件的顺序事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流8.2 事件冒泡
2021-01-27 23:16:09
132
原创 笔记：红宝书 ——《JavaScript高级程序设计》 ：第2章 HTML中的JavaScript
红宝书 第2章 HTML中的JavaScript2.1 `在JavaScript早期，网景公司的工作人员希望在将JavaScript引入HTML页面的同时，不会导致页面在其他浏览器中渲染初问题最终他们达成了向网页中引入通用脚本能力的共识当初他们的工作得到了保留，并且最终形成了HTML规范2.1 <script>元素将JavaScript插入HTML的主要方法是使用<script>元素。这个元素是由网景公司创造出来，并最早在Netscape Navigator2 中实现的
2021-01-27 21:14:41
180
2
原创 笔记：红宝书 ——《JavaScript高级程序设计》 ：第一章 什么是JavaScript
文章目录第1章 什么是JavaScript1.1 简短的历史回顾1.2 JavaScript实现1.2.1 ECMAScript1.ECMAScript版本2.ECMAScript符合性是什么意思3. 浏览器对ECMAScript的支持1.2.2 DOM1.为什么DOM是必需的2.DOM级别3.其他DOM４.Web浏览器对DOM的支持情况1.2.3 BOM1.3 JavaScript版本1.4 小结第1章 什么是JavaScript1.1 简短的历史回顾初想法——1995年，网景公司的Brenda
2021-01-25 17:12:24
247
2
原创 限制input file上传类型只能是图片(附带accept可指定的值，即文件限制类型)
6.限制input file上传类型只能是图片——软设问题总结系列6.1限制文件上传类型的属性——`accept`6.2 accept的其他取值6.1限制文件上传类型的属性——accept主要代码是设置input的行内属性 accept 及其值代码如下：<input type="file" accept="image/*">点击选择文件后的效果图如下：6.2 accept的其他取值*.3gppaudio/3gpp, video/3gpp3GPP A
2021-01-22 21:54:22
4075
原创 CSS修改input标签中placeholder值的文字样式
5.设置input中placeholder属性的文字样式——软设问题总结系列5.1 placeholder的定义和用法5.2 placeholder选择器5.3支持修改的属性5.4 案例5.1 placeholder的定义和用法placeholder是HTML5 input的新属性，它一般表示input输入框的默认提示值；placeholder属性提供可描述输入字段预期值的提示信息(hint)；该提示会在输入字段为空时显示，并会在字段获得焦点时消失；placeholder 属性适用于以下的 &
2021-01-22 21:20:21
3825
原创 单/复选框的默认样式的改变+写单/复选框时应注意的问题
3.改变单选/复选框的默认样式——软设问题总结系列3.1 使用单选/复选框时应注意的问题3.2 简单的大小改变3.3 更改默认样式3.1 使用单选/复选框时应注意的问题单选：name属性的值应该一致，才能保证选择一个复选：name属性的值不能一致3.2 简单的大小改变此方法在Google能正常显示，但是在火狐有时候就会失效给input添加一个样式：zoom:数值;数值>1时，单选/复选的图标（圆圈/正方形）会放大，数值越大，图标越大数值<1时，图标会缩小数值=1时，图
2021-01-20 21:11:59
598
原创 单选/复选框中点击文字能选择该选项
4.单选/复选框中点击文字选择该选项——软设问题总结系列为了提高用户体验，在单选/复选框中，点击文字选择相应选项这一操作是必不可少的。因为单选/复选框的操作都差不多，所以本文以单选框作为例子说明：主要的标签是<input>和<label>重点在于<label>标签的for属性的值应该与<input>标签的id属性的值相等代码如下： <input type="radio" name="sex" value="girl" id="s
2021-01-20 20:51:43
730
原创 如果刷新页面就清空表单里的值：刷新页面事件+清空表单内容
2.刷新页面清空表单内容——软设问题总结系列2在做项目的时候发现，刷新页面后，在火狐浏览器中表单的值不会自动清除，这时就需要我们在程序中设置这个事件：2.1刷新页面事件刷新页面的事件有好几个，这里我使用的是页面重新载入事件load，要是用的是其他事件也是也可的。2.2清空表单内容因为js写法跟jQuery写法有一点点不一样，所以我把两种写法都列举出来 <input type="text">js的写法var input = document.querySelector('
2021-01-18 22:24:58
1117
原创 CSS设置椭圆边框
1.椭圆边框的设置首先圆角边框我们应该都会做border-radius: 数值px;这样能得到四个角度一样的圆角边框例如：<div>这是一个div</div> div { width: 200px; height: 200px; line-height: 200px; text-align: center; font-size: 20px;
2021-01-18 21:36:49
11379
转载 java产生随机数的方法
java生成随机数的三种方法new Random()Math.random()currentTimeMillis()1.new Random()借助java.util.Random类产生一个随机数发生器，有两种构造函数Random() 以当前时间为默认种子Random(long seed) 以指定的种子值进行产生之后，借助不同的语句产生不同类型的数种子：产生随机数的第一次使用值 ，机制是通过一个函数，将这个种子的值转化为随机数空间中的某一个点上，并且产生的随机数均匀的散步再空
2020-12-16 19:48:07
187
原创 点击非a标签跳转页面
点击非超链接跳转页面的方法这里插入一下a标签跳转页面的方式吧<a href="index.html"></a>接下来介绍下非超链接跳转页面吧window.open('url') //打开新的页面window.location = 'url' //跳转页面后有后退功能window.location.replace //跳转后没有后退功能下来举个栗子吧：以div为例直接在html上操作<div onclick="window.open('index.h
2020-11-04 15:18:44
880
原创 原生js/jQuery实现一键复制本页面链接到剪切板
jQuery实现复制本页面链接到剪切板最近做项目，刚好学到这个知识点首先，这个分为两个步骤：获取本页面的url复制到剪切板话不多说：获取本页面的url一般是使用这个语句window.location.href...
2020-11-03 22:32:17
2341
2
原创 阿里巴巴矢量图标库的使用，超详细用法
阿里巴巴矢量图标库在页面中的使用官网地址： iconfont 阿里巴巴矢量图标库登录在页面中选择喜欢图标库点进鼠标悬停想要的图标 选择添加入库入库成功后 本图标会有一个虚线框 右上角的库图标会有个数的小红点点击购物车图标 选择添加至项目（如果没有就创建一个）确定 就会跳转到我的项目页面 选择图标 添加入库 选择 Font class点击下载至本地下载完成后，打开压缩包，只解压一个iconfont.css文件到页面要用到的css包里然后开始在代码中操作在head中导入
2020-10-10 10:34:09
28010
5
原创 html+css实现二级导航
只使用html和css实现二级导航二级导航几乎是每个页面必备的功能，它也有很多实现的方法，接下来介绍一种只用html+css就实现出来的方法：先放上效果图：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>简单二级导航的做法</title> <style> * {
2020-09-24 16:34:45
3537
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人