Loss of my heart-CSDN博客

原创 CSS布局的三种机制（情况）？

CSS布局的三种机制网页布局的核心——就是用CSS来摆放盒子。CSS提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：一、普通流（标准流）块级元素会独占一行，从上向下顺序排列；常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则会自动换行；常用元素：span、a、i、em等二、浮动让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示。三、定位将盒子定在浏览

2020-09-13 17:28:52 646

原创【CSS】CSS的三大特性

CSS的三大特性1. CSS具有层叠性2. CSS具有继承性3. CSS有优先级一、CSS具有层叠性说明层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。在HTML中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些样式出现的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。- 举例下面代码，出现一个div 标签指定了相同样式不同值的情况，这就是样式冲突。div{ color:red;}div{ color:blu

2020-09-10 11:15:57 1092 2

原创【ESLink】eslink语法检查

如何关闭esLink语法检查错误创建vue.config.js在vue.config.js中写入以下代码module.exports={ // 关闭eslink语法检查功能 lintOnSave:false}重新运行项目

2021-06-29 17:22:17 1520

原创 css3 伸缩弹性布局------flex

伸缩布局调整主轴方向（水平方向）：flex-direction方法名作用row默认值：水平方向column垂直显示row-reverse以相反的顺序水平排列column-reverse以相反的顺序垂直排列主轴方向对齐方式：justify-content方法名作用flex-start默认值，位于容器的开头flex-end位于容器的结尾center位于容器的中心space-between位于各行之间留有空白的

2021-02-02 14:41:39 215

原创 this的指向问题

this的指向问题调用方式this指向普通函数调用window构造函数调用实例对象原型对象里面的方法也指向实例对象对象方法调用该方法所属对象事件绑定方法绑定事件对象定时器函数window立即执行函数window第一种 function ljl() { console.log("这里this代指的是", this); } ljl();结果：this指向全局对象win

2020-12-23 15:37:30 187 2

原创 js 实现input框的全选和清空

input全选及取消全选（因为刚学js所以直接用的js写的）大家有什么可以讨论的欢迎下方评论代码可以直接复制就能用代码背后有注释，有看不懂的欢迎一起讨论<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

2020-10-06 09:28:51 4368

原创 js 内置对象及方法

内置对象内置对象JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象前面两种对象是JS 基础内容，属于 ECMAScript；第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法），内置对象最大的优点就是帮助我们快速开发JavaScript 提供了多个内置对象：Math、 Date 、Array、String等Math对象Mat

2020-10-04 10:33:18 152

原创 js 函数的定义

函数定义：函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。使用：声明函数// 声明函数function 函数名() {//函数体代码}//function是声明函数的关键字，必须小写//由于函数一般为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如getSum调用函数// 调用函数函数名(); // 通过调用函数名来执行函数体代码//调用的时候千万不要忘记添加小括号口诀：函数不调用，自己不执行注意：声明函数

2020-09-29 14:16:25 365

原创 js数组的定义、创建、遍历

数组：定义：数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。创建数组：JS有两种创建方式：利用 new 创建数组var 数组名 = new Array() ；//例：var arr = new Array(); // 创建一个新的空数组//或者var arr = new Array();arr[0]=new Array（）;a

2020-09-29 14:14:25 245

原创 js中的4种循环方式

循环for循环双重for循环while循环do-while循环for循环语法结构for(初始化变量; 条件表达式; 操作表达式 ){ //循环体}名称作用初始化变量通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。条件表达式用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。操作表达式用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出

2020-09-29 14:10:48 3699 1

原创 if switch 三元表达式语句

语句分类：if 语句 if else语句（双分支语句） if else if 语句(多分支语句)三元表达式switch语句if 语句if 语句语法结构// 条件成立执行代码，否则什么也不做if (条件表达式) {// 条件成立执行的代码语句}//语句可以理解为一个行为，循环语句和分支语句就是典型的语句。一个程序由很多个语句组成，一般情//况下，会分割成一个一个的语句。执行流程例子//判断是否会HTML技术var web = prompt('请

2020-09-28 09:20:51 449

原创 JavaScript 运算符

运算符运算符的分类JavaScript中常用的运算符有：算数运算符递增与递减预算符比较运算符逻辑运算符赋值运算符算术运算符**概念：**算数运算符使用的符号，用于执行两个变量或值的算数运算运算符描述实例+加10+20=30-减10-20=-10*乘10*20=200/除10/20=0.5%取余数（取模）返回除数的余数9%2=1运算符递增与递减**概念：**如果需要反复给数字变量添加或减去1，可以使用递增（+

2020-09-22 11:08:27 155

原创 JavaScript 运算符的优先级

运算符的优先级优先级运算符顺序1小括号（）2一元运算符先 ! 后&& 再||3算数运算符先*、/、% 后 +、-4关系运算符>、>=、<、<=5相等运算符== 、!=、= = = 、! = =6逻辑运算符先&&后||7赋值运算符=8逗号运算符，...

2020-09-22 11:07:24 232 2

原创使用js打印九九乘法表

代码略微简陋，适合一些初级的看，（哈哈哈） <script> for (var i = 1; i <= 9; i++) { for (var j = 1; j <= i; j++) { var product=i*j;//把i*j的值赋值给product document.write(i+'*'+j+'='+product);//实现9*9=81的样式

2020-09-21 17:10:51 326

原创 JS 输出1-100之间的素数

2020-09-21 17:07:45 5950 1

原创 JS用*号打印三角形

2020-09-21 17:05:14 1043

原创 HTML 盒子尺寸的计算

盒子尺寸的计算计算盒子的宽：宽度：width+2padding+2boder真实占有宽度= 左border + 左padding + width + 右padding + 右border（如果想保持一个盒子的真实占有宽度不变，那么加width就要减padding。加padding就要减width。）计算盒子的高：高度：height+2padding+2boder真实占有高度=上border+上padding+height+下padding+下border（如果想保持一个

2020-09-21 16:58:26 3835

原创数据类型之基本数据类型

数据类型变量的数据类型变量的是用来储存值的所在处，他们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位储存到计算机的内存中，JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定：var age = 10 ; //这是一个数字型var areYouOk = '是的' ; //这是一个字符串在代码运行时，变量的数据类型是由js引擎根据【等号】右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。JavaScrip

2020-09-18 18:28:42 306 2

原创变量如何命名？

变量命名规范？由字母（A-Za-z）、数字（0-9）、下划线（ _ ）、美元符号$组成。如：userAge，num01，_name严格区分大小写。var app；和var App；是两个变量不能以数字开头、保留字。例如：var、for、while变量名必须有意义。MMD BBD nl→age遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。如：myFirstName...

2020-09-18 16:33:39 143

原创 HTML的几种定位方式

HTML中的几种定位方式相对定位绝对定位固定定位定位详解定位也是用来布局的，它由两部分组成：定位=定位模式 + 边偏移边偏移边偏移属性示例描述toptop:80px顶端偏移量，定义元素相对于其父元素上边线的距离bottombottom：80px底部偏移量，定义元素相对于其父元素下边线的距离leftleft：80px左侧偏移量，定义元素相对于其父元素左边线的距离rightright：80px右侧偏移量，定义元素相对于其父元素右边线的

2020-09-17 20:08:36 3506

原创 HTML为什么要子绝父相？

HTML中的几种定位方式相对定位绝对定位固定定位

2020-09-17 19:53:33 2821

原创 js如何引用？

JS的三种书写方式行内式<input type="button" value="点我试试" onlick="alert('Hello World')"/>可以将单行或少量js代码卸载HTML标签的事件属性中（以on开头的属性）如：onclick注意单双引号的使用：在HTML中我们推荐使用双引号，js中我们推荐使用单引号可读性差，在HTML中编写大量js代码时，不方便阅读；引号易错，引号多层嵌套匹配时，非常容易弄混；特殊情况下使用内嵌式 <script>

2020-09-17 15:37:26 242

原创如何写好一个HTML页面？

如何写好一个页面一、前期准备素材学成在线PSD源文件开发工具 = PS（切图）+ submit（编辑器【代码】）+ Chrome（浏览器【测试用】）二、前期准备工作创建study目录文件夹（用于存放我们页面的相关内容）study目录内新建images文件夹（用于保存图片）新建index.html首页html文件（网站的首页统一规定为index.html）新建style.css样式文件。将样式引入到我们HTML页面文件中。（如何引入css样式？）样式表写入清除内外边距样式（检测样式

2020-09-16 08:26:44 633

原创 HTML如何清除浮动？

清除浮动的方法一、给父级元素设高（一般不推荐使用）二、clear语法：选择器{clear：属性值} clear：清除属性值描述left不允许左侧有浮动元素（清除左侧浮动的影响）right不允许右侧有浮动元素（清除右侧浮动的影响）both同时清除左右两侧浮动的影响ps：实际工作中我们几乎只用clear：both三、额外标签法（隔墙法）是在w3c推荐的做法是通过在浮动元素末尾添加一个空的标签，例如：<div style="clear:both"&g

2020-09-15 14:33:24 613

原创 CSS如何去掉ul前面的小圆点

CSS如何去掉ul前面的小圆点代码： <ul> <li>苹果</li> <li>李子</li> <li>栗子</li> <li>梨</li> </ul>示例：ps：可以看到每一个li前都有一个小圆点去掉小圆点的方法ul{list-style: none;}

2020-09-14 11:10:27 4487

原创 HTML5border的基本知识

一、盒子边框（border）边框综合设置border：border-width || border-style || border-color例如：border:1px solid red; //没有顺序属性作用border-width定义边框粗细，单位是pxborder-style边框的样式border-color边框颜色边框的样式none：没有边框（忽略所有边框的宽度p[默认值]）solid：单实线（常用）dashed：虚线dot

2020-09-14 11:00:44 1935 1

原创使用HTML+CSS+JS实现轮播图(适用于新手)

HTML\CSS\JS实现轮播图CSS部分 /* 左浮动 */ .fl { float: left; } /* 居中 */ .ma { margin: auto; } .banner { width: 520px;/* 宽度得跟图片的宽度一般宽 */ height: 280px; posit

2020-09-14 09:16:42 2238 1

原创【特效】3D旋转相册

3D旋转相册：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>致青春</title> <style> *{margin: 0;padding: 0;} html,body{height: 100%;} body{ overflow: hidden; display: flex; backgroun

2020-09-12 14:15:53 369

原创 CSS3的继承性？

1. 字体系列属性font：组合字体font-family：规定元素的字体系列font-weight：设置字体的粗细font-size：设置字体的尺寸font-style：定义字体的风格font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。font-stretch：允许你使文字变宽或变窄。所有主流浏览器都不支持。font-size-adjust：为某个元素规定一个 aspect 值，字

2020-09-10 11:25:49 515

原创 CSS中常用的选择器？

CSS常用的选择器有：1. 标签选择器设置选择器 div{ width: 100px; /* 设置的属性 */ }调用选择器 <div></div>2. 类选择器设置选择器.lei{ width: 100px; /* 设置的属性 */ }调用选择器 <div class="lei">调用类<

2020-09-09 09:16:30 282

原创 HTML5input表单的基本知识

form表单：input的基本属性：一、action属性规定当提交表单时，向何处发送表单数据。二、 type（1）type的属性值可以设置为：checked：默认被选择例：<input type="radio" name="xingbie" checked="checked">checkbox：复选框例：<input type="checkbox" name="">radio：单选框例：<input type="radio" nam

2020-09-08 20:04:30 611

原创 CSS3区分display:none与visibility: hidden

display:none与visibility: hidden的区别?display:none：如果给一个元素设置了display:none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。visibility: hidden：给元素设置visibility:hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。...

2020-09-08 17:09:06 147

原创初始化CSS样式的原因及弊端

1.浏览器差异不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异2.提高编码质量如果不初始化，整个页面做完会很糟糕，重复的css样式很多弊端：初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化...

2020-09-08 17:05:42 352

原创 CSS3的优先级计算

优先级就近原则，同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准;优先级为:1. 同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。2. important 比内联优先级高3. !important > id > class > tag4. 按CSS代码中出现的顺序决定，后者CSS样式居上；（近水楼台先得月）5. 行内样式优先级specificity值为1,0,0,0 高于外部定义例： **`.

2020-09-08 16:16:31 484

原创 HTML5排序列表基础

列表：无序列表：ul —— li代码：<ul> <li>年满18岁、单身</li> <li>抱着严肃的态度</li> <li>真诚选择另一半</li></ul>有序列表：ol——li<ol> <li>中国</li> <li>英国</li> <li>俄罗斯</li>

2020-09-06 19:56:12 317

原创 HTML标签分类！

css分类标准：按照HTML分类：文本级: p、span、a、b、i、u、em、img（文本内容，图片，链接，纯文本都可以装进去）容器级: div、 h系列、li、dt、dd（里面可以装标签，表格，ul，li，p）按照css分类：行内元素:所有的文本级标签，都是行内元素，除了p, p是个文本级，但是是个块级元素块级元素: 所有的容器级标签都是块级元素元素转换：块级元素转换为行内元素：display：inline行内元素转换为块级元素：display：block行内块元素：dis

2020-09-06 17:33:53 173

LmissL的博客