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】浮动结构深入浅出

写在前面的话:        由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解。        如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你。 ...
  • yixiantian7
  • yixiantian7
  • 2016年05月22日 11:53
  • 916

Html中浅谈浮动

代码:                     #a {             background-color: Red;             heigh...
  • qice675563721
  • qice675563721
  • 2016年12月21日 14:55
  • 308

HTML-浮动与清除浮动

1.浮动:float:left;right;none 2.浮动的模块是不占用位置的,如下: 如果给上面的div1和div2加上左浮动,则div3就会上移,出现如下所示效果: 为了让div1...
  • luohuaxinyue
  • luohuaxinyue
  • 2015年12月10日 16:41
  • 8828

html的浮动按钮

最终达到的效果图: 代码实现: Document .checkbox { position: relative; dis...
  • dancheng1
  • dancheng1
  • 2017年08月08日 16:59
  • 410

html浮动效果无法显示解决办法

今天做项目的时候突然发现html的浮动效果无法正确表示,原因是 当父容器里面里面嵌套有一个DIV,当DIV设置了浮动,那么父容器是无法被撑开的,也就是说DIV在这里相当于浮在了页面上方,跟DIV不在...
  • q5841818
  • q5841818
  • 2015年05月19日 22:57
  • 1094

html浮动布局

html浮动布局 浮动布局:         之所以要使用到浮动布局,只要是像div等块标签,在网页显示时,无论其宽的大小,都是独占一行。而在网页布局中,我们常常需要将两个或者是多个div并排放置...
  • aozeahj
  • aozeahj
  • 2016年10月19日 10:31
  • 4488

html css控制浮动元素居中显示

基本的html结构: p1 p2 p3 p4 p5 欲实现效果: 浮动元素居中的出现...
  • wkd22775
  • wkd22775
  • 2016年07月06日 09:22
  • 1154

html固定浮动在底部div的实现效果

Document    body{  height:1500px;  }  .footer{  z-index:99999;  position:fixed;   bottom:0; left:0; ...
  • ligaogang
  • ligaogang
  • 2014年11月24日 10:38
  • 2131

HTML浮动与定位方式详解

关于float与position的三种状态使用。 先简单介绍一下position的三种状态分别是fixed、absolute和relativefixed:固定元素位置,脱离正常文档流,不论页面中元素...
  • charles_xyc
  • charles_xyc
  • 2017年08月14日 07:10
  • 175

HTML页面底脚浮动图片添加

#dvimg { z-index: 999; position: fixed; bottom: 0px; left: 0px; ...
  • Adensky
  • Adensky
  • 2012年08月22日 16:54
  • 3828
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Html中有关定位于浮动
举报原因:
原因补充:

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