浮动与定位,浮动定位(html5技术)

Posted 牵只蜗牛去散步!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浮动与定位,浮动定位(html5技术)相关的知识,希望对你有一定的参考价值。



  浮动与定位在网页设计中应用得很广泛,是两种主要布局方式的实现方法。

  我们知道,网页上一般来说,块标签是自上而下的一块块堆叠,行内标签则在一行内从左到右依次并排,如果所有网页的都这样机械的排列着,也太单调了,所以有没有一个东西让标签内容脱离这种文档流呢,首先就可以考虑float。

  float,使某元素浮动起来,可以把元素移到,比如浏览器边沿的左边或右边,看上去它们就像粘在边沿上一样,它下边的文本则会充斥在它的一边或者下面,如下例

<! DOCTYPE html >   < html >   < head >   < title > float test </ title >   < style  type ="text/css" > /* reset */  body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img margin : 0 ; padding : 0 ;  .wrap width : 300px ;  margin : 0 auto ;  border : 2px solid #30c13a ;    .wrap .fl  width : 100px ; float : left ;  background-color : #8cceff ;     </ style >   </ head >   < body >   < div  class ="wrap" >   < p class ="fl" >  The Macintosh Classic is a personal  </ p >   < p >  It was the first Apple Macintosh sold under US$1,000. Production of the Classic was prompted by the success of the Macintosh Plus and the SE.  </ p >   </ div >   </ body >   </ html >   View Code

  效果

  float有三个值:left、right、none,向左、向右或者不使用浮动。上边是向左浮动(蓝色背景),跟在它后边p标签中的文本没给任何样式,本来两个p标签中的文本块会一上一下分段堆叠,加了float left后,下边p标签中的文本,就环绕在它周围,包括下边和右边。

  一般我们在设置浮动时会给浮动块一个宽度,这样才能显示浮动的意义,如果任由其充满在其父元素中一整行就不需要浮动了,但是多的文本又会跑到浮动块的下边去,所以让两个块分开来更合理,可以对右边环绕的文本块加一个margin(或者再加一个padding),这个左边距至少要是浮动块的盒模型宽度(注意不是左边元素本身的width属性值,还包括了它的padding、border和margin),通常比这个宽度略大,比如这里可以给右边那个文本块设置:margin-left:110px; ,将两个块隔离开。

  因为浮动脱离了html文档流,所以有时候浏览器在计算块的宽高时,没有将浮动的模块算在内,比如下边这样

<! DOCTYPE html >   < html >   < head >   < title > float test </ title >   < style  type ="text/css" > /* reset */  body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img margin : 0 ; padding : 0 ;  .wrap width : 300px ;  margin : 0 auto ;  border : 2px solid #30c13a ;    .wrap .fl  width : 100px ; float : left ;  background-color : #8cceff ;     </ style >   </ head >   < body >   < div  class ="wrap" >   < p class ="main" >  It was the first Apple Macintosh sold under US$1,000. Production of the Classic was prompted by the success of the Macintosh Plus and the SE.  </ p >   < class ="fl" > The Macintosh Classic is a personal  </ p >   </ div >   </ body >   </ html >   View Code

  效果

  就是将上例中的浮动模块和右边的文本模块调换了位置,去掉了右边文本块的margin,外围的类为wrap的div明明将这个浮动块包在里边,但是网页上的border边框可以看出,高度的计算没有把它放在里边,浮动也跑到外边去了,因此浮动还要注意的是:如果要让B围绕A,且A浮动,在html代码的组织上,要把A模块的代码放在B模块之前,对于左或右均是如此。

   浮动可能产生的问题:

  1.元素的border穿浮动块而过

  代码和效果

<! DOCTYPE html >   < html >   < head >   < title > float test </ title >   < style  type ="text/css" > /* reset */  body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img margin : 0 ; padding : 0 ;  .wrap width : 400px ;  height : 100px ;  margin : 0 auto ;  border : 2px solid #3c3c3c ;    .wrap .banner  font-size : 120% ;  font-weight : normal ;    .wrap .banner  margin : 5px ;  border :  2px dashed #30c13a ; /* overflow:hidden; */    .wrap .fr  float : right ;  width : 100px ;  color : #fff ;  margin-left : 10px ; margin-right : 10px ;  background-color : #c19132 ;     </ style >   </ head >   < body >   < div  class ="wrap" > < div  class ="fr" >   < ul >   < li > Apple </ li >   < li > Google </ li >   < li > Microsoft </ li >   </ ul >   </ div >   < h1 class ="banner" >  Welcome To CSS World  </ h1 >   </ div >   </ body >   </ html >   View Code

  效果     

  添加overflow后

  右上角,标题的边框穿过了浮动的列表,为消除这种因背景色或边框在浮动元素的下方出现的情形,需要使用overflow,我们知道overflow是文本溢出时采取的措施,比如hidden隐藏多出宽高范围的文本。具体说是,在.wrap .banner...中添加overflow:hidden即可,IE6可能还要加一个zoom:1;(这是一个神奇的IE属性,解决了好多IE显示问题~)

  2. 在浮动元素周围环绕,但不需要

  代码和效果

<! DOCTYPE html >   < html >   < head >   < title > float test </ title >   < style  type ="text/css" > /* reset */  body,div,p,a,ul,li,h1,h2,h3,h4,h5,h6,pre,img margin : 0 4浮动与定位

3.浮动与定位

H5浮动与定位

前端基础学习浮动与定位

浮动与定位

前端基础学习浮动与定位