Html中有关定位于浮动

1.a标签：

>默认样式：color：blue;text-decoration:underline,cussor:pointer

>行为:

-->a:link:默认颜色

-->a:visited:点击访问后的颜色（有些浏览器不支持）

-->a:hover:鼠标悬浮后的颜色

-->a:active:点击的颜色

>hover:可以通过hover去控制子元素

->例如 box:hover span{}可以控制给span

>display:会文档流腾出来

-->none:隐藏

-->block：显示

>visibility:依旧占据着文档流

-->visible显示

-->hidden：隐藏

2.定位:position(需要参考点，会漂浮起来)

>relative:相对元素本身定位。（不会破坏文档流）

>absolut：破坏文档流（后面的优先级高）

>relative、absolute/fixed的区别

-->:position可以决定absolute与fixed的起点

>fixed:与absolute类似，只是不会随滚动条滚动

3.浮动:float(元素加了浮动，会变为inline-block)

>1.将block变为inline-block

>2.line-block：破坏文档流,不会独占一行,受宽度与高度的影响

4.text-align与line-height:自能修饰图片与文字

在这里举一下定位的例子:

例子1:网站登录框的悬浮

有两个div盒子(嵌套关系),若给box2加一个absolute,top=0;left=0;则该盒子会基于body定位，即会跑到左上角，

若给其父标签加上一个position:relative，则子标签就会相对于父标签定位。（简而言之，给一个标签直接添加relative定位并没有什么用，而与sbaolut与fixed结合使用）

<div class="box" style="position:relative;">

<div class="box2" style="position:absolute;top:0px;left:0px"></div>

</div>

例子二:雪碧图的裁剪(现在几乎都使用字体图标)

如果给图片加上一个定位的话（background-position）,会自动把图片划分为9个格子

如果background-position:center center：则会把中间的图片移动到左上角并将其拉伸。

background-position：也可以用像素点,

如下

以该坐标进行移动