HTML部分基础总结（4）

透明度

标签指令：

opacity

数值范畴：

0-1

特性本质：

如果存在父子标签，该参数会影响子标签跟随父标签的参数设置。

Before＆After

before：

在div之前插入一段内容，并且可以进行相关的设置

after：

在div之后插入一段内容，并且可以进行相关的设置

注：

在内部样式中，可以直接编写出颜色指令改动字体颜色

浮动（详解）

标签指令：

float(浮动可以控制页面布局)

指令后缀：

left/right(左右浮动)

特性本质:

如果都不设置浮动效果,那么两个div处于同一个文档流(相当于同一层级上).

当设置了标签2具有浮动效果的时候,标签2会脱离原本的文档流,设置左浮动时,标签2会处于未设置浮动效果的标签1底部,当标签1和标签2同时设置浮动时,则会按照标签创建顺序进行排列,无论哪个方向的浮动,越接近边缘的标签,顺序越靠前.

当存在父子关系的标签时,子标签的浮动范畴就是父标签,当父标签同时设置浮动时,无论父标签如何浮动,子标签始终会在父标签中浮动.

清浮动:

编写指令:

clear:left/right;

特性本质:

该指令只会清除该标签周围元素的浮动,只会作用在要改变其位置的标签上.

定位

编写指令:

position

定位的分类:

相对定位/绝对定位/固定定位

相对定位:

编写指令:

relative+[换行]left:**px;+[换行]top:**px;

特性本质:

相对定位的参照物是标签的本身,设置相对定位并没有使得该标签脱离当前的层级,所以其底部的元素不会挤上来,偏移计算的位置在自身左上角.

绝对定位:(同时具备开启定位效果的作用)

编写指令:

absolute+~(同相对定位编写指令)

特性本质:

绝对定位的参照物脱离了当前的层级,寻找流程即从父级标签开始寻找是否有开启定位效果的父级标签,如果找到,便以当前的父级标签为参照物,如果没有找到,则会继续向上寻找跨层的父级标签,最终则会以body标签默认为参照物进行定位.(就近原则)

非static的父级标签都可以当做绝对定位的参照物

固定定位:

编写指令:

fixed+~(同相对定位编写指令)

特性本质:

固定定位的参照物脱离了当前的层级,并且是以浏览器为参照物

[另注:内部样式中,"*"具有通配符的作用,如:

*{

margin: 0;

padding: 0;

}

该指令可以把所有标签的内外边距全部清除.]