CSS的基础知识和JS的基础知识

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/LittleBoyss/article/details/93524173

CSS
CSS（Cascade Style Sheets）层叠样式表, 是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS是用来美化网页用的，没有网页则CSS毫无用处，所以CSS需要依赖HTML展示其功能 。

语法
CSS 样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个 CSS属性和属性值。

选择器{样式–>样式名字:值}
行内字样 style=”样式”
行内式式将样式定义在具体html元素的style属性中
内部样式 style 标签定义在head 中
嵌入式通过在html页面内容开辟一段属于css的代码区域，通常做法为在< head>标签中嵌套

组合选择器
CSS组合选择器说明了两个选择器直接的关系。 CSS组合选择符包括各种简单选择符的组合方式。
后代选择器（派生选择器）
用于选择指定标签元素下的后辈元素 选择器1 选择器2{…}

子选择器
用于选择指定标签元素的所有第一代子元素，以大于号分隔
选择器1>选择器2{…}
相邻兄弟选择器 选择器1+选择器2{…}
普通兄弟选择器 选择器1~选择器2{…}

CSS常用属性设置
背景
CSS 背景属性用于定义HTML元素的背景效果
background-color 颜色
Background-image 图像
Background-repeat 如何重复背景图像

文本
Color 颜色
text-align 对齐方式 center（居中），left（左对齐），right（右对齐）
text-decoration
规定添加到文本的修饰，属性值：none、underline、overline、line-through
1）underline
对文本添加下划线，与HTML的u元素相同。
2）overline
对文本添加上划线。
3）line-through
对文本添加中划线，与HTML中的s和 strike 元素相同。
4）none
关闭原本应用到元素上的所有装饰。
text-indent 设置文本首行缩进

字体
font-family 字体样式
font-size 文本大小
font-style
字体风格，该属性最常用于规定斜体文本。 属性值：normal、italic、oblique
1）normal：文本正常显示；
2）italic：文本斜体显示；
font-weight
字体加粗，该属性设置文本的粗细。
bold：可以将文本设置为粗体。

列表
list-style
该属性按如下顺序设置列表样式：
list-style-type：列表项目标记样式。
list-style-position：列表项目标记位置
list-style-image：把图像设置为列表中的项目标记

list-style-type

list-style-position

list-style-image

填充 盒子模型
border、padding、margin三个属性构成了盒子模型。
Border 同时设置边框的宽度、样式、颜色
使用border-width、border-style、border-color单独设置
border-style的属性

border-collapse

设置是否将表格边框折叠为单一边框，属性值：separate
border-spacing设置分隔单元格边框的距离

padding
设置元素所有内边距的宽度，或者设置各边上内边距的宽度。如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性
margin
设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度
单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right
auto：自动，可以理解为居中的意思

对齐方式
Text-align
属性值
Left
center
right
p{text-align: center;} p是块元素，left、right和center会作用于整个行。
Vertical-align
它相当于image标签里的align属性，是容器中元素 定义行内元素

div中定义a，vertical定义的是a相对于div内容的对齐方式，它和容器的高度无关，与文字内容有关

Display
display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。属性值

样式继承
样式继承只适用于元素的外观（文字、颜色、字体等），而元素在页面上的布局样式则不会被继承。如果继承这种样式，就必须使用强制继承：inherit。

定位和浮动
CSS 有三种基本的定位机制：普通流、浮动和绝对定位

Position
绝对定位
static :元素框正常生成。作为文档流的一部分（默认值）
relative :元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute :元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed :元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

Float (浮动)
float的属性值有none、left、right。
只有横向浮动，并没有纵向浮动。
当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。
会将元素的display属性变更为block。
浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）
浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

JS
JavaScript 基于对象和事件驱动,并且有安全性的客户端脚本语言.

组成
ECMAScript 基础语法
DOM 文档对象模型
BOM浏览器对象模型

使用方式
JS需要和HTML一起使用才有效果，我们可以通过直接或间接的方式将JS代码嵌入在HTML页面中。

行内JS 写在标签内部的 js代码
内部js 定义在script标签内部的js代码
外部js 单独的js文件，在HTML中通过script标签引入
我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分。由于页面的加载方式是从上往下依次加载的，而这个对我们放置的js代码运行是有影响的。
放在部分，最常用的方式是在页面中head部分放置

变量

JavaScript是一种弱类型语言，在声明变量时不需要指明数据类型，直接用var修饰符进行声明。

若只声明而没有赋值，则该变量的值为undefined。
定义才可以使用,可以在同一条var 声明多个变量

重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值
没有限制 可以赋予各种类型的值。
变量的作用域提升
变量提升只对 var 命令声明的变量有效，如果一个变量不是用 var 命令声明的，就不会发生。
全局变量 spript 标签对作用域
局部变量 function 内部就是局部
函数内部不使用var声明的变量为全局变量,函数调用后才能存在

数据类型
JS是弱类型语言，变量没有类型，但数据本身是有类型的。针对不同的类型，我们可以进行不同的操作。
JavaScript 中有6 种数据类型，其中有五种简单的数据类型：undefined、Null、布尔、数值和字符串。一种复杂数据类型Object。
数 值（Number）： 整数和小数（比如 1 和 3.14）
字符串（String）： 字符组成的文本（比如"Hello World"）
布尔值（Boolean）：true（真）和 false（假）两个特定值
undefined： 表示“未定义”或不存在，即此处目前没有任何值
Null： 表示空缺，即此处应该有一个值，但目前为空
对象（object）(引用) ： 各种值组成的集合
a. 对象（object）{name:”zhangsan”,age:”18”}
b. 数组（array）[1,2,3]
c. 函数（function）function test() {}

typeof操作符
typeof操作符是用来检测数据类型。对于值或变量使用typeof操作符会返回如下字符串
字符串 描述
undefined 未定义
boolean 布尔值
string 字符串
number 数值
object 对象或null
function 函数
说明：
a. typeof null返回的是object字符串
b. 函数不是数据类型，但是也可以使用typeof操作符返回字符串
typeof操作符可以操作变量也可以操作字面量。
注意：函数在JavaScript中是对象，不是数据类型，所以使用typeof区分function和object是有必要的

数据类型转换
对象类型不参与数据类型转换
自动转换
强制转换
parseInt()在转换之前，首先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到非字符
parseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由 parseInt()方法的第二个参数指定的
parseFloat()方法与 parseInt()方法的处理方式相似，从位置 0 开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字 符之前的字符串转换成数字。不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的，parseFloat()方法会把这个小数点之前的字符串转换成数字。
几乎每个数对象都提供了toString()函数将内容转换为字符串形式，其中Number提供的toString()函数可以将数字以指定的进制转换为字符串，默认为十进制。
Number还提供了toFixed()函数将根据小数点后指定位数将数字转为字符串，四舍五入
转换为字符串的方式，直接在任意数据后面 + ''或""即可。

运算符
算数运算符
运算符 描述 例子y=5 结果

• 加 x=y+2 x=7

• 减 x=y-2 x=3

• 乘 x=y*2 x=10
  / 除 x=y/2 x=2.5
  % 求余数 x=y%2 x=1
  ++ 自增（前导加、后导加） x=++y x=6
  – 自减（前导减、后导减） x=–y x=4

赋值和拓展运算符
运算符 例子x=10, y=5 等价于 结果
= x=y   x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
= x=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0

比较运算符
运算符 描述 例子x=5
== 等于 x8 为 false
=== 全等（值和类型） x=5 为 true；x===“5” 为 false
!= 不等于 x!=8 为 true

大于 x>8 为 false
< 小于 x<8 为 true
= 大于或等于 x>=8 为 false
<= 小于或等于 x<=8 为 true

逻辑运算符
运算符 描述 例子x=5, y=2
&& and (x < 10 && y > 1) 为 true
|| or (x5 || y5) 为 false
! not !(x==y) 为 true

三目运算符
?: 如果…否则…

块
JavaScript 使用大括号，将多个相关的语句组合在一起，称为”区块”
控制语句
流程控制语句一共有三种：
a. 流程执行: 从上到下，从左到右
b. 选择执行: 分支选择
c. 循环执行: 重复执行
if (条件表达式) {
语句体;
}

if (条件表达式) {
语句体1;
} else {
语句体2;
}

switch (值|运算表达式) {
case 值1:
语句体1;
break;
case 值2:
语句体2;
break;
…
default:
语句体n+1;
break;
}

基本格式
while (判断条件语句) {
循环体语句;
控制条件语句;
}

扩展格式
初始化语句;
while (判断条件语句) {
循环体语句;
控制条件语句; // 少了它很容易形成死循环
}

基本格式
do {
循环体语句;
} while (判断条件语句);

扩展格式：
初始化语句;
do {
循环体语句;
控制条件语句;
} while (判断条件语句);

数组
数组（array）是按次序排列的一组数据，每个值的位置都有编号（从 0 开始），整个数组用方括号表示

[数据,数据…]
New array() 空数组
New array(值1,值2…)

数组的长度可以通过length属性来获取，并可以任意更改
获取：数组名.length
更改：数组名.length = 新长度
数组中的每一个元素都可以被访问和修改，甚至是不存在的元素，无所谓越界
获取：数组名[下标]
更改：数组名[下标] = 新值

数组的遍历
普通for循环遍历
for (var i = 0; i < 数组.length; i++) {
数组名[i]是获取元素}

for in
for (var 下标(名称任意) in 数组名) {
数组名[下标]是获取元素}

Foreach

数组名.forEach(function(element, index){
数组名[下标]是获取元素}

Splice 截取(开始参数,截取几个)

函数
函数声明语句、函数定义表达式、Function构造函数

函数声明语句
function 函数名([参数列表]){}

函数表达方式
以表达式方式定义的函数，函数的名称是可以不需要的
var 变量名 = function ([参数列表]) {}
变量名()

Function构造函数接收任意数量的参数，但最后一个参数始终都被看成是函数体，而前面的参数则列举出了新函数的参数
js中同名的函数，后面的函数会覆盖前面同名的函数。
js中函数允许有不定数目的参数，后面介绍arguments对象。
JavaScript 引擎将函数名视同变量名，所以采用 function 命令声明函数时，整个函数会像变量声明一样，被提升到代码头部

函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数，定义时的参数称为形参，调用时的参数称为实参。
a.实参可以省略，那么对应形参为undefined
b.若函数形参同名（一般不会这么干），在使用时以最后一个值为准。
c.可以给参数默认值：当参数为特殊值时，可以赋予默认值。
参数为值传递，传递副本；引用传递时传递地址，操作的是同一个对象

常用调用方式：函数名([实参]);
存在返回值可以变量接收，若接收无返回值函数则为undefined。

javascript中函数也是对象，函数对象也可以包含方法。call()和apply()方法可以用来间接地调用函数。任何函数可以作为任何对象的方法来调用，哪怕这个函数不是那个对象的方法。两个方法都可以指定调用的实参。call()方法使用它自有的实参列表作为函数的实参，apply()方法则要求以数组的形式传入参数。

匿名函数：function ([参数]){}
调用：(function ([形参]) {})([实参]);
函数本身是对象，也有一些属性和方法
函数名.name 函数名称
函数名.length 形参的个数
函数名.toString() 返回函数的源码
函数作用域：全局(global variable)和局部(local variable)
函数自己调用自身。函数头:尽头 函数体:重复执行
a. 自己调用自己
b. 函数体根据判断结束递归调用