流浪小码蚁-CSDN博客

原创浅谈JS的解构，用好解构的这个技巧

想要用好解构首先要了解什么是解构解构定义：允许按照一定模式，从数组和对象中提取值，对变量进行赋值。解构必须满足的条件：（模式匹配），只要等号两边的模式相同，左边的变量就会被赋予对应的值。主要介绍2种解构常用的类型：数组解构和对象解构。数组解构：如果变量a有一个值，变量b也有一个值，我们想变量的a，b的值相互调换怎么办呢let a = 2;let b = 5;let c = b;b = a;a = c;console.log(a, b, c);// 5 2 5 没有用解构的话，我们需

2020-08-02 22:45:15 841

原创浅谈JavaScript中的DOM节点方法

文档对象模型（Document Object Model，简称DOM)，文档中的每个成分都是一个节点。节点有哪些1.文档本身就是一个节点，也是最大的节点，文本节点。2.HTML的每一个标签也是一个节点，元素节点3.包含HTML标签中的文本也是一个节点，文本节点4.每个HTML属性是一个节点，属性节点每一个节点都表示一个Node对象。因为文档节点是最大一个节点，所以可以使用 document全局变量来引用Document对象获取文档元素的方法文档里的元素很多，所以必须通过一些方式来选取元素的

2020-07-26 22:51:13 139

原创浅谈你必须知道的CSS选择器有那些

首先要知道html(超文本标记语言)用于展现文本内容，css(层叠式样式表单)是对HTML语言功能的补充，多用于样式，主要是通过对网页中字体、颜色、背景、图像及其他各种元素的控制,使网页能够完全按照设计者的要求来显示。怎么才能从结构层次复杂html的结构中，添加需要样式，那么就需要我们的主角选择器来帮你实现，接下来介绍有哪些选择器。基础选择器(基本选择器)1. 通用元素选择器(通配符选择器)书写格式 * {声明块} 该选择器表示所有标签都使用此样式。适用场景，统一样式* { margin

2020-07-19 18:11:06 143

原创浅谈JS的隐式转换

隐式转换就是在您对2个不相同的数据类型进行某些操作时，JS帮您把这2个不相同的数据类型进行一些转换，变成相同数据类型再进行操作。下面我们先介绍JS的数据类型有哪些。JS的2大数据类型基础数据类型(简单数据类型)：string(字符串)、number(数值)、boolean(布尔)、null(空)、undefined(定义尚未赋值)、symbol(ES6新引入的，功能是唯一的值)。引用数据类型(复杂数据类型)：Object(对象)、array(数组)、function(函数)既然隐式转换是2个不相

2020-07-12 18:34:21 234

原创 JS-浅谈Array数组的一些方法

一般使用数组方法是数组名.方法名(参数）includes使用当前方法的数组是否包含你输入的参数，返回布尔值let numbers = [1,3,5,7,9] ; console.log(numbers.includes(7));//tureindexOf && lastIndexOf使用当前方法的数组是否包含你输入的参数，返回数组下标 let numbers = [1,3,5,7,9,3] ; //indexOf从左往右查找，如果找到与你输入的参数相等的数，则返回第一个

2020-07-05 18:12:06 82

原创浅谈三栏布局

说到常用三栏布局，我觉得有3种1.绝对定位三栏布局2.浮动三栏布局3.弹性盒子三栏布局接下来用代码效果展示一下这三种布局方式：1.绝对定位三栏布局2.浮动三栏布局其实绝对定位三栏布局跟浮动三栏布局原理差不多，都是两侧的区域利用定位体系的特性，脱落了文档流，而中间的一栏因为是一个块级元素，根据自身的特性，因为没有设置宽度，所以默认是auto，宽度会充满整个包含块，从而实现了中间宽度自适应。3.弹性盒子三栏布局使用弹性盒子进行布局，左右定宽，中间自适应只需要设置 flex: 1，flex

2020-06-21 21:35:23 170

原创浅谈overflow的属性之间区别

根据菜鸟网文档里面显示overflow属性有四个值(除开继承inherit)：visible (默认), hidden, scroll, 和auto。下面先展示一下几个属性的效果。visible (默认)：超出内容不会被隐藏，会呈现在元素框之外。hidden：内容会被剪切，超出元素框的内容被隐藏。scroll：超出元素框内容会被隐藏，但是浏览器会显示滚动条以便查看其余的内容（不管内容超没有超出元素框，滚动条都会存在）。auto：如果有内容超出元素框时候，内容会被隐藏，但是浏览器会显示滚动条以

2020-06-14 12:06:03 1240

原创浅谈外边距合并的问题

外边距合并问题，根据w3school中首先水平外边距不会重合，而垂直方向的外边距可能会发生重合，并且主要是在常规流中。常规流向中两个或多个块级元素相邻(其间没有任何非空内容、padding、边框等)的垂直外边距可能会重合。所以当元素使用了浮动(float),绝对定位(absolute),或者改变display:inline-block;都不会产生这种现象。计算的方式为:两个块级元素的外边距，当全是正值，取其中最大，一正一负，取它们相加的结果，当全为负值取，最小的那个。1.当2个块级元素是兄弟级时候

2020-06-07 13:56:59 597

原创 HTML中一些空白间距的处理

在我们使用html过程中，有时候总是会出现一些莫名的空白间距，所有特此总结一下一些碰到的空白间距。第一种：浏览器自身所带的margin(外边距)，padding(内边距)所产生的空白：在我没有给div添加任何样式的时候，div还是离上边和左边有空白间距，这个空白间距是浏览器自身所带的8px的margin(外边距)造成的。解决的方法：可以在所写的样式里面写body{margin:0;padding:0;}或者引入重置文件reset.css或者normalize.css都可以去除这种空白间距。第二

2020-05-31 18:17:14 6278

原创 flex=n跟flex-grow=n到底有什么不同

最近在进行项目的时候使用flex与flex-grow出现了一些细微差别。在用弹性盒子进行布局的时候，我们进行宽度处理时候，单独使用flex-grow对项目进行比例分配时，感觉跟预期的效果不一样，这是怎么回事呢。在搞明白有什么差别之前先了解一下flex-grow属性跟flex的默认值问题，根据菜鸟文档里面显示的flex：是flex-grow，flex-shrink，flex-basis的简写，他们的默认值分别为0，1，auto；还有就是他们取值范围，flex-grow，flex-shrink可以是数字

2020-05-23 18:23:45 362

m0_48056329的博客