CSS

1.CSS变量声明与计算

（1）定义变量

声明一个CSS变量要以两个减号（--）开始
其作用域由选择器定义

p{
--my-color:pink;
}
/* 父元素内定义的变量可以在子元素中使用，希望一个元素在整个文档中使用，有以下两种等价的方法进行定义*/
html {
--main-color:pink;
}
:root{
--main-color:pink;
}

(2) 变量使用

使用变量时要用var()函数包裹起来

.box1{
background-color:var(--my-color)
}

(3)变量计算

calc()函数允许在声明CSS属性时执行一些计算
+和-运算符两边必须要有空白字符（这是一个巨好的习惯，是增加代码可读性的关键），如calc(100%-10px)是一个无效的表达式
*和/不需要空白字符，但最好还是加上空白字符

2.元素的显示模式

（1）块级（block）元素

独占一行
可以设置宽高，不设置时默认跟父级元素一样，高度有内容撑开
有<p> <div> <ul> <li> <header> <footer> <h1> <h2>...

（2）行内（inline）元素
一行可以有多个
不能设置宽高，尺寸由内容撑开
<a> <span> ...

(3)行内块（inline-block）元素

一行可以有多个
可以设置宽高
<textarea> <button> <img>等在效果上等同于行内块元素

（4）弹性模式

要使用flexbox，只需要在父元素上启用display:flex，所有子元素将会按照flex进行布局
这里不作过多赘述

（5）网格模式

//我先空着

3.调整元素的显示模式

if你想让块级元素在一行内显示多个，or你想让行内元素可以调整宽高。what can you do?元素的显示模式可以调整

display	说明
block	转换为块级元素
inline-block	转换为行内块元素
inline	转换为行内元素
none	让元素不显示
flex	转换为弹性模式

4.盒子模型

属性名称	说明	取值
width,height	调整内容区域的宽高	px cm 50%...
margin-top,margin-bottom,margin-left,margin-right	上下左右的外边距	同上
padding-top...	内边距	同上
border-top...	边框	边框宽度，类型（solid,dashed,dotted）颜色

通过给盒子设置box-sizing:border-box来进行盒子尺寸自动内减，不需手动设置宽高
速记格式

.box{
/* 只写一个数，四个方向都是10px */
margin:10px;
/* 两个值：上下，左右 */
margin:10x 15px;
/* 三个值：上 左右 下 */
margin:10px 15px 20px;
/* 四个值：上 右 下 左 */
margin:10px 15px 20px 25px;
}

5.伪元素和伪类

（1）伪类

伪类是以一个冒号为前缀，被添加到选择器末尾的关键字，用与指定做选元素的特殊状态
当你希望指定元素在特定状态下能够呈现出不同的样式时，可以使用伪类

（2）伪元素

伪元素时以双冒号为前缀被添加到选择器末尾的关键字，对于所选元素的特定部分修改样式，也可以抽象地创建一些不在文档树中的元素，并为其添加样式。
常用的伪元素：::before,::after,::first-letter,::first-line

6.定位与布局

（1）文档流和文本流

文档流，从左到右从上到下地显示，float,absolute,relative会脱离文档流
文本流，元素内部的一系列字符的排列规则，即元素内部字符从左到右从上到下显示，absolute,relative会脱离文本流，但float不会脱离文本流

（2）定位

相对定位	绝对定位	固定定位
脱离文档流和文本流，相对于其正常文档流中的位置移动	脱离文档流和文本流，相对于其最近的已定位的祖先元素的位置移动	脱离文档流和文本流，相对于浏览器视口边缘中的位置移动

specially，float虽然脱离了文档流，但是没有脱离文本流，所以会经常用来产生文字环绕效果，float相对于父元素移动，但是子元素的float会消除父元素的float

float属性的四个可能值
- left将元素浮动到左边
- right将元素浮动到左边
- none默认值，不浮动
- inherit默认值，不浮动

JS

即JavaScript，是一种用与编写网页和应用程序的脚本语言。
通常用于与网页交互，修改网页内容、处理用户输入和操作，以及与后端进行数据交互。

引用js的方法

``标签引入
- 在<code class="prettyprint" >标签中嵌套一个标签，再在其中写JS属性
- 另写一个.js文件，然后在html页面中的<code class="prettyprint" >标签使用进行引入

<head>
    <script src="myJavaScript.js">
</script>

变量、常量与函数

定义变量let和var
- 两者都可以定义变量，但由于作用域和安全性等原因，应尽量使用let来声明变量
```
let a = 2,b = 3;
```
基本类型
- 布尔值
- 数字
- 字符串
js中没有单独的char类型，相比于其他编程语言，字符通常以字符串的形式表示
可以用字符串检索或字符串方法访问。可以用str[0]获取str的第一个字符，也可以通过str.charAt(0)来获取索引为0的字符。
- undefined:表示未定义的值，通常在变量声明但未赋值时使用
- null：表示空值或不存在的对象
引用对象类型（对象类型）
- 对象（Objection）：表示包含键值对的集合，可以通过属性名访问。例如：{name:"john",age:25}。可以找些视频和实例来加强理解
- 数组(Array):表示按顺序存储的一组值。例如：[1.'2',false,'hello world']这个也可以网上搜搜看

定义常量

const定义常量

const a = 3;
a = 5;//报错，是常量，不能赋值

函数
- 函数是可以执行的代码块，可以接收函数并返回值
- function定义函数
onclick调用函数

DOM树操作

获取和修改DOM节点

getElementById()方法：返回带有指定ID的元素对象(注意：Id时时Element，ClassName时是Elements)
getElementsByClassName()方法：返回带有指定类名的所有元素对象的列表
- 在使用时可以增加索引来调取对象
```
let x = document.getElementsByClassName('name1')[0];
let y = document.getElementsByClassName('name1')[1];
```
innerHTML获取某个标签中的内容
value可以获取input、textarea中的内容
style可以获取标签的样式

获取过后可以通过赋值或者.display .style .color等进行更改

添加与删除DOM节点

方法	描述
appendChild()	把新的子节点添加到指定节点
removeChild()	删除子节点
replaceChild()	替换子节点
insertBefore()	在指定子节点前面插入新的子节点
createElement()	创建元素节点

ljl17378

软件园学生在线

前端二梁建麟

CSS