Html中有关定位于浮动

原创 2015年11月20日 23:26:40
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:也可以用像素点,

  如下


以该坐标进行移动

   

     

   

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

HTML CSS的兼容性问题、IE6BUG之浮动与定位篇

IE6下内容撑开设置宽高———————————————————-在IE6下,内容会撑开设置好的宽高 例如,给固定宽度的wrap_div下放left_div、right_div两个div并浮动, ...

HTML&CSS精选笔记_浮动与定位

浮动与定位 元素的浮动 元素的浮动属性float 什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素中指定位置的过程。 如何定义浮...

HTML+CSS进阶学习摘录(表单效果+清除浮动+定位布局)(五)

一、表单效果 1、深入radio和checkbox  当文字大小为12px时,我们给单选框或复选框定义"vertical-align: -3px" 即可解决对齐问题。针对不同页面文字大小调整属性值大小...
  • zyw6042
  • zyw6042
  • 2017年07月08日 15:10
  • 231

css浮动与定位

浮动与定位的实例,以及实际出现的问题

css之浮动与定位

浮动与定位

精通css(3) 盒模型,定位,浮动

终于到了css最重要的3个部分:盒模型,定位,浮动。先讲盒模型吧。 1.盒模型概述 页面上的每个元素都被看成一个矩形框。这个框由元素的内容、内边距、边框和外边距组成。 内边距、边...

说说标准——CSS核心可视化格式模型(visual formatting model)之八:float 特性以及浮动(Float)定位细则一

浮动特性非常有用,3大布局核心之一。虽然如此,它涉及内容过多,浏览器兼容性问题也很多。它的定位不仅涉及 包含块,还涉及到了行框,块框,还有行内框等内容;并且,各浏览器对其的支持还有不少兼容性问题。因此...

分享福州网(fuzhou99.com)论坛的绝对定位浮动导航条+返回顶部 JS效果

分享福州网论坛fuzhou99.com帖子页面的绝对定位浮动导航条+返回顶部的JS效果,点击导航条栏目会出现伸缩展开隐藏层特效,当滚动滚动条时”返回顶部“隐藏按钮就会出现,还有一些其他的特效功能,这边...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Html中有关定位于浮动
举报原因:
原因补充:

(最多只允许输入30个字)