2021-02-23

• html总结

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种
使用display属性能够将三者任意转换
块状元素自动换行
转换方法
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
html元素及属性
**块级元素（block）**有以下几个特点：
另起一行（特立独行）
可以设置其宽度、高度，内外边距
在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）
可以容纳行内元素和其他块元素。

**行内元素（inline）**的特点：
总是和相邻的行内元素在同一行上（物以类聚）
设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。
默认宽度是他自身内容的宽度。
行内元素只能容纳其他行内元素或者文本

**行内块元素（inline-block）**的特点：
和相邻行内元素在同一行，但是之间会有空白缝隙。
默认宽度是他本身内容的宽度。
宽度、高度、行高、外边距以及内边距都可以手动设置。
路径
相对路径：以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。

绝对路径：以Web 站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。

所谓 WEB 站点根目录是指 如 localhost:8080/ 这样的路径，不包括站点上下文根…其实也就是域名啦 … 但是不管在什么样子的情况下其余的相对路径方法都是可以的哦。

其实绝对路径与相对路径的不同处，只在于描述目录路径时，所采用的参考点不同。由于对网站上所有文件而言，根目录这个参考点对所有文件都是一样的，因此，运用以根目录为参考点的路径描述方式才会被称之为绝对路径。

2、路径特殊符号
以下为建立路径所使用的几个特殊符号，及其所代表的意义。

“.” – 代表目前所在的目录，相对路径。 如：文本 或
“…” – 代表上一层目录，相对路径。 如：文本 或
“…/…/” – 代表的是上一层目录的上一层目录，相对路径。 如：
“/” – 代表根目录,绝对路径。 如：文本 或
“D:/abc/” – 代表根目录,绝对路径。

在使用相对路径时，我们用符号“.”来表示当前目录，用符号“…”来表示当前目录的父目录。

3、通俗讲解路径 -
绝对路径顾名思义，填写绝对目录路径地址那就叫绝对路径，通常我们直接使用"/"代表从根目录开始的目录路径，这个叫绝对路径。
html定位
1，static(默认)
当你没有为一个元素(例如div)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适合，取得相对较好的布局效果。

一般来说，我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式。除非你想覆盖从父元素继承来的定位系统。

left,top属性对static没有效果，static是靠margin这些定位的。

2，relative(相对定位)
在static的基础上，如果我想让一个元素在他本来的位置做一些调整(位移)，我们可以将该元素定位设置为relative，同时指定相对位移(利用top,bottom,left,right)。

有一点需要注意的是，相对定位的元素仍然在文档流中，仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。

3，absolute(绝对定位)
如果你想在一个文档(Document)中将一个元素放至指定位置，你可以使用absolute来定位，将该元素的position设置为absolute，同时使用top,bottom,left,right来定位。

如果没有父元素，位置是相对于body来进行的。

绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充。

4,mix relative and absolute(混合相对定位和绝对定位)
5, fixed(固定定位)
固定定位,利用top,bottom,left,right, 以浏览器的窗口进行定位, 一般也可以理解以body 为父元素进行定位!

6,float(浮动定位)
7,inherit
继承父元素的position 的值, 继承父元素的定位方式!