Wendy Bryant-优快云博客

原创 JS面试题之：如何终止for循环

JS面试题之：如何终止for循环你真的了解for循环吗？for循环结构解析常规解法面试解法你真的了解for循环吗？官方定义 : for循环可以将代码块执行指定的次数。 for循环结构解析 for (let i = 0; i < 10; i++) { console.log(i); } 以上代码可解析为： { let i = 0; for (; i < 10; ) { console.log(i); i++; } } //输出结果为0~9 需要注意以下几点： for循环

2021-03-30 21:00:15 1714 1

原创 CSS定位--绝对定位是根据谁定位的？

绝对定位是相对于谁确定位置的？有一句口诀：子绝父相，子绝父绝。意思就是，开启了绝对定位的子元素根据它的开启了相对定位或者绝对定位的父元素而确定位置。事实上，绝对定位的元素是根据包含块确定位置的，包含块就是离他最近的开启了定位的祖先元素。但是，如果祖先元素没有开启过定位，那就相对于初始包含块定位什么是初始包含块？上代码！ <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"&g

2021-03-17 18:56:31 1782 1

原创 JavaScript相同数据类型和不同数据类型间的运算

一、字符串的 + 运算注意: 只要是字符串在和任意数据类型做相加+的运算,都是字符串拼接例： console.log('5' + '3'); //53 console.log('5' + 3); //53 console.log('哈哈' + '5abc'); //哈哈5abc console.log('哈哈' + NaN); //哈哈NaN console.log('哈哈' + true); //哈哈true console.log('哈哈' + undefined); //哈哈undefin

2021-03-16 21:05:38 269 1

原创 JavaScript的数据类型

一、数值类型（number）例如：1、 5、 0、 -8、 3.14 通常进行数学运算（1） js在进行小数运算时,会出现误差,不用js做一些精确的运算例如: 钱,火箭发射（2）二进制:0b ，八进制: 0 ，十六进制: 0x ，科学计数法 e3(表示10的3次方) e-4(表示10的负4次方) 二、字符串类型（string）例如：'哈哈'、'520abc'、 '老王'、 '13681234567' length属性是字符串的长度,一个汉字,一个字母,一个数字都是一个长度，获..

2021-03-16 20:40:59 199 1

原创初识flex弹性布局

一、弹性布局和开启弹性空间弹性布局（伸缩布局 / 弹性盒子 / flex布局），弹性布局是父元素和子元素之间的关系父元素：弹性空间，父元素还具备之前的显示模式特征。子元素：弹性元素（弹性项），不在具备之前的显示模式特征，默认当父元素盛不下时会进行压缩。开启弹性空间：给需要开启弹性的元素的父元素设置属性display:flex html <body> <div class="box1"> <div>1</div> <

2021-02-01 20:55:27 216

原创标准盒子模型和怪异盒子模型

标准盒子模型和怪异盒子模型标准盒子模型: 当元素设置宽高后,再给元素设置padding和border后,元素的尺寸会变大,如果不希望元素的尺寸变大,要相应从content区域手动减去padding和border撑开的大小怪异盒子模型(内减模式): 当元素设置宽高后,再给元素设置padding和border后,元素的尺寸不会变大,会自动从content区域减去padding和border撑开的大小,盒子的尺寸不变注意: 使用怪异盒子模型时,必须设置固定的宽高才...

2021-01-27 21:08:42 291

原创 css伪元素before和after用法详解

css伪元素before和after用法详解要想了解伪元素before和after到底是什么，首先就应该打开编译器敲入代码并在浏览器运行检查 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 300px; ...

2021-01-27 19:53:05 8718 1

原创解决浮动元素导致其父元素高度塌陷的问题

解决浮动元素导致其父元素高度塌陷的问题当一个子元素开启浮动时，会导致其父元素的高度塌陷，如下所示父元素未设置宽高，仅有一个5像素的边框，可见上下边框已经重合，父元素高度塌陷，子元素从父元素中溢出 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * {

2021-01-19 19:27:29 417

原创 css复合属性的层叠

关于css复合属性的层叠问题 1、用font复合属性时，建议严格按照（是否倾斜是否加粗字号/行高字体）的顺序写，字号和字体是必填项。例1： font:40px “宋体”; 建议不改字体不用此复合属性 2、当复合属性和单属性同时存在时，例2： font-style:italic; font:700 40px “宋体”; 此时倾斜不会生效，因为font复合属性未设置倾斜，所以层叠了上面的font-style 建议先写复合属性，再写单属性 ...

2021-01-18 19:48:29 242 2

原创 css的继承和层叠

css选择器权重，以及样式继承 1、CSS选择器 !important > 行内式 > id选择器 > 类选择器 > 标签选择器权重值：无穷大 1000 100 10 1 同一选择器，靠后者生效 2、样式继承继承的权重值为零，所以继承的样式可以被任何选择器修改的属性对应的属性值所覆盖。例： <!DOCTYPE html> <h...

2021-01-18 17:19:57 157

转载关于 vue 的 this.$router.push、replace、go 的区别

关于 vue 的 this.$router.push、replace、go 的区别 this.$router.push 说明：跳转到指定URL，向history栈添加一个新的记录，点击后退会返回至上一个页面、代码演示： this.$router.push('/index') this.$router.push({path:'/index'}) this.$router.push({path:'/index', query:{name:'123'}}) this.$router.push({name:'

2020-09-13 17:09:04 399

WenDy18cm的博客