- 博客(68)
- 收藏
- 关注
RSS订阅原创 逻辑运算符
JS中为我们提供了三种逻辑运算符！ 非- ！可以用来对一个值进行非运算-所谓非运算就是值对一个布尔值进行取反操作，true变成false，false变成true-如果对一个值进行两次取反，它不会变化-如果对非布尔值进行元素，则会将其转换为布尔值，然后再取反所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean（）函数一样&& 与 -&&可以对符号两侧的值进行与运算并返回结果
2020-06-05 22:59:58
386
原创 自增和自减
自增 ++- 通过自增可以使变量在自身的基础上增加1- 对于一个变量自增以后，原变量的值会立即自增1- 自增分为两种： 后++（a++) 和前++（++a）无论是a++还是++a，都会立即使原变量的值自增1不同的是a++ 和++a 的值不同a++的值等于原变量的值（自增前的值）++a的值等于原变量新值（自增后的值）自减 -- - 通过自减可以使变量在自身的基础上减1 -自减分两种：后--（a--)和前--(--a) 无论是a++还是++a，都会立即使原变量的值自增1
2020-06-05 22:59:13
429
原创 一元运算符
一元运算符，只需要一个操作数+ 正号-正号不会对数字产生任何影响- 负号-负号可以对数字进行负号的取反 -对于非Number类型的值 它会将先转换为Number，然后再运算 可以对一个其他的数据类型使用+，来将其转换为Number 它的原理和Number()函数一样var a =123;a = -a;a = +true;a = “18”;a = +a;console.log("a = "+a);console.log(type
2020-06-05 22:58:28
324
原创 运算符
运算符也叫操作符通过运算符可以对一个或多个值进行运算，并获取运算结果比如： typeof就是运算符，可以来获得一个值的类型它会将该值的类型以字符串的形式返回number string boolean undefined object 算数运算符 当对非Number类型的值进行运算时，会将这些值转换为Number然后再运算 任何值和NaN做运算都得NaN + +可以对两个值进行加法运算，并将结果返回
2020-06-05 22:57:41
157
原创 转换为Boolean
将其他的数据类型转换为Boolean -使用Boolean()函数 --数字--> 布尔 -除了0和NaN，其余的都是true --字符串-->布尔 --除了空串，其他的都是true --null和undefined都会转换为false -对象也会转换为true var a =123;//true..
2020-06-05 22:56:37
366
原创 其他进制的数字
在JS中，如果需要表示16进制的数字，则需要以0x开头如果需要表示8进制的数字，则需要以0开头如果需要表示2进制的数字，则需要以0b开头但是不是所有的浏览器都支持var a = 123;//十六进制数字a = 0x10;a =0xff;a =0xcafe;//八进制数字a =070;//二进制数字a = 0b10;//像"070"这种字符串，有些浏览器会当成8进制，有些会当成10进制解析a =“070”a =parseInt(a,10);//可以在parseInt()中传递一
2020-06-05 22:55:39
196
原创 转换为Number
将其他的数据类型转换为Number转化方式一：使用Number()函数-字符串–》数字1.如果是纯数字的字符串，则直接将其转换为数字2.如果字符串中有非数字的内容，则转换为NaN3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0-布尔—> 数字true 转成 1false 转成 0 --Null --> 数字 0 --Uneducated --> 数字NaN 转换方式二：
2020-06-04 22:41:21
431
原创 强制类型转换
强制类型转换-指将一个数据类型强制转换为其他的数据-类型转换主要指，将其他的数据类型转换为String Number Boolean将其他的数据类型转换为String方式一：- 调用被转换数据类型的toString()方法-该方法不会影响到原变量，它会将转换的结果返回-但是注意：null和undefined这两个值没有tostring（）方法如果调用它们的方法，会报错方拾二： -调用String()函数，并将被转换的数据作为参数传递给函数 -使用String()函数
2020-06-04 22:40:10
122
原创 Null和Undefined
Null（空值）类型的值只有一个，就是nullnull这个值专门用来表示一个为空的对象使用typeof检查一个null值时，会返回object Undefined(为定义）类型的值只有一个，就是undefined 当声明一个变量，但是并不给变量赋值时，它的值就是Undefined 使用typeof检查一个undefined时也会返回undefined...
2020-06-04 22:38:46
128
原创 布尔值
Boolean 布尔值布尔值只有两个，主要用来逻辑判断true-表示真false-表示假 使用typeof检查一个布尔值时，会返回booleanvar bool =false;console.log( typeof bool);console.log(bool);
2020-06-04 22:37:55
1967
原创 Number
在JS中所有的数值都是Number类型，包括整数和浮点数（小数）JS中可以表示的数字的最大值Number.MAX_VALUE1.7976931348623157e+308Number.MIN_VALUE 大于0的最小值5e-324如果使用Number表示的数字超过了最大值，则会返回一个Infinity 表示正无穷-Infinity 表示负无穷使用typeof检查Infinity也会返回NumberNaN 是一个特殊的数字，表示 Not A Number使用typeof检查一个Na
2020-06-04 22:36:55
193
原创 数据类型
数据类型指的就是字面量的类型在JS中一共有6种数据类型String 字符串Number 数值Boolenan 布尔值Underfined 未定义Object 对象其中String Number Boolean Underfined属于基本数据类型而Object属于引用数据类型 String字符串 -在JS中字符串需要使用双引号引起来 -使用双引号或单引号都可以，但是不要混着用 -引号不能嵌套，双引号不能放双引号，单引号不能放单引号在字符
2020-06-04 22:36:02
143
原创 标识符
标识符- 在JS中所有的可以由我们自主命名的都可以称为标识符- 例如; 变量名·函数名·属性名都属于标识符命名一个标识符时需要遵守如下的规则：1.标识符中可以含有字母·数字·_·$2.标识符不能以数字开头3.标识符不能是ES中的关键字或保留字4.标识符一般都采用驼峰命名法- 首字母小写，每个单词的开头字母大写，其余字母小写helloWorld xxxYyyZzz JS底层保存标识符实际上是采用的Unicode编码 所以理论上，
2020-06-04 22:34:47
146
原创 字面量和变量
字面量， 都是一些不可改变的值比如： 1 2 3 4 5 6字面量都是可以直接使用，但是我们一般不会直接使用字面量 变量 变量可以用来保存字面量，而且变量的值是可以任意改变的 变量更加方便我们使用，使用在开发中都是通过变量去保存一个字面量 而很少直接使用字面量 可以通过变量对字面量进行描述声明变量在JS中使用var关键字来声明一个变量var a; //为变量赋值 a =123;
2020-06-04 22:34:21
232
原创 基本语法
/*多行注释js注释多行注释，注释中的内容不会被执行，但是可以通过在源代码中查看要养成良好的编写注释的习惯，也可以通过注释来对代码进行一些简单的调试*///单行注释console.log(“hello”);//该语句用来在控制台输出一个日志1.js中严格区分大小写2.js中每一条语句以（;）结尾-如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有些时候，浏览器会加错分号，所以在开发在分号必须写3.JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化.
2020-06-04 22:33:05
85
原创 js代码编写的位置
可以将js代码编写到外部js文件中，然后通过script标签引入写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制推荐使用的方式 script标签一旦用于引入外部文件了，就不能再编写代码了，即使编写了浏览器也会忽略 如果需要则可以在创建一个新的script标签用于编写内部代码 <script type="text/javascript">//可以将js代码编写到script标签 alert("我是script标签中的代码！！！");&l
2020-06-04 22:31:07
206
原创 渐变
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果！！渐变是图片，需要通过background-image来设置 线性渐变，颜色沿着一条直线发生变化 linear-gradient() linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域 - 线性渐变的开头，我们可以指定一个渐变的方向
2020-06-03 22:45:52
767
原创 背景
background-color 设置背景颜色background-image 设置背景图片- 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色- 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满- 如果背景的图片大于元素，将会一个部分背景无法完全显示- 如果背景图片和元素一样大，则会直接正常显示background-repeat 用来设置背景的重复方式可选值：repeat 默认值 ， 背景会沿着x轴 y轴双方向重复repeat-x 沿着x轴方向重复repe
2020-06-03 22:44:31
160
原创 文本的样式
text-align 文本的水平对齐可选值：left 左侧对齐right 右对齐center 居中对齐justify 两端对齐vertical-align 设置元素垂直对齐的方式可选值：baseline 默认值 基线对齐top 顶部对齐bottom 底部对齐middle 居中对齐text-decoration 设置文本修饰可选值：none 什么都没有underline 下划线line-through 删除线overline 上划线white-space 设置网页如何处理空
2020-06-03 22:42:25
144
原创 行高
行高（line height）- 行高指的是文字占有的实际高度- 可以通过line-height来设置行高行高可以直接指定一个大小（px em）也可以直接为行高设置一个整数如果是一个整数的话，行高将会是字体的指定的倍数- 行高经常还用来设置文字的行间距行间距 = 行高 - 字体大小 字体框 - 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度 行高会在字体框的上下平均分配可以将行高
2020-06-03 22:40:55
495
原创 图标字体
图标字体（iconfont）- 在网页中经常需要使用一些图标，可以通过图片来引入图标但是图片大小本身比较大，并且非常的不灵活- 所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入- 这样我们就可以通过使用字体的形式来使用图标 fontawesome 使用步骤 1.下载 https://fontawesome.com/ 2.解压 3.将css和webfonts移动到项目中 4.将a
2020-06-03 22:40:14
1017
原创 字体
font-face可以将服务器中的字体直接提供给用户去使用问题：1.加载速度2.版权3.字体格式@font-face {/* 指定字体的名字 /font-family:‘myfont’ ;/ 服务器中字体的路径 */src: url(’./font/ZCOOLKuaiLe-Regular.ttf’) format(“truetype”);}字体相关的样式color 用来设置字体颜色font-size 字体的大小和font-size相关的单位em 相当于当前元素的一个font-s
2020-06-03 22:39:07
138
原创 元素的层级
对于开启了定位元素，可以通过z-index属性来指定元素的层级z-index需要一个整数作为参数，值越大元素的层级越高元素的层级越高越优先显示 如果元素的层级一样，则优先显示靠下的元素 祖先的元素的层级再高也不会盖住后代元素...
2020-06-03 22:37:32
161
原创 绝对定位元素的布局
水平布局left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度 - 当我们开启了绝对定位后: 水平方向的布局等式就需要添加left 和 right 两个值 此时规则和之前一样只是多添加了两个值：
2020-06-03 22:36:56
266
原创 粘滞定位
粘滞定位- 当元素的position属性设置为sticky时则开启了元素的粘滞定位- 粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
2020-06-03 22:36:14
1119
原创 固定定位
固定定位：- 将元素的position属性设置为fixed则开启了元素的固定定位- 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样唯一不同的是固定定位永远参照于浏览器的视口进行定位固定定位的元素不会随网页的滚动条滚动...
2020-06-03 22:35:41
351
原创 绝对定位
绝对定位- 当元素的position属性值设置为absolute时，则开启了元素的绝对定位- 绝对定位的特点：1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化2.开启绝对定位后，元素会从文档流中脱离3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开4.绝对定位会使元素提升一个层级5.绝对定位元素是相对于其包含块进行定位的 包含块( containing block ) - 正常情况下：
2020-06-03 22:35:07
1118
原创 定位的简介
定位（position）- 定位是一种更加高级的布局手段- 通过定位可以将元素摆放到页面的任意位置- 使用position属性来设置定位可选值：static 默认值，元素是静止的没有开启定位relative 开启元素的相对定位absolute 开启元素的绝对定位fixed 开启元素的固定定位sticky 开启元素的粘滞定位 - 相对定位： - 当元素的position属性值设置为relative时则开启了元素的相对定位
2020-06-02 17:43:41
421
原创 解决高度塌陷
高度塌陷的问题：在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失 父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱 所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！BFC(Block Formatting Context) 块级格式化环境- BFC是一个CSS中的一个隐含的属性，可以为一个元素开
2020-06-02 17:42:35
105
原创 浮动
通过浮动可以使一个元素向其父元素的左侧或右侧移动使用 float 属性来设置于元素的浮动可选值：none 默认值 ，元素不浮动left 元素向左浮动right 元素向右浮动 注意，元素设置浮动以后，水平布局的等式便不需要强制成立 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置， 所以元素下边的还在文档流中的元素会自动向上移动 浮动的
2020-06-02 17:36:19
83
原创 轮廓和圆角
box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动第三个值 阴影的模糊半径第四个值 阴影的颜色outline 用来设置元素的轮廓线，用法和border一模一样轮廓和边框不同的点，就是轮廓不会影响到可见框的大小border-radius: 用来设置圆角 圆角设置的圆的半径大小border-radius 可以分别指定四个角的圆角四个值 左上 右
2020-06-02 17:35:29
192
原创 盒子的尺寸
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定 box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用） 可选值： content-box 默认值，宽度和高度用来设置内容区的大小 border-box 宽度和高度用来设置整个盒子可见框的大小 wi
2020-06-02 17:32:58
989
原创 行内元素的盒模型
行内元素的盒模型- 行内元素不支持设置宽度和高度- 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局- 行内元素可以设置border，垂直方向的border不会影响页面的布局- 行内元素可以设置margin，垂直方向的margin不会影响布局display 用来设置元素显示的类型可选值：inline 将元素设置为行内元素block 将元素设置为块元素inline-block 将元素设置为行内块元素行内块，既可以设置宽度和高度又不会独占一行table 将元素设
2020-06-02 17:31:52
177
原创 外边距的折叠
垂直外边距的重叠（折叠）- 相邻的垂直方向外边距会发生重叠现象- 兄弟元素- 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）- 特殊情况：如果相邻的外边距一正一负，则取两者的和如果相邻的外边距都是负值，则取两者中绝对值较大的 - 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理 - 父子元素 - 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
2020-06-02 17:29:17
93
原创 盒子的垂直布局
默认情况下父元素的高度被内容撑开子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出使用 overflow 属性来设置父元素如何处理溢出的子元素 可选值： visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示 hidden 溢出内容将会被裁剪不会显示 scroll 生成两个滚动条，通过滚动条来查看完
2020-06-02 17:28:39
155
原创 盒子的水平布局
元素的水平方向的布局：元素在其父元素中水平方向的位置由以下几个属性共同决定“margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargin-right 一个元素在其父元素中，水平布局必须要满足以下的等式margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内
2020-06-02 17:27:17
202
原创 盒子模型-外边距
外边距（margin）- 外边距不会影响盒子可见框的大小- 但是外边距会影响盒子的位置- 一共有四个方向的外边距：margin-top- 上外边距，设置一个正值，元素会向下移动margin-right- 默认情况下设置margin-right不会产生任何效果margin-bottom- 下外边距，设置一个正值，其下边的元素会向下移动margin-left- 左外边距，设置一个正值，元素会向右移动 - margin也可以设置负值，如果是负值则元素会
2020-05-31 08:10:55
242
原创 盒子模型-内边距
内边距（padding）- 内容区和边框之间的距离是内边距- 一共有四个方向的内边距：padding-toppadding-rightpadding-bottompadding-left - 内边距的设置会影响到盒子的大小 - 背景颜色会延伸到内边距上 一共盒子的可见框的大小，由内容区 内边距 和 边框共同决定， 所以在计算盒子大小时，需要将这三个区域加到一起计计算
2020-05-30 22:04:02
285
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人