2020.12.25html流操作

控制

标准流

1. heml标签，被分为两种类型，一种是块级标签（独占一行能够设置宽和高），另外一种是行级标签（不会独占一行，一般不能设置宽和高）
2. 这两种类型的标签都是按照标准流进行渲染加载和排列

标准流工作方式：

• 行级标签：是从左到右加载，知道这一行占满才会向后加载，如果重合的话后面的回覆盖前面的，默认情况下是从左到右排列
• 块级标签：是从上到下加载

display：
当我们的行级标签想要改变高度的时候就可以使用【display：inline-block】就表示可以调节宽高的焊机标签，【display：none】表示隐藏，【display：inline】表似乎把块级元素转换为行级元素。。。。【display：block】把行级元素转换为块级元素

浮动流
浮动流不是标准流，改变了标准流的加载方式，不是从左到右，从上到下加载。

1. 如果设置标签float，她就可以让元素向左或者向右浮动，如果元素按照浮动流渲染，那么该元素回脱离标准流的加载方式。所以也就没有行级元素和块级别元素之说。因为行级和块及是标准流的说法。所以浮动流中都可以设置宽和高
2. 在标准流的加载方式下，元素是从左到右，从上到下，如果更改标准流，那么该元素后面的元素（下面或者旁边的）就会相应的顶上来，因为不是标准流之后，这个位置就空出来了，后面的子依然就会顶上来
3. 如果按照i浮动流进行加载，那么在浮动流加载的情况下，那么元素之间排列时紧邻排列，中间没有空隙。
   

clear属性
如果设置了clear属性，那么就能使得元素在浮动过程中不会去紧靠其他的标签

定位流
相对流

1. 相对定位不会脱离标准流，不会脱离标准流，有行和块级别之分，即使进行了位置移动，但是还是站住了这个位置，不会有其它元素顶上来
2. 设置方式：position：relative设置值为相对的，进行位置移动需要结合属性top，left，right，bottom进行空间位置移动
   

绝对定位

1. 脱离了标准流，所以下面的元素就会顶上来。即使你没走后面的也会顶上来，但是看见移动的是时候时在标准流的基础之上进行的。
2. 格式：position设置为absolute，设置top left right bottom搭配使用
3. 如果他的父元素或者祖先元素都没有设置为定位流，那么绝对得就像对于body定位，（必须在与里面），如果有定位流就i相对于父元素或者祖先元素。（就近原则）
4. 不管是块级元素还是行级元素，都是可以调节宽和搞高的

固定定位：
也会脱离标准流，一般是通过设置position为【fixed】，依然借助top，left，right，bottom，
不区分行和块，核对对定位一样，但是不论你怎么滑动滚动周都不会互动

z-index:有定位流的情况下才能改变
作用就是：可以改变定位流种前后加载顺序，

• 定位流以下规律
  1. 默认情况下定位流会覆盖标准流
  2. 默认情况下后面的会覆盖前面的
  3. 定位流种设置【z-index】是一个整数数值，谁的大谁就后加载
     如果父元素设置【z-index】,子元素的【z-index】就会失效，谁的父元素大，谁就显示在上方，重复原则

JavaScript介绍
javascrpt是web上面的编程语言，用于和用户交互，不需要进行编译，

1. 组成：
核心语法，包括基本的流程控制，运算符，数据类型，数组，对象，类，接口等
2. 览器对象模型：
主要是操作当前浏览器窗口的内容，入页面跳转和页面的刷新动作
3.文档对象模型：
主要是操作html文件中华的具体内容（叶绵绵元素内容），页面中一个div动态给div添加高宽，添加背景图片，植入文本内容
4. javaScript代码的引入
内嵌式：在html文档中把相关的代码直接放在【标签script】中。【标签script】可以卸载body或者head里面

外联式：首先需要在hyml外面建立一个js文件，文件扩展名为【xxx.js】

备注：

1. 引入位置虽然随意，单是存在加载顺序问题，如果js代码在head里面那么首先会加载js代码，如果js代码中对页面元素用控制，就不会产生效果，如果在body里面，并且在控制元素的下面那么浏览器先加载元素，再加载js代码。那么就有效果。
2. 如果引入的事对页面元素控制的代码技术，而是第三方js插件，那么一般情况不再需要先引入（浏览器·先加载），才能进下后续

ECMAScript核心语法：
核心语法中，语法的特征和java基本一致，个别有区别。

1. 声明变量的时候不需要指定变量的数据类型，通用写法是var 例如：var num=123;