认识css

一、伪类

css伪类专门用来表示标签使用时一种特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类。

伪类的语法：

:hover伪类表示鼠标移入的状态

:active表示的是被点击的状态

:focus向拥有键盘输入焦点的标签添加样式

选择器	示例	示例说明
:active	a:active	鼠标点击标签改变样式
:hover	a:hover	鼠标悬浮在标签上改变样式
:focus	input:focus	输入元素后标签样式发生改变

二、透明度

optical属性设置标签的不透明度级别值为1

规定不透明度：从0.0(完全透明)到1.0(完全不透明)

三、块级，行级，行级块标签

1.块级标签：

无论内容多少，都会独自占据一行的。默认宽度与body一样宽（与父标签一致）默认高度时0，也可由内容撑开，可以通过width和height属性设置宽高，块标签主要是用来网页布局的（大块）

例如：<p>,<h1>,<ul>,<ol>,<hr/>

2.行级标签：

只占自身大小的标签，不会占一行。即使设置width和height也没有用。行标签主要是选中文本内容，对文本内容进行修饰。

例如：<font>,<b>,<i>,<a>

3.行级块标签：

可以设置宽高，不占一行

例如：<input>,<img>

四、Display

● 通过display样式可以修改标签的类型。

可选值： block ：设置标签为块标签

inline ：设置标签为行级标签

inline-block ：设置标签为行级块标签

none ：隐藏标签（标签将在页面中完全消失）

五、div和span

div：是一个块级标签，可以放置任何标签，没有任何附加样式，完全由我们设置，主要用来进行网页布局，称为是一个纯净版的块级标签

span：是一个行级标签，没有任何附加功能，完全由我们设置，主要用来选中文本内容进行修饰，称为是一个纯净版的行级标签

六、清除浏览器的默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所 以为很多的标签都设置了一些默认的margin和padding，而它的这些默 认样式，正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统 的去掉。

	*{
				margin: 0;
				padding: 0;
			}

七、文档流

文档流指的是文档中的标签在排列时所占用的位置

将窗体自上而下分 成一行行 ，并在每行中按从左至右的顺序排放标签，即为文档流。

●也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不 足以放下标签，标签则会另起一行，在新的一行中继 续从左至右摆放。

●这样一来每一个块标签都会另起一行，那么我们如果想在文档 流中进行 布局就会变得比较麻烦。

八、浮动

浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。

浮动使用float属性。 可选值： none ：不浮动 left ：向左浮动 right ：向右浮动

浮动后的标签会脱离原来的文档流，不会占用原来的空间。即使加了父标签（没有浮动），但是相当于父标签中时没有内容的，父标签的高度为0，没有被撑开。

浮动带来的问题：

下面的标签会向上浮动，浮动的标签会遮住下面的标签

解决办法：

在浮动的标签后,添加一个空标签, clear: left;"清除浮动 会撑开父标签

<div style="clear: left;"></div>

clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不 发生变化。

可选值： left ： 忽略左侧浮动 right ：忽略右侧浮动 both ：忽略全部浮动

九、定位

• 相对定位

相对于它 的起点进行移动，移动后原来的位置还被占用。 可以通过position:relative; 开启相对定位， left right top bottom四个属性来设置标签的偏移量。

相对定位的特点

（当标签的position属性设置为relative时，则开启了标签的相对定位）：

1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化

2.相对定位是相对于标签在文档流中原来的位置进行定位

3.相对定位的标签不会脱离文档流

• 绝对定位

绝对定位是不占空间的，运用了 绝对定位的标签会脱离原来的文档 流，浮动起来，因此视觉上会其他 的标签重叠。 可以通过position: absolute; 开启 绝对定位， left right top bottom四个属性来 设置标签的偏移量

绝对定位的特点

1.开启绝对定位，会使标签脱离文档流

2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化

3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签 的绝对定位都会同时开启父标签的相对定位） 如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位

4.绝对定位会使标签提升一个层级

5.绝对定位会改变标签的性质，行级标签变成块标签