浮动与定位,浮动定位(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 > < 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浮动与定位