![](https://img-blog.csdnimg.cn/20190918140053667.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
前端小白记录学习前端知识点。
倚楼風听雨
努力学习 不甘平庸
展开
-
事件(JS)
事件事件对象事件冒泡(Bubble)事件的绑定事件的传播拖拽滚轮事件键盘事件事件对象onmousemove该事件将会在鼠标在元素中移动时被触发事件对象当事件的相应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数在事件对象中封装了当前事件相关的一切信息,比如:鼠标的坐标 键盘那个按键被按下 鼠标滚轮滚动的方向在IE8中,相应函数被处罚时,浏览器不会传递事件对象在IE8及以下的浏览器中,是将事件对象作为 window对象的属性保存的原创 2020-07-11 14:50:15 · 454 阅读 · 0 评论 -
JS操作css样式
JS操作css样式操作内联样式通过JS修改元素的样式语法:元素.style.样式名 = 样式值;注意:如果CSS的样式名中含有-,这种名称在JS中是不合法的。比如background-color需要将这种样式名修改为驼峰命名法;去掉-,将-后的首字母大写通过style属性设置的样式都是内联样式,而内联样式具有较高的优先级,所以通过JS修改的样式往往会立即显示;读取元素的样式获取元素当前显示的样式currentStyle语法: 元素.currentStyle原创 2020-07-07 09:31:50 · 398 阅读 · 0 评论 -
DOM增删改查
DOM 查询节点的属性获取元素节点获取元素节点的子节点获取父节点和兄弟节点DOM查询的其他方法DOM增删改Window常用对象方法节点的属性nodeNamenodeTypenodeValue文档节点#document9null元素节点标签名1null属性节点属性名2属性值文本节点#text3文本内容获取元素节点通过document对象调用getElementById()通过 id 属性获取一个元原创 2020-07-06 19:47:12 · 288 阅读 · 0 评论 -
正则表达式与字符串(JS)
正则表达式与字符串(JS)字符串的方法字符串和正则相关的方法正则表达式正则表达式的语法字符串的方法在底层字符串是以字符数组的形式保存的length属性 可以用来获取字符串的长度charAt() 可以返回字符串中指定位置的字符(根据索引获取指定位置的字符)charCodeAt() 获取指定位置字符的字符编码(Unicode编码)String.formCharCode() 可以根据字符编码去获取字符concat() 可以用来连接两个或多个字符串(作用与 + 一样)in原创 2020-06-28 13:47:45 · 535 阅读 · 0 评论 -
函数、Date、Math、包装类(JS)
JSforEach()slice(start, end)splice()call()和apply()argumentsDate对象Math包装类forEach() : JS中遍历数组forEach()方法需要一个函数作为参数像这种由我们创建但是不由我们调用的函数称为回调函数数组中有几个元素函数就回执行几次,每次执行时,浏览器会将遍历到的元素 以实参的形式传递进来,我们可以来定义形参,来读取这些内容浏览器会在回调函数中传递三个参数第一个原创 2020-06-28 13:44:50 · 138 阅读 · 0 评论 -
this、函数、prototype、toString(JS)
this、函数、prototype、toString(JS)this使用工厂方法创建函数原型prototypetoStringthis解析器在调用函数每次都会向函数内部传递进一个隐含的参数;这个隐含的参数就是this,this指向一个对象,这个对象我们成为函数执行的上下文对象,根据函数的调用方式不同,this会指向不同的对象以函数的形式调用时,this永远都是window以方法的形式调用时,this就是调用方法的那个对象 function fun() {原创 2020-06-27 22:57:34 · 138 阅读 · 0 评论 -
flex(弹性盒、伸缩盒)(css)
flex(弹性盒、伸缩盒)flex是css中的一种布局手段,它主要用来代替浮动来完成页面的布局flex可以使元素具有弹性,让元素可以跟随页面大小的改变而改变弹性容器要使用弹性盒,必须先将一个元素设置为弹性容器通过display来设置弹性容器display: flex 设置为块级弹性容器display: inline-flex 设置为行内的弹性容器弹性容器设置属性flex-direction指定容器中弹性元素的排列方式可选值:row 默认值,弹性元素在容器中水平排列原创 2020-06-27 15:13:27 · 219 阅读 · 0 评论 -
less
lessless是一门css的预处理语言less 是一个css的增强版,通过less可以编写更少的代码实现更强大的样式在less中添加了许多的新特性:像对变量的支持、对mixin的支持…less的语法大体上和css语法一致,但less中增添了许多对css的扩展,所以浏览器无法直接执行less代码,要执行必须先将less转换为css,然后再由浏览器执行// less中的单行注释,注释内容不会被解析到css中/* */ css中的注释,内容会被解析到css文件中less中的变量在.原创 2020-06-26 11:05:42 · 179 阅读 · 0 评论 -
过渡、动画、变形、旋转和缩放(css)
animation过度(transition)通过过渡可以指定一个属性发生变化时的切换效果通过过渡可以创建一些好的效果,提升用户体验transition-property: 指定要执行过渡的属性多个属性间用,隔开;如果所有属性都需要过渡,则使用all关键字大部分属性都支持过渡效果,注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡transition-duration: 指定过渡效果的持续时间时间单位: s 和 mstransition-timing-functio原创 2020-06-25 22:14:27 · 1378 阅读 · 0 评论 -
表格与表单(html标签)
表格与表单(html标签)表格在网页中通过用table 标签来创建一个表格在table 中使用 tr 表示表格中的一行,有几个tr就有几行在tr中使用 td表示一个单元格,有几个td就有几个单元格clospan 横向合并单元格rowspan 纵向合并单元格长表格可以将一个表格分成三个部分:头部 thead主题 tbody底部 tfootth 表示头部的单元格表格的样式border-spacing: 指定边框之间的距离border-collapse: coll原创 2020-06-14 22:19:27 · 213 阅读 · 1 评论 -
背景(css)
背景background-colorbackground-imagebackground-repeatbackground-positionbackground-clipbackground-originbackground-sizebackground-attachmentbackground雪碧图线性渐变径向渐变background-color 设置背景颜色background-image 设置背景图片background-image: url("./img/1.p原创 2020-06-12 16:22:35 · 160 阅读 · 0 评论 -
字体、图标字体、行高、文本样式(css)
字体、图标字体、行高、文本样式(css)字体相关的样式color 用来设置字体颜色font-size (字体大小)相关单位em相当于当前元素的一个font-sizerem相当于根元素的一个font-sizefont-family字体族(字体的格式)serif衬线字体sans-serif非衬线字体monospace等宽字体指字体的类别浏览器会自动使用该类别下的字体font-family 可以同时指定多个字体,多个原创 2020-06-09 18:34:32 · 477 阅读 · 0 评论 -
相对定位、绝对定位、固定定位、粘滞定位(css)
定位(position)定位是一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置使用position属性来设置定位position: xxx;可选值static(默认值)元素是静止的没有开启定位relative开启元素的相对定位absolute开启元素的绝对定位fixed开启元素的固定定位sticky开启元素的粘滞定位相对定位 position: relative;相对定位的特点:元素开启相对定位后,如果不设置偏移原创 2020-06-08 14:46:54 · 747 阅读 · 0 评论 -
BFC/clear/::after伪元素 解决高度坍塌, ::before解决外边距重叠 (clearfix同时解决高度塌陷和外边距重叠)(css)
BFC/clear/::after伪元素 解决高度坍塌, ::before解决外边距重叠 (clearfix同时解决高度塌陷和外边距重叠)(css)高度塌陷的问题:在浮动布局中,父元素的高度默认是被子元素撑开;当子元素浮动后,其会完全脱离文档流,将会无法撑起父元素的高度,导致父元素的高度丢失BFC(Block Formatting Context) 块级格式化环境BFC是一个CSS中的一个隐含属性,可以为一个元素开启,开启BFC后该元素会变成一个独立的布局区域元素开启BFC后的特点:原创 2020-06-06 14:34:15 · 716 阅读 · 0 评论 -
浮动(css)
浮动浮动通过浮动可使一个元素向其父元素的左侧或右侧移动float设置元素的浮动none默认值,元素不浮动left向左浮动right向右浮动注意:元素设置浮动后,水平布局的等式不需要强制成立元素设置浮动以后,会完全从文档流中脱离,不再占用文档流的位置 所以元素下边的还在文档流中的元素会自动向上移动,形成覆盖(不会覆盖文字,可以做文字环绕图片的效果)浮动的特点:浮动元素会完全脱离文档流,不再占据文档流中的位置设置浮动以后元素会向父元素的原创 2020-06-05 21:42:09 · 3817 阅读 · 6 评论 -
文档流(normal flow)
文档流(normal flow)网页是一个多层的结构,一层摞着一层通过css可以分别为每一层来设置样式用户只能看到最顶上一层这些层中,最底下的一层称为文档流,文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列元素主要有两个状态在文档流中不在文档流中(脱离文档流)元素在文档流中的特点1、块元素- 块元素会再页面中独占一行(自上向下垂直排列)- 默认宽度是父元素的全部(会把父元素撑满)- 默认高度是被内容撑开(子元素)2、行内元素 span- 行内元素不会独占.原创 2020-06-04 14:58:05 · 417 阅读 · 0 评论 -
盒子模型(box model)(组成部分、布局、样式、轮廓、阴影和圆角)
盒子模型(box model)盒子组成部分组成部分内容区content内边距padding边框border外边距margin内容区(content)元素中所有子元素和文本内容都在内容区中排列内容区的大小有 width 和 height 两个属性来设置width 默认值为 auto边框(border)边框属于盒子边缘,里面属于盒子内部,外面是盒子外部。边框的大小会影响整个盒子的大小设置边框至少要三个样式边框的宽度 bor原创 2020-06-04 14:57:10 · 1188 阅读 · 0 评论 -
CSS选择器及选择器权重
id选择器语法:#id属性值{}#box{} #red{}类元素选择器语法:.class属性值{}通配选择器作用:选中页面中的所有元素语法:*{}交集选择器作用:选中同时符合多个条件的元素语法:选择器1选择器2…选择器n{}- 交集选择器中如果有元素选择器,必须使用元素选择器开头div.weight{ … }选择器分组(并集选择器)作用:同时选择多个选择器对应的元素语法:选择器1,选择器2,…,选择器n{}h1, span{ … }#b1, .p1.原创 2020-06-03 19:32:34 · 233 阅读 · 0 评论 -
入门前端html5+css3
HTML5+CSSbody标签:页面中所有的可见元素都应该存在元素中;head标签:为一张网页储存一些必要的信息;title 标签:标题标签 h1……h6;small:副标题标签p 标签:用于划分段落;div (division) :容纳其他的元素,用于分类,整理网页中的内容。类似于目录;a (anchor) :锚链接 制定在网页中的链接 a 标签里面 herf 是一个网页的一个属性 可有多个属性, targe="" 用于指定在何处位置打开网页,是新建还是当前网页打开。一般默原创 2020-05-29 17:06:57 · 197 阅读 · 0 评论 -
前端环境搭建
前端环境搭建下载基本常用软件1Xmind 用于制作思维导图2、ColorPix 屏幕取色器 (QQ截图类似)3、VMware 建立虚拟计算机平台&CTF4、Git Bash 写前端用的工具,是windows下的命令工具。5、VSCode (现代化轻量级代码编辑器)是一种程序开发环境,通过下载插件来开发某种编程语言的软件。6、Googel Chrome Web浏览工...原创 2019-09-28 22:31:25 · 316 阅读 · 0 评论