关闭

Html中有关定位于浮动

142人阅读 评论(0) 收藏 举报
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:也可以用像素点,

  如下


以该坐标进行移动

   

     

   

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1011次
    • 积分:57
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章存档