![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 56
四灵妖
这个作者很懒,什么都没留下…
展开
-
canvas学习笔记未完待续
canvas学习笔记:基本认识:<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.canvasx相当于一个画布,它可以用于绘制图形、创建动画. <canvas> 最早由Apple引入WebKit,除一些过时的浏览器不支持<canvas> 元素外,所有的新版本主流浏览器都支持它。基本用法:<canvas id="tutorial" width="150" height="150"></canvas>原创 2020-12-15 09:59:36 · 230 阅读 · 0 评论 -
浏览器的重绘与回流
浏览器的渲染过程:具体过程:浏览器把获取到的html代码解析成1个Dom树,html中的每个tag都是Dom树中的1个节点,根节点就是我们常用的document对象 。dom树里面包含了所有的html tag,包括display:none隐藏,还有用JS动态添加的元素等。DOM树的构建是一个深度遍历的过程(当前节点的所有子节点遍历完成才会去构建当前节点的下一个兄弟节点).在构建DO...原创 2020-03-26 20:42:24 · 148 阅读 · 0 评论 -
js页面跳转
1.js页面跳转的本质:js页面跳转就是利用javesrcipt对打开的页面ULR进行跳转。2.实现跳转的方法:原创 2020-03-24 22:41:40 · 64 阅读 · 0 评论 -
箭头函数后加不加花括号的区别
转载自:https://blog.csdn.net/qq_42099772/article/details/89578704看下面的实例:添加大括号时 一定要有return!!!原创 2020-03-24 00:15:30 · 1060 阅读 · 1 评论 -
数组的find、filter、map、forEach、reduce、include、concat、sort方法应用
find方法:1.定义和用法find() 方法返回通过测试(函数内判断)的数组的第一个元素的值,如果没有符合条件的则返回 undefined。find() 方法为数组中的每个元素都调用一次函数执行:当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。注意: find() 对于空数组,函...原创 2020-03-24 00:05:01 · 413 阅读 · 0 评论 -
计算属性(及缓存),set()和get(),watch
计算属性在computed属性对象中定义计算属性的方法在页面中使用{{方法名}}来显示计算的结果每一个计算属性都包含一个getter 和一个setter,getter:属性的get方法,setter:属性的set方法,通过getter/setter实现对属性数据的显示和监视.上面的示例都是计算属性的默认用法, 只是利用了getter 来读取。在需要时,也可以提供一个setter 函数...原创 2020-03-18 20:22:02 · 927 阅读 · 0 评论 -
js中apply、call、bind的区别
原创 2020-03-18 09:27:51 · 62 阅读 · 0 评论 -
jS隐式转换
JavaScript是做弱类型语言,在使用算术运算符时,运算符两边的数据类型可以是任意的,之所以不同的数据类型之间可以做运算,是因为JavaScript引擎在运算之前会悄悄的把他们进行了隐式类型转换。例如:数值和布尔类型的值:只有少数情况下,错误类型才会导致出错,比如调用非函数,或者读取null或者undefined的属性时:多数情况下,JavaScript都不会出错的,而是自动的进行相...原创 2020-03-14 13:21:37 · 1706 阅读 · 0 评论 -
==和===的区别、NaN的判断方法
总的一句话来说:相等和不相等——先转换类型(强制转型)再比较,全等和不 全等——仅比较而不转换在转换不同的数据类型时,相等和不相等操作符遵循下列基本规则:如果有一个操作数是布尔值,则在比较相等性之前先将其转换为数值——false 转换为0,而true 转换为1;2. 如果一个操作数是字符串,另一个操作数是数值,在比较相等性之前先将字符串转换为数值;3. 如果一个操作数是对象,另一个...原创 2020-03-14 11:01:20 · 565 阅读 · 0 评论 -
离线安装React developer tools
下载链接http://www.cnplugins.com/devtool/react-developer-tools/显示程序包无效的解决方案:把下载好的.crx扩展名的离线Chrome插件的文件扩展名改成.zip或者.rar,然后在当前文件夹解压,解压城后在Chrome的地址栏中输入:chrome://extensions/ 打开Chrome浏览器的扩展程序管理界面,并在该界面的右上方的开发者...原创 2020-03-02 14:09:33 · 1082 阅读 · 0 评论 -
字体相关样式/ fontawesome库/阿里iconfont库的使用方法
1.字体相关样式:1.1 color 用来设置字体颜色1.2 font-size 字体的大小, 和font-size相关的单位em 相当于当前元素的一个font-sizerem 相对于根元素的一个font-size1.3行高:行高指的是文字占有的实际高度, 可以通过line-height来设置行高行高可以直接指定一个大小(px em) ,也可以直接为行高设置一个整数, 如果是一个...原创 2020-02-27 12:35:27 · 1098 阅读 · 0 评论 -
相对定位/绝对定位/固定定位/粘滞定位/层级
1.定位的概念:定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置,使用position属性来设置定位。可选值:static 默认值,元素是静止的没有开启定位relative 开启元素的相对定位absolute 开启元素的绝对定位fixed 开启元素的固定定位sticky 开启元素的粘滞定位2.偏移量的概念:当元素开启了定位以后,可以通过偏移量来设置元素的位置。...原创 2020-02-26 12:00:55 · 885 阅读 · 0 评论 -
浮动中的clear属性(66)
1.如果我们不希望某个元素因为其他元素浮动的影响而改变位置,可以通过clear属性来清除浮动元素对当前元素所产生的影响2. clear- 作用:清除浮动元素对当前元素所产生的影响- 可选值:left 清除左侧浮动元素对当前元素的影响right 清除右侧浮动元素对当前元素的影响both 清除两侧中最大影响的那侧3.原理: 设置清除浮动以后,浏览器会自动为元素添加一个上外边距, 以...原创 2020-02-25 10:29:04 · 368 阅读 · 0 评论 -
CSS高度塌陷、BFC及after解决方法、垂直外边距重叠以及clearfix解决方法
CSS高度塌陷1.高度塌陷问题的描述:一般是父元素和子元素之间, 父元素的宽度默认是100%继承的,高度被子元素撑开, 如果子元素设置浮动,脱离文档流,父元素就会没有高度(父元素本身在文档流中),就会影响文档流中其他元素的布局,必须要进行处理。2.解决方法:BFCBFC(Block Formatting Context) 块级格式化环境- BFC是一个CSS中的一个隐含的属性,可以为一个...原创 2020-02-24 22:48:08 · 434 阅读 · 1 评论 -
js的helloword
原创 2019-10-22 09:01:04 · 127 阅读 · 0 评论 -
选择器规范和行高
1.选择器和{之间有空格,标签和:之间没有空格,但是标签和属性值之间有空格。2.并集选择器竖着写:3.选择器的嵌套层数应不超过3层,位置靠后的限定条件应尽可能精确。例如.nav a p(要保证不能和不想选的内容冲突,但是尽量不要超过3层)行高基线就是最短的一条线行间距:行高:通过设置文字的行高等于盒子的高度,可以让文本在盒子种垂直居中对齐解释:当不设置行高的时候,...原创 2019-10-18 21:59:53 · 218 阅读 · 0 评论 -
行内元素和块元素的区别
注意:1.只有文字才组成的段落,例如p标签,h1,h2,h3,h4,h5,h6,属于文字类块级元素,里面不能放其他块级元素。2.链接里面不能再放链接。3.行内元素内部只能放文本和行内元素,但是a标签里面可以放块元素。行内元素:1.和相邻行内元素在一行上。2.高,宽无效,但水平方向的padding和margin可以设置,垂直方向无效。3.默认宽度就是它本身内容的宽度。4.行内元素内部...原创 2019-10-18 21:19:54 · 317 阅读 · 0 评论 -
导航内示例
text-align就是让块元素里面的文字内容(内联元素和行内元素也可以当作文字)居中对齐。原创 2019-10-18 20:50:14 · 92 阅读 · 0 评论 -
链接伪类选择器
伪类选择器:向某些选择器选择特殊的效果类选择器以.开头伪类选择器以:开头顺序不能颠倒:lv hao(lv的包,好 )实际的开发种只用到的hover:浏览器通过历史记录来判断一个链接是否被访问过;由于涉及到隐私问题,所以使用visited伪类只能设置字体颜色;hover和active也可以为其他元素设置,ie6不支持对超链接之外的元素使用hover和active。文本框获取...原创 2019-10-16 11:36:30 · 312 阅读 · 0 评论 -
通栏写法及分布型示例
通栏中心的部分形式上和版心一样宽,只是背景颜色不显示就好了。原创 2019-10-16 09:49:29 · 426 阅读 · 0 评论 -
版心
原创 2019-10-15 21:13:30 · 177 阅读 · 0 评论 -
浮动补充
浮动会脱离文档流,不占文档流的位置,会影响其他(后面的/下面的)文档流的位置,浮动只有左右浮动。1.浮动的元素不会超过内边距,不会贴着边框。2.一行显示:3.设置浮动后会使元素显示有行内块元素的特性。块元素设置浮动后贬称行内块元素,行内块元素浮动后变成块元素。父元素一定是文档流,块元素,独占一行。...原创 2019-10-15 20:40:36 · 82 阅读 · 0 评论 -
浮动
如果想把三个div元素按行排列(块元素默认在文档流中自上向下排列):1.可以设置display:inline-block.2.只是在文档流中自上而下排列,如果希望元素在页面中水平排列,可以使元素脱离文档流,使用float使元素浮动,从而脱离文档流。float:当为一个元素设置浮动以后,元素会立即完全脱离文档流,空出它之前在文档流的位置,元素脱离文档流后,它下边的元素会立即向上移动,元...原创 2019-10-13 21:06:44 · 204 阅读 · 1 评论 -
文档流
文档流:文档流处在网页的最底层,它表示的是一个页面中的位置,我们所创建的元素默认都处在文档流中。就像块元素在文档流中默认宽度是父元素的100%,设置内边距时不会影响可见框的大小。...原创 2019-10-13 19:24:28 · 94 阅读 · 0 评论 -
overflow
1.子元素默认是存在于父元素的内容区中,理论上子元素的大小最大可以等于父元素内容区的大小,如果子元素的大小超过了父元素的内容区,超出的部分会在父元素意外的位置显示。超出父元素的内容,称为溢出的内容。父元素默认的是将溢出的内容在父元素外面显示。2.overflow:可选值:–visible(默认值,不会对溢出内容做处理,元素会在父元素以外的位置显示)–hidden溢出的内容会被修剪,不会被显...原创 2019-10-12 22:06:56 · 222 阅读 · 0 评论 -
display和visbility
1.display:如果我们单独设置链接的宽和高是不会起作用的,因为内联元素的盒子属性的宽和高不起作用,所以先将其变成块。因为块元素独占一行,显示效果如下图所示。hello被独占一行。若设置为inline-block,行内块元素,既具有块元素的特点,可以设置宽和高,又不会独占一行。none不显示某元素(在上例中就是a元素),并且位置也释放出来了。2.visbility:和...原创 2019-10-12 21:47:12 · 226 阅读 · 0 评论 -
内联元素的盒子
原创 2019-10-12 21:20:11 · 91 阅读 · 0 评论 -
浏览器的默认样式
使用通配选择器*{},主要清除margin和padding.原创 2019-10-12 10:05:51 · 101 阅读 · 0 评论 -
垂直外边距的重叠解决方法
1.垂直外边距的重叠(兄弟元素之间):在网页中相邻垂直方向的外边距会发生外边距的重叠。兄弟元素之间的相邻****垂直方向外边距取最大值而不是取和。当使用标签a将两区域隔开,使其不相邻。2.父子元素的垂直外边距相邻了,那么子元素的垂直外边距会设置给父元素。例如想给子元素设置一个上外边距,却发现子元素和父元素一起向下移动。解决方法一类:1.使用a将box1和box2隔开,那么俩...原创 2019-10-12 10:00:22 · 449 阅读 · 0 评论 -
外边距
1.外边距指的是当前盒子与其他盒子之间的距离,它不会影响可见框的大小,但是会影响到盒子的位置,盒子也有4个方向的外边距。margin-xxx(top/bottom/left/right)2.eg.margin-top指的是盒子的上外边距,盒子的上边距和其他盒子的距离。由于页面中的元素都是靠左靠上摆放的,当我们设置上和左外边距时,会导致盒子自身的位置发生改变,如果设置右和下外边距会改变其他盒子...原创 2019-10-11 20:46:12 · 2446 阅读 · 0 评论 -
列表标签
1.无序列表:2.有序列表3.列表之前可以相互嵌套,无序列表可以嵌套有序列表,有序列表也可以嵌套无序列表。原创 2019-09-29 21:43:34 · 131 阅读 · 0 评论 -
CSS小技巧
1.浏览器解释CSS是有一定顺序的,如果对某一个元素先后定义了同一个属性,在浏览器中以“后定义的那个属性值”为准。原创 2019-09-19 21:23:46 · 71 阅读 · 0 评论 -
内边距
内边距(padding)指的是盒子的内容与盒子边框之间的距离,一共有4个方向的内边距。padding-xxx(top/bottom/left/right)加了内边距之后:可见内边距会影响盒子的可见框的大小,内容区的背景会延伸到内边距。因为 内容区可以放内容,而内边距不能,通过放元素可以间接看出其分界线,但是不明显。可通过该方式,因为子元素只包含在盒子的内容区。如图4个方...原创 2019-10-09 21:41:52 · 1647 阅读 · 1 评论 -
盒子边框设置的简写样式
1.盒子边框的属性三个不是缺一不可,浏览器会默认其他未写的值。大部分浏览器边框的宽度和颜色有默认值,而边框的样式默认值是none。2.边框的简写样式,通过它可以同时设置4个边框的样式,宽度,颜色,而且没有顺序要求。注意:border:是同时指定4个边框,不能同时指定。但是提供了border-xxx(top/right/bottom/left)可以同时设置4个边框中的一个边。如下例所示,两...原创 2019-10-09 21:13:01 · 678 阅读 · 0 评论 -
B/S和C/S软件架构
原创 2019-09-22 19:37:01 · 125 阅读 · 0 评论 -
CSS背景样式
1.背景颜色:可以看出color设置的是文本的颜色,而background-color是背景的颜色。2.背景图像:原创 2019-09-20 17:00:15 · 81 阅读 · 0 评论 -
CSS边框局部样式
css边框样式是四条边框的整体样式,而css边框局部样式可以分别针对上下左右四条边框设置单独的样式。***注意:***可以使用“border-bottom:0px”和“border-bottom:none”两种方法去除边框...原创 2019-09-20 16:37:09 · 542 阅读 · 0 评论 -
CSS边框样式
1.边框的三个属性:1.border-width:像素值2.border-style:其中solid和dashed最常用。3.border-color:颜色值***注意:***边框的设置可简单化为border:5px dashed red;原创 2019-09-20 15:56:49 · 291 阅读 · 0 评论 -
CSS应用
1.删除超链接下的横线:原创 2019-09-19 21:48:00 · 53 阅读 · 0 评论 -
CSS段落样式
1.综述:2.text-decoration结果由变成这样因为text-decoration为none可以取掉已有的格式。原创 2019-09-19 21:43:49 · 1723 阅读 · 0 评论